-
-
@@ -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
+ }]
+ }]
+};