[FEATURE] Allow native ExtJS3 Modules in ContentArea
authorKay Strobach <typo3@kay-strobach.de>
Mon, 19 Dec 2011 15:45:24 +0000 (16:45 +0100)
committerSteffen Ritter <info@rs-websystems.de>
Fri, 10 Feb 2012 14:04:41 +0000 (15:04 +0100)
Adds the JS basement to use ExtJS Cards in TYPO3.
Adds Api to t3lib_extMgm to add an ExtJS card
Changes xtype:modulepanel to fire events, if iframe uri has changed

Change-Id: I361ba02d09715b65165da851b28361a8bd8bca26
Resolves: #32309
Releases: 4.7
Reviewed-on: http://review.typo3.org/7395
Reviewed-by: Steffen Ritter
Tested-by: Steffen Ritter
t3lib/class.t3lib_extmgm.php
typo3/backend.php
typo3/js/extjs/backendcontentiframe.js [new file with mode: 0644]
typo3/js/extjs/iframepanel.js
typo3/js/extjs/modulepanel.js
typo3/js/extjs/viewportConfiguration.js
typo3/js/modulemenu.js

index 441426e..df906e3 100644 (file)
@@ -749,6 +749,92 @@ final class t3lib_extMgm {
        public static function allowTableOnStandardPages($table) {
                $GLOBALS['PAGES_TYPES']['default']['allowedTables'] .= ',' . $table;
        }
+       /**
+        * Adds a ExtJS module (main or sub) to the backend interface
+        * FOR USE IN ext_tables.php FILES
+        *
+        * @static
+        * @param string $extensionName
+        * @param string $mainModuleName is the main module key
+        * @param string $subModuleName is the submodule key, if blank a plain main module is generated
+        * @param string $position passed to t3lib_extMgm::addModule, see reference there
+        * @param array $moduleConfiguration icon with array keys: access, icon, labels to configure the module
+        * @throws InvalidArgumentException
+        */
+       public static function addExtJSModule($extensionName, $mainModuleName, $subModuleName = '', $position = '', array $moduleConfiguration = array()) {
+               if (empty($extensionName)) {
+                       throw new InvalidArgumentException('The extension name must not be empty', 1325938973);
+               }
+
+               $extensionKey = t3lib_div::camelCaseToLowerCaseUnderscored($extensionName);
+               $extensionName = str_replace(' ', '', ucwords(str_replace('_', ' ', $extensionName)));
+
+               $defaultModuleConfiguration = array(
+                       'access' => 'admin',
+                       'icon' => 'gfx/typo3.png',
+                       'labels' => '',
+                       'extRelPath' => t3lib_extMgm::extRelPath($extensionKey) . 'Classes/'
+               );
+
+                       // add mandatory parameter to use new pagetree
+               if ($mainModuleName === 'web') {
+                       $defaultModuleConfiguration['navigationComponentId'] = 'typo3-pagetree';
+               }
+
+               $moduleConfiguration = t3lib_div::array_merge_recursive_overrule($defaultModuleConfiguration, $moduleConfiguration);
+
+               if ((strlen($subModuleName) > 0)) {
+                       $moduleSignature = $mainModuleName . '_' . $subModuleName;
+               } else {
+                       $moduleSignature = $mainModuleName;
+               }
+
+               $moduleConfiguration['name'] = $moduleSignature;
+               $moduleConfiguration['script'] = 'extjspaneldummy.html';
+               $moduleConfiguration['extensionName'] = $extensionName;
+               $moduleConfiguration['configureModuleFunction'] = array('t3lib_extMgm', 'configureModule');
+
+               $GLOBALS['TBE_MODULES']['_configuration'][$moduleSignature] = $moduleConfiguration;
+
+               t3lib_extMgm::addModule($mainModuleName, $subModuleName, $position);
+       }
+
+       /**
+        * This method is called from t3lib_loadModules::checkMod and it replaces old conf.php.
+        *
+        * The original function for is called
+        * Tx_Extbase_Utility_Extension::configureModule, the refered function can
+        * be deprecated now
+        *
+        * @param string $moduleSignature The module name
+        * @param string $modulePath Absolute path to module (not used by Extbase currently)
+        * @return array Configuration of the module
+        */
+       public static function configureModule($moduleSignature, $modulePath) {
+               $moduleConfiguration = $GLOBALS['TBE_MODULES']['_configuration'][$moduleSignature];
+               $iconPathAndFilename = $moduleConfiguration['icon'];
+               if (substr($iconPathAndFilename, 0, 4) === 'EXT:') {
+                       list($extensionKey, $relativePath) = explode('/', substr($iconPathAndFilename, 4), 2);
+                       $iconPathAndFilename = t3lib_extMgm::extPath($extensionKey) . $relativePath;
+               }
+               // TODO: skin support
+
+               $moduleLabels = array(
+                       'tabs_images' => array(
+                               'tab' => $iconPathAndFilename,
+                       ),
+                       'labels' => array(
+                               'tablabel' => $GLOBALS['LANG']->sL($moduleConfiguration['labels'] . ':mlang_labels_tablabel'),
+                               'tabdescr' => $GLOBALS['LANG']->sL($moduleConfiguration['labels'] . ':mlang_labels_tabdescr'),
+                       ),
+                       'tabs' => array(
+                               'tab' => $GLOBALS['LANG']->sL($moduleConfiguration['labels'] . ':mlang_tabs_tab')
+                       )
+               );
+               $GLOBALS['LANG']->addModuleLabels($moduleLabels, $moduleSignature . '_');
+
+               return $moduleConfiguration;
+       }
 
        /**
         * Adds a module (main or sub) to the backend interface
index 680dc98..4409105 100644 (file)
@@ -133,6 +133,7 @@ class TYPO3backend {
                        'debugPanel'            => 'js/extjs/debugPanel.js',
                        'viewport'              => 'js/extjs/viewport.js',
                        'iframepanel'           => 'js/extjs/iframepanel.js',
+                       'backendcontentiframe'  => 'js/extjs/backendcontentiframe.js',
                        'modulepanel'           => 'js/extjs/modulepanel.js',
                        'viewportConfiguration' => 'js/extjs/viewportConfiguration.js',
                        'util'                                  => '../t3lib/js/extjs/util.js',
@@ -827,6 +828,23 @@ if(is_array($GLOBALS['TYPO3_CONF_VARS']['typo3/backend.php']['additionalBackendI
                include_once($additionalBackendItem);
        }
 }
+       // process ExtJS module js and css
+if (is_array($GLOBALS['TBE_MODULES']['_configuration'])) {
+       foreach ($GLOBALS['TBE_MODULES']['_configuration'] as $moduleConfig) {
+               if (is_array($moduleConfig['cssFiles'])) {
+                       foreach ($moduleConfig['cssFiles'] as $cssFileName => $cssFile) {
+                               $TYPO3backend->addCssFile($name, t3lib_div::getFileAbsFileName($cssFile));
+                       }
+               }
+               if (is_array($moduleConfig['jsFiles'])) {
+                       foreach ($moduleConfig['jsFiles'] as $jsFile) {
+                               $files = array(t3lib_div::getFileAbsFileName($jsFile));
+                               $files = t3lib_div::removePrefixPathFromList($files, PATH_site);
+                               $TYPO3backend->addJavascriptFile('../' . $files[0]);
+                       }
+               }
+       }
+}
 
 $TYPO3backend->render();
 
diff --git a/typo3/js/extjs/backendcontentiframe.js b/typo3/js/extjs/backendcontentiframe.js
new file mode 100644 (file)
index 0000000..a20cdd9
--- /dev/null
@@ -0,0 +1,68 @@
+/***************************************************************
+*  Copyright notice
+*
+*  (c) 2010-2011 @author Kay Strobach    <typo3@kay-strobach.de>
+*  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!
+***************************************************************/
+
+Ext.ns('TYPO3');
+
+TYPO3.backendContentIframePanel = Ext.extend(TYPO3.iframePanel ,{
+       setUrl: function(source) {
+               var card;
+               var wrapper;
+               wrapper = Ext.getCmp('typo3-contentContainerWrapper');
+               this.url = source;
+               if(wrapper) {
+                       card = Ext.getCmp('typo3-card-' + TYPO3.ModuleMenu.App.loadedModule);
+                       if((card != undefined) && (source.search('extjspaneldummy.html') > -1)) {
+                               wrapper.getLayout().setActiveItem('typo3-card-' + TYPO3.ModuleMenu.App.loadedModule);
+                               if (typeof wrapper.getComponent(('typo3-card-' + TYPO3.ModuleMenu.App.loadedModule)).setUrl === 'function') {
+                                       wrapper.getComponent(('typo3-card-' + TYPO3.ModuleMenu.App.loadedModule)).setUrl(source);
+                               }
+                       } else {
+                               wrapper.getLayout().setActiveItem(this.id);
+                               this.body.dom.src = source;
+                               this.setMask();
+                       }
+               }
+       },
+
+       getUrl: function () {
+               var wrapper;
+               var card;
+               wrapper = Ext.getCmp('typo3-contentContainerWrapper');
+
+               if(wrapper) {
+                       card = wrapper.getLayout().activeItem;
+                       if(card.id == this.id) {
+                               return this.body.dom.src;
+                       } else if(typeof card.getUrl == 'function') {
+                               return card.getUrl();
+                       } else {
+                               return this.url;
+                       }
+               }
+               ;
+       }
+});
+Ext.reg('backendContentIframePanel', TYPO3.backendContentIframePanel);
\ No newline at end of file
index ccd968a..509bdca 100644 (file)
@@ -79,13 +79,12 @@ TYPO3.iframePanel = Ext.extend(Ext.Panel, {
        },
 
        setUrl: function(source) {
-               this.setMask();
                this.body.dom.src = source;
+               this.setMask();
        },
 
        resetUrl: function() {
-               this.setMask();
-               this.body.dom.src = this.src;
+               this.setUrl(this.src);
        },
 
        getIdFromUrl: function() {
index 6e5bf55..b5214c0 100644 (file)
@@ -24,6 +24,8 @@
 *  This copyright notice MUST APPEAR in all copies of the script!
 ***************************************************************/
 
+Ext.ns('TYPO3');
+
 TYPO3.modulePanel = Ext.extend(Ext.Panel, {
        name: 'modulePanel',
        maskMessage: ' ',
@@ -40,6 +42,18 @@ TYPO3.modulePanel = Ext.extend(Ext.Panel, {
                        }
                });
                TYPO3.modulePanel.superclass.initComponent.apply(this, arguments);
+               this.addEvents('uriChanged');
+       },
+       setUrl: function(url) {
+               var paramsString;
+               var params;
+               this.url = url;
+               paramsString = url.split("?");
+               params = Ext.urlDecode(paramsString[paramsString.length - 1]);
+               this.fireEvent('uriChanged', params.id, url, params, this);
+       },
+       getUrl: function getUrl() {
+               return this.url;
        }
 });
-Ext.reg('modulePanel', TYPO3.modulePanel);
\ No newline at end of file
+Ext.reg('modulePanel', TYPO3.modulePanel);
index 7bda328..2cde96e 100644 (file)
 Ext.ns('TYPO3');
 
 /**
+ * The Cards Configuration for the BE Module Cards
+ *
+ * New items need to be appended here
+ * cards id needs to be prepended with typo3-card- the rest of the id is the
+ * be module name as passed it is normally in TYPO3
+ * Cards shouldn't be simple iframes for performance reasons
+ *
+ * @author Kay Strobach    <typo3@kay-strobach.de>
+ */
+
+TYPO3.Viewport.ContentCards = {
+               // Add a card to either the config or if already rendered to the wrapper
+       addContentCard: function(name,config) {
+               config.id = 'typo3-card-' + name;
+               if (Ext.ready) {
+                       Ext.getCmp('typo3-contentContainerWrapper').add(config);
+               } else {
+                       this.cards.push(config);
+               }
+       },
+       cards: [
+                       // add the old card to be compatible
+               {
+                       id: 'typo3-contentContainer',
+                       border: false,
+                       xtype: 'backendContentIframePanel',
+                       name: 'content'
+               }
+       ]
+};
+
+/**
  * The backend viewport configuration
  *
  * @author Stefan Galinski <stefan.galinski@gmail.com>
@@ -109,12 +141,15 @@ TYPO3.Viewport.configuration = {
                                                        width: 5
                                                },
                                                {
-                                                       id: 'typo3-contentContainer',
-                                                       region: 'center',
-                                                       anchor: '100% 100%',
+                                                       id: 'typo3-contentContainerWrapper',
                                                        border: false,
-                                                       xtype: 'iframePanel',
-                                                       name: 'content'
+                                                       layout: 'fit',
+                                                       name: 'content',
+                                                       region: 'center',
+                                                       xtype: 'panel',
+                                                       layout: 'card',
+                                                       activeItem: 0,
+                                                       items: TYPO3.Viewport.ContentCards.cards
                                                }
                                        ]
                                },
index ccaa881..7c069e1 100644 (file)
@@ -257,9 +257,10 @@ TYPO3.ModuleMenu.App = {
                                TYPO3.Backend.NavigationContainer.hide();
                                TYPO3.Backend.NavigationDummy.show();
                        }
-                       this.openInContentFrame(record.originalLink, params);
-                       this.loadedModule = mod;
+
                        this.highlightModuleMenuItem(mod);
+                       this.loadedModule = mod;
+                       this.openInContentFrame(record.originalLink, params);
 
                                // compatibility
                        top.currentSubScript = record.originalLink;
@@ -324,11 +325,14 @@ TYPO3.ModuleMenu.App = {
        },
 
        openInContentFrame: function(url, params) {
+               var urlToLoad;
                if (top.nextLoadModuleUrl) {
                        TYPO3.Backend.ContentContainer.setUrl(top.nextLoadModuleUrl);
                        top.nextLoadModuleUrl = '';
                } else {
-                       TYPO3.Backend.ContentContainer.setUrl(url + (params ? (url.indexOf('?') !== -1 ? '&' : '?') + params : ''));
+                       urlToLoad = url + (params ? (url.indexOf('?') !== -1 ? '&' : '?') + params : '')
+                       TYPO3.Backend.ContentContainer.setUrl(urlToLoad);
+                       return;
                }
        },