Index: typo3/backend.php =================================================================== --- typo3/backend.php (revision 7149) +++ typo3/backend.php (working copy) @@ -97,7 +97,7 @@ 'contrib/swfupload/plugins/swfupload.queue.js', 'md5.js', 'js/common.js', - 'js/sizemanager.js', + 'js/extjs/backendsizemanager.js', 'js/toolbarmanager.js', 'js/modulemenu.js', 'js/iecompatibility.js', @@ -109,6 +109,8 @@ $this->jsFilesAfterInline = array( 'js/backend.js', 'js/loginrefresh.js', + 'js/extjs/viewport.js', + 'js/extjs/viewportConfiguration.js', ); // add default BE css $this->css = ''; @@ -171,13 +173,7 @@ if ($this->menuWidth != $this->menuWidthDefault) { $this->css .= ' - #typo3-logo, - #typo3-side-menu { - width: ' . ($this->menuWidth - 1) . 'px; - } - - #typo3-top, - #typo3-content { + #typo3-top { margin-left: ' . $this->menuWidth . 'px; } '; @@ -186,17 +182,17 @@ // create backend scaffolding $backendScaffolding = '
-
+
-
' - .$this->renderToolbar() - .'
+
' . + $this->renderToolbar() . + '
-
- '.$menu.' -
-
+
' . + $menu . + '
+
@@ -215,13 +211,19 @@ // register the extDirect API providers // Note: we need to iterate thru the object, because the addProvider method // does this only with multiple arguments - $pageRenderer->addExtOnReadyCode( - 'for (var api in Ext.app.ExtDirectAPI) { + $pageRenderer->addExtOnReadyCode(' + for (var api in Ext.app.ExtDirectAPI) { Ext.Direct.addProvider(Ext.app.ExtDirectAPI[api]); }', TRUE ); + // initiates the ExtJS based backend viewport + $pageRenderer->addExtOnReadyCode(' + TYPO3.Backend = new TYPO3.Viewport(TYPO3.Viewport.configuration);', + TRUE + ); + // remove duplicate entries $this->jsFiles = array_unique($this->jsFiles); @@ -374,6 +376,7 @@ 'workspaceFrontendPreviewEnabled' => $GLOBALS['BE_USER']->workspace != 0 && !$GLOBALS['BE_USER']->user['workspace_preview'] ? 0 : 1, 'veriCode' => $GLOBALS['BE_USER']->veriCode(), 'denyFileTypes' => PHP_EXTENSIONS_DEFAULT, + 'moduleMenuWidth' => $this->menuWidth - 1, 'showRefreshLoginPopup' => isset($GLOBALS['TYPO3_CONF_VARS']['BE']['showRefreshLoginPopup']) ? intval($GLOBALS['TYPO3_CONF_VARS']['BE']['showRefreshLoginPopup']) : FALSE, ); $t3LLLcore = array( @@ -459,7 +462,6 @@ var TS = new typoSetup(); var currentModuleLoaded = ""; - var goToModule = ' . $goToModuleSwitch . '; /** * Frameset Module object @@ -477,8 +479,12 @@ } var fsMod = new fsModules();' . $moduleFramesHelper . ';'; + // add goToModule code + $pageRenderer = $GLOBALS['TBE_TEMPLATE']->getPageRenderer(); + $pageRenderer->addExtOnReadyCode(' + top.goToModule = ' . $goToModuleSwitch . '; + '); - // Check editing of page: $this->handlePageEditing(); $this->setStartupModule(); @@ -558,7 +564,8 @@ $moduleParameters = t3lib_div::_GET('modParams'); if($startModule) { - $this->js .= ' + $pageRenderer = $GLOBALS['TBE_TEMPLATE']->getPageRenderer(); + $pageRenderer->addExtOnReadyCode(' // start in module: function startInModule(modName, cMR_flag, addGetVars) { Event.observe(document, \'dom:loaded\', function() { @@ -567,7 +574,7 @@ } startInModule(\''.$startModule.'\', false, '.t3lib_div::quoteJSvalue($moduleParameters).'); - '; + '); } } Index: typo3/classes/class.modulemenu.php =================================================================== --- typo3/classes/class.modulemenu.php (revision 7149) +++ typo3/classes/class.modulemenu.php (working copy) @@ -515,10 +515,10 @@ top.content.nav_frame.location = top.getModuleUrl(top.TS.PATH_typo3 + navFrames[mainModName]); } } else { - $("content").src = top.TS.PATH_typo3 + modScriptURL; + TYPO3.Backend.loadModule(mainModName, modName, top.getModuleUrl(modScriptURL)); } } else if (modScriptURL) { - $("content").src = top.getModuleUrl(top.TS.PATH_typo3 + modScriptURL + additionalGetVariables); + TYPO3.Backend.loadModule(mainModName, modName, top.getModuleUrl(modScriptURL + additionalGetVariables)); } currentModuleLoaded = modName; top.fsMod.currentMainLoaded = mainModName; Index: typo3/css/backend-scaffolding.css =================================================================== --- typo3/css/backend-scaffolding.css (revision 7149) +++ typo3/css/backend-scaffolding.css (working copy) @@ -19,20 +19,19 @@ - - - - - - - - - - - - - - - - - - - - - */ body#typo3-backend-php { - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } -#typo3-backend { - width: 100%; -} - -#typo3-logo, -#typo3-side-menu { +#typo3-logo { float: left; width: 159px; } +#typo3-toolbar div { + overflow: visible !important; +} + #typo3-top-container { height: 25px; } @@ -41,28 +40,17 @@ clear: both; } -#typo3-top, -#typo3-content { +#typo3-top { margin-left: 160px; } -#typo3-side-menu { - overflow: auto; -} - iframe { width: 99.9%; } +#typo3-side-menu, #typo3-content, -#typo3-main-container, -#typo3-main-container * iframe { - height: 660px; - z-index: 1; +iframe { + height: 100%; + overflow: auto; } - - - - - - Index: typo3/css/backend-style.css =================================================================== --- typo3/css/backend-style.css (revision 7149) +++ typo3/css/backend-style.css (working copy) @@ -39,6 +39,7 @@ list-style: none; margin: 0px; padding: 0px; + z-index: 200; } #typo3-toolbar li { @@ -63,6 +64,8 @@ .toolbar-item-menu { top: 25px; + z-index: 100; + position: absolute; } #typo3-toolbar .no-separator { Index: typo3/js/extjs/backendsizemanager.js =================================================================== --- typo3/js/extjs/backendsizemanager.js (revision 0) +++ typo3/js/extjs/backendsizemanager.js (revision 0) @@ -0,0 +1,48 @@ +/*************************************************************** +* Copyright notice +* +* (c) 2010 Stefan Galinski +* All rights reserved +* +* This script is part of the TYPO3 project. The TYPO3 project is +* free software; you can redistribute it and/or modify +* it under the terms of the GNU General Public License as published by +* the Free Software Foundation; either version 2 of the License, or +* (at your option) any later version. +* +* The GNU General Public License can be found at +* http://www.gnu.org/copyleft/gpl.html. +* A copy is found in the textfile GPL.txt and important notices to the license +* from the author is found in LICENSE.txt distributed with these scripts. +* +* +* This script is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +* GNU General Public License for more details. +* +* This copyright notice MUST APPEAR in all copies of the script! +***************************************************************/ + +/** + * Set's the height of the backend in relation to the visible area. This resizes + * the module menu and the content of the TYPO3 viewport e.g. if you open firebug that + * itself takes some height from the bottom. + * + * @author Stefan Galinski + */ +TYPO3.BackendSizeManager = function() { + var resizeBackend = function() { + var viewportHeight = document.viewport.getHeight(); + var topHeight = Ext.get('typo3-toolbar').getHeight(); + var styles = { + height: (viewportHeight - topHeight) + 'px' + } + + Ext.get('typo3-side-menu').setStyle(styles); + Ext.get('content').setStyle(styles); + } + + Ext.EventManager.on(window, 'load', resizeBackend); + Ext.EventManager.on(window, 'resize', resizeBackend); +}(); Index: typo3/js/extjs/viewport.js =================================================================== --- typo3/js/extjs/viewport.js (revision 0) +++ typo3/js/extjs/viewport.js (revision 0) @@ -0,0 +1,159 @@ +/*************************************************************** + * Copyright notice + * + * (c) 2010 Stefan Galinski + * All rights reserved + * + * This script is part of the TYPO3 project. The TYPO3 project is + * free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 2 of the License, or + * (at your option) any later version. + * + * The GNU General Public License can be found at + * http://www.gnu.org/copyleft/gpl.html. + * A copy is found in the textfile GPL.txt and important notices to the license + * from the author is found in LICENSE.txt distributed with these scripts. + * + * + * This script is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * This copyright notice MUST APPEAR in all copies of the script! + ***************************************************************/ + +/** + * Extends the viewport with some functionality for TYPO3. + * + * @author Stefan Galinski + */ +TYPO3.Viewport = Ext.extend(Ext.Viewport, { + /** + * Contains the navigation widgets in a simple array and identified by an unique idea + * + * @see registerNavigationWidget() + * @var object + */ + navigationWidgetContainer: {}, + + /** + * Contains the meta informations of the navigation widgets + * + * @see registerNavigationWidget() + * @var object + */ + navigationWidgetMetaData: {}, + + /** + * The toolbar area + * + * @var Ext.Panel + */ + Toolbar: null, + + /** + * The content area + * + * @var Ext.Panel + */ + ContentContainer: null, + + /** + * The navigation frame area + * + * @var Ext.Panel + */ + NavigationContainer: null, + + /** + * The module menu area + * + * @var Ext.Panel + */ + ModuleMenuContainer: null, + + /** + * Initializes the ExtJS viewport with the given configuration. + * + * @param configuration object configuration of the viewport + * @return void + */ + initComponent: function(configuration) { + TYPO3.Viewport.superclass.initComponent.apply(this, arguments); + + this.ContentContainer = Ext.ComponentMgr.get('typo3-contentContainer'); + this.NavigationContainer = Ext.ComponentMgr.get('typo3-navigationContainer'); + this.Toolbar = Ext.ComponentMgr.get('typo3-toolbar'); + this.ModuleMenuContainer = Ext.ComponentMgr.get('typo3-module-menu'); + }, + + /** + * Loads a module into the content container + * + * @param mainModuleName string name of the main module (e.g. web) + * @param subModuleName string name of the sub module (e.g. page) + * @param contentScript string the content provider (path to a php script) + * @return void + */ + loadModule: function(mainModuleName, subModuleName, contentScript) { + var navigationWidgetActive = false; + var widgetMainModule = ''; + var widgetSubModule = ''; + var widget = null; + for (var widgetId in this.navigationWidgetMetaData) { + widgetMainModule = this.navigationWidgetMetaData[widgetId].mainModule; + widgetSubModule = this.navigationWidgetMetaData[widgetId].subModule; + widget = this.navigationWidgetMetaData[widgetId].widget; + + if ((widgetMainModule === mainModuleName || widgetMainModule === '*') && + (widgetSubModule === subModuleName || widgetSubModule === '*') + ) { + widget.show(); + navigationWidgetActive = true; + } else { + widget.hide(); + } + } + + if (navigationWidgetActive) { + this.NavigationContainer.show(); + } else { + this.NavigationContainer.hide(); + } + + // top.currentSubScript + Ext.get('content').set({ + src: top.TS.PATH_typo3 + contentScript + }); + + this.NavigationContainer.ownerCt.doLayout(); + }, + + /** + * Adds the given widget to the navigation container. The key will be the id attribute + * of the given widget. + * + * @param mainModule string main module or wildcard (*) for all + * @param subModule string sub module or wildcard (*) for all + * @param widget object ExtJS widget (e.g. an Ext.Panel); must contain an id attribute! + * @return void + */ + registerNavigationWidget: function(mainModule, subModule, widget) { + // only one instance of specific widget may be exists! + if (this.navigationWidgetMetaData[widget.id] === undefined) { + this.navigationWidgetMetaData[widget.id] = { + mainModule: mainModule, + subModule: subModule, + widget: widget + }; + + // always take the full width and height + widget.anchor = '100% 100%'; + this.NavigationContainer.add(widget); + } + } +}); + +Ext.reg('typo3Viewport', TYPO3.Viewport); Index: typo3/js/extjs/viewportConfiguration.js =================================================================== --- typo3/js/extjs/viewportConfiguration.js (revision 0) +++ typo3/js/extjs/viewportConfiguration.js (revision 0) @@ -0,0 +1,77 @@ +/*************************************************************** + * Copyright notice + * + * (c) 2010 Stefan Galinski + * All rights reserved + * + * This script is part of the TYPO3 project. The TYPO3 project is + * free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 2 of the License, or + * (at your option) any later version. + * + * The GNU General Public License can be found at + * http://www.gnu.org/copyleft/gpl.html. + * A copy is found in the textfile GPL.txt and important notices to the license + * from the author is found in LICENSE.txt distributed with these scripts. + * + * + * This script is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * This copyright notice MUST APPEAR in all copies of the script! + ***************************************************************/ + +/** + * The backend viewport configuration + * + * @author Stefan Galinski + */ +TYPO3.Viewport.configuration = { + layout: 'border', + id: 'typo3-viewport', + renderTo: Ext.getBody(), + border: false, + items: [{ + region: 'north', + id: 'typo3-toolbar', + contentEl: 'typo3-top-container', + border: false + }, { + layout: 'absolute', + region: 'west', + id: 'typo3-module-menu', + contentEl: 'typo3-side-menu', + width: TYPO3.configuration.moduleMenuWidth, + anchor: '100% 100%', + border: false + }, { + region: 'center', + layout: 'border', + border: false, + items: [{ + region: 'west', + layout: 'absolute', + id: 'typo3-navigationContainer', + width: 300, + anchor: '100% 100%', + collapsible: true, + collapseMode: 'mini', + hideCollapseTool: true, + animCollapse: false, + split: true, + autoScroll: true, + hidden: true, + border: false + }, { + region: 'center', + layout: 'absolute', + id: 'typo3-contentContainer', + contentEl: 'typo3-content', + anchor: '100% 100%', + border: false + }] + }] +};