typo3/js/extjs/viewport.js

   1 /***************************************************************
   2  *  Copyright notice
   3  *
   4  *  (c) 2010 Stefan Galinski <stefan.galinski@gmail.com>
   5  *  All rights reserved
   6  *
   7  *  This script is part of the TYPO3 project. The TYPO3 project is
   8  *  free software; you can redistribute it and/or modify
   9  *  it under the terms of the GNU General Public License as published by
  10  *  the Free Software Foundation; either version 2 of the License, or
  11  *  (at your option) any later version.
  12  *
  13  *  The GNU General Public License can be found at
  14  *  http://www.gnu.org/copyleft/gpl.html.
  15  *  A copy is found in the textfile GPL.txt and important notices to the license
  16  *  from the author is found in LICENSE.txt distributed with these scripts.
  17  *
  18  *
  19  *  This script is distributed in the hope that it will be useful,
  20  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
  21  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  22  *  GNU General Public License for more details.
  23  *
  24  *  This copyright notice MUST APPEAR in all copies of the script!
  25  ***************************************************************/
  26
  27 Ext.ns('TYPO3');
  28
  29 /**
  30  * Extends the viewport with some functionality for TYPO3.
  31  *
  32  * @author Stefan Galinski <stefan.galinski@gmail.com>
  33  */
  34 TYPO3.Viewport = Ext.extend(Ext.Viewport, {
  35         /**
  36          * Contains the navigation widgets in a simple array and identified by an unique idea
  37          *
  38          * @see registerNavigationWidget()
  39          * @var object
  40          */
  41         navigationWidgetContainer: {},
  42
  43         /**
  44          * Contains the meta informations of the navigation widgets
  45          *
  46          * @see registerNavigationWidget()
  47          * @var object
  48          */
  49         navigationWidgetMetaData: {},
  50
  51         /**
  52          * The topbar area
  53          *
  54          * @var Ext.Panel
  55          */
  56         Topbar: null,
  57
  58         /**
  59          * The content area
  60          *
  61          * @var Ext.Panel
  62          */
  63         ContentContainer: null,
  64
  65         /**
  66          * The navigation frame area
  67          *
  68          * @var Ext.Panel
  69          */
  70         NavigationContainer: null,
  71
  72         /**
  73          * The module menu area
  74          *
  75          * @var Ext.Panel
  76          */
  77         ModuleMenuContainer: null,
  78
  79         /**
  80          * The debug console
  81          *
  82          * @var Ext.TabPanel
  83          */
  84         DebugConsole: null,
  85
  86         /**
  87          * Initializes the ExtJS viewport with the given configuration.
  88          *
  89          * @return void
  90          */
  91         initComponent: function() {
  92                 // adjust the width of module menu
  93                 this.initialConfig.items[1].width = TYPO3.configuration.moduleMenuWidth;
  94                 // call parent constructor
  95                 TYPO3.Viewport.superclass.initComponent.apply(this, arguments);
  96
  97                 this.ContentContainer = Ext.ComponentMgr.get('typo3-contentContainer');
  98                 this.NavigationContainer = Ext.ComponentMgr.get('typo3-navigationContainer');
  99                 this.Topbar = Ext.ComponentMgr.get('typo3-topbar');
 100                 this.ModuleMenuContainer = Ext.ComponentMgr.get('typo3-module-menu');
 101
 102                 // adds the debug console and some listeners to consider the initial hiding of
 103                 // the debug console (the viewport needs to be resized if it's expand/collapse)
 104                 // -> see the TYPO3.BackendSizeManager
 105                 this.DebugConsole = Ext.ComponentMgr.get('typo3-debug-console');
 106                 this.DebugConsole.addListener({
 107                         'resize': {
 108                                 scope: this,
 109                                 fn: function() {
 110                                         this.fireEvent('resize');
 111                                 }
 112                         },
 113                         'collapse': {
 114                                 scope: this,
 115                                 fn: function() {
 116                                         this.fireEvent('resize');
 117                                 }
 118                         }
 119                 });
 120         },
 121
 122         /**
 123          * Loads a module into the content container
 124          *
 125          * @param mainModuleName string name of the main module (e.g. web)
 126          * @param subModuleName string name of the sub module (e.g. page)
 127          * @param contentScript string the content provider (path to a php script)
 128          * @return void
 129          */
 130         loadModule: function(mainModuleName, subModuleName, contentScript) {
 131                 var navigationWidgetActive = false;
 132                 var widgetMainModule = '';
 133                 var widgetSubModule = '';
 134                 var widget = null;
 135                 for (var widgetId in this.navigationWidgetMetaData) {
 136                         widgetMainModule = this.navigationWidgetMetaData[widgetId].mainModule;
 137                         widgetSubModule = this.navigationWidgetMetaData[widgetId].subModule;
 138                         widget = this.navigationWidgetMetaData[widgetId].widget;
 139
 140                         if ((widgetMainModule === mainModuleName || widgetMainModule === '*') &&
 141                                 (widgetSubModule === subModuleName || widgetSubModule === '*')
 142                         ) {
 143                                 widget.show();
 144                                 navigationWidgetActive = true;
 145                         } else {
 146                                 widget.hide();
 147                         }
 148                 }
 149
 150                 if (navigationWidgetActive) {
 151                         this.NavigationContainer.show();
 152                 } else {
 153                         this.NavigationContainer.hide();
 154                 }
 155
 156                 // append the typo3 path if it wasn't already applied
 157                 // this is important for backwards compatibility (e.g. shortcuts)
 158                 if (contentScript.indexOf(top.TS.PATH_typo3) !== 0) {
 159                         contentScript = top.TS.PATH_typo3 + contentScript;
 160                 }
 161                 Ext.get('content').set({
 162                         src: contentScript
 163                 });
 164
 165                 this.NavigationContainer.ownerCt.doLayout();
 166         },
 167
 168         /**
 169          * Adds the given widget to the navigation container. The key will be the id attribute
 170          * of the given widget.
 171          *
 172          * @param mainModule string main module or wildcard (*) for all
 173          * @param subModule string sub module or wildcard (*) for all
 174          * @param widget object ExtJS widget (e.g. an Ext.Panel); must contain an id attribute!
 175          * @return void
 176          */
 177         registerNavigationWidget: function(mainModule, subModule, widget) {
 178                         // only one instance of specific widget may be exists!
 179                 if (this.navigationWidgetMetaData[widget.id] === undefined) {
 180                         this.navigationWidgetMetaData[widget.id] = {
 181                                 mainModule: mainModule,
 182                                 subModule: subModule,
 183                                 widget: widget
 184                         };
 185
 186                                 // always take the full width and height
 187                         widget.anchor = '100% 100%';
 188                         this.NavigationContainer.add(widget);
 189                 }
 190         }
 191 });
 192
 193 Ext.reg('typo3Viewport', TYPO3.Viewport);