t3lib/js/extjs/components/pagetree/javascript/app.js

   1 /***************************************************************
   2 *  Copyright notice
   3 *
   4 *  (c) 2010 TYPO3 Tree Team <http://forge.typo3.org/projects/typo3v4-extjstrees>
   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 Ext.namespace('TYPO3.Components.PageTree');
  27
  28 /**
  29  * @class TYPO3.Components.PageTree.App
  30  *
  31  * Page tree main application that controls setups the components
  32  *
  33  * @namespace TYPO3.Components.PageTree
  34  * @extends Ext.Panel
  35  * @author Stefan Galinski <stefan.galinski@gmail.com>
  36  */
  37 TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
  38         /**
  39          * Panel id
  40          *
  41          * @type {String}
  42          */
  43         id: 'typo3-pagetree',
  44
  45         /**
  46          * Border
  47          *
  48          * @type {Boolean}
  49          */
  50         border: false,
  51
  52         /**
  53          * Layout Type
  54          *
  55          * @type {String}
  56          */
  57         layout:'fit',
  58
  59         /**
  60          * Active tree
  61          *
  62          * @type {TYPO3.Components.PageTree.Tree}
  63          */
  64         activeTree: null,
  65
  66         /**
  67          * Listeners
  68          *
  69          * The afterlayout wizard relayoutes the navigation container to fix some nasty
  70          * scrollbar issues.
  71          *
  72          * @type {Object}
  73          */
  74         listeners: {
  75                 afterlayout: {
  76                         fn: function() {
  77                                 this.ownerCt.doLayout();
  78                         },
  79                         buffer: 250
  80                 }
  81         },
  82
  83         /**
  84          * Initializes the application
  85          *
  86          * Set's the necessary language labels, configuration options and sprite icons by an
  87          * external call and initializes the needed components.
  88          *
  89          * @return {void}
  90          */
  91         initComponent: function() {
  92                 TYPO3.Components.PageTree.DataProvider.loadResources(function(response) {
  93                         TYPO3.Components.PageTree.LLL = response['LLL'];
  94                         TYPO3.Components.PageTree.Configuration = response['Configuration'];
  95                         TYPO3.Components.PageTree.Sprites = response['Sprites'];
  96
  97                         var tree = this.activeTree = new TYPO3.Components.PageTree.Tree({
  98                                 id: this.id + '-tree',
  99                                 deletionDropZoneId: this.id + '-deletionDropZone',
 100                                 ddGroup: this.id,
 101                                 stateful: true,
 102                                 stateId: 'Pagetree' + TYPO3.Components.PageTree.Configuration.temporaryMountPoint,
 103                                 stateEvents: [],
 104                                 autoScroll: true,
 105                                 autoHeight: false,
 106                                 plugins: new Ext.ux.state.TreePanel(),
 107                                 commandProvider: TYPO3.Components.PageTree.Actions,
 108                                 contextMenuProvider: TYPO3.Components.PageTree.ContextMenuDataProvider,
 109                                 treeDataProvider: TYPO3.Components.PageTree.DataProvider,
 110                                 app: this,
 111                                 listeners: {
 112                                         resize: {
 113                                                 fn: function() {
 114                                                         var treeContainer = Ext.getCmp(this.id + '-treeContainer');
 115                                                         Ext.getCmp(this.id + '-filteringTree').setSize(treeContainer.getSize());
 116                                                         treeContainer.doLayout();
 117                                                 },
 118                                                 scope: this,
 119                                                 buffer: 250
 120                                         }
 121                                 }
 122                         });
 123
 124                         var filteringTree = new TYPO3.Components.PageTree.FilteringTree({
 125                                 id: this.id + '-filteringTree',
 126                                 deletionDropZoneId: this.id + '-deletionDropZone',
 127                                 ddGroup: this.id,
 128                                 autoScroll: true,
 129                                 autoHeight: false,
 130                                 commandProvider: TYPO3.Components.PageTree.Actions,
 131                                 contextMenuProvider: TYPO3.Components.PageTree.ContextMenuDataProvider,
 132                                 treeDataProvider: TYPO3.Components.PageTree.DataProvider,
 133                                 app: this
 134                         }).hide();
 135
 136                         var topPanel = new TYPO3.Components.PageTree.TopPanel({
 137                                 dataProvider: TYPO3.Components.PageTree.DataProvider,
 138                                 filteringTree: filteringTree,
 139                                 ddGroup: this.id,
 140                                 tree: tree,
 141                                 app: this
 142                         });
 143
 144                         var deletionDropZone = new TYPO3.Components.PageTree.DeletionDropZone({
 145                                 id: this.id + '-deletionDropZone',
 146                                 commandProvider: TYPO3.Components.PageTree.Actions,
 147                                 ddGroup: this.id,
 148                                 app: this,
 149                                 region: 'south',
 150                                 height: 35
 151                         });
 152
 153                         var topPanelItems = new Ext.Panel({
 154                                 id: this.id + '-topPanelItems',
 155                                 border: false,
 156                                 region: 'north',
 157                                 height: 49,
 158                                 items: [
 159                                         topPanel, {
 160                                                 border: false,
 161                                                 id: this.id + '-indicatorBar'
 162                                         }
 163                                 ]
 164                         });
 165
 166                         this.add({
 167                                 layout: 'border',
 168                                 items: [
 169                                         topPanelItems,
 170                                         {
 171                                                 border: false,
 172                                                 id: this.id + '-treeContainer',
 173                                                 region: 'center',
 174                                                 layout: 'fit',
 175                                                 items: [tree, filteringTree]
 176                                         },
 177                                         deletionDropZone
 178                                 ]
 179                         });
 180
 181                         if (TYPO3.Components.PageTree.Configuration.temporaryMountPoint) {
 182                                 topPanelItems.on('afterrender', function() {
 183                                         this.addTemporaryMountPointIndicator();
 184                                 }, this);
 185                         }
 186
 187                         if (TYPO3.Components.PageTree.Configuration.indicator !== '') {
 188                                 this.addIndicatorItems();
 189                         }
 190                 }, this);
 191
 192                 TYPO3.Components.PageTree.App.superclass.initComponent.apply(this, arguments);
 193         },
 194
 195         /**
 196          * Adds the default indicator items
 197          *
 198          * @return {void}
 199          */
 200         addIndicatorItems: function() {
 201                 this.addIndicator({
 202                         border: false,
 203                         id: this.id + '-indicatorBar-indicatorTitle',
 204                         cls: this.id + '-indicatorBar-item',
 205                         html: TYPO3.Components.PageTree.Configuration.indicator
 206                 });
 207         },
 208
 209         /**
 210          * Adds the temporary mount point indicator item
 211          *
 212          * @return {void}
 213          */
 214         addTemporaryMountPointIndicator: function() {
 215                 this.temporaryMountPointInfoIndicator = this.addIndicator({
 216                         border: false,
 217                         id: this.id + '-indicatorBar-temporaryMountPoint',
 218                         cls: this.id + '-indicatorBar-item',
 219
 220                         listeners: {
 221                                 afterrender: {
 222                                         fn: function() {
 223                                                 var element = Ext.fly(this.id + '-indicatorBar-temporaryMountPoint-clear');
 224                                                 element.on('click', function() {
 225                                                         TYPO3.BackendUserSettings.ExtDirect.unsetKey(
 226                                                                 'pageTree_temporaryMountPoint',
 227                                                                 function() {
 228                                                                         TYPO3.Components.PageTree.Configuration.temporaryMountPoint = null;
 229                                                                         this.removeIndicator(this.temporaryMountPointInfoIndicator);
 230                                                                         this.getTree().refreshTree();
 231                                                                         this.getTree().stateId = 'Pagetree';
 232                                                                 },
 233                                                                 this
 234                                                         );
 235                                                 }, this);
 236                                         },
 237                                         scope: this
 238                                 }
 239                         },
 240
 241                         html: '<p>' +
 242                                         '<span id="' + this.id + '-indicatorBar-temporaryMountPoint-info' + '" ' +
 243                                                 'class="' + this.id + '-indicatorBar-item-leftIcon ' +
 244                                                         TYPO3.Components.PageTree.Sprites.Info + '">&nbsp;' +
 245                                         '</span>' +
 246                                         '<span id="' + this.id + '-indicatorBar-temporaryMountPoint-clear' + '" ' +
 247                                                 'class="' + this.id + '-indicatorBar-item-rightIcon ' + '">X' +
 248                                         '</span>' +
 249                                         TYPO3.Components.PageTree.LLL.temporaryMountPointIndicatorInfo + '<br />' +
 250                                                 TYPO3.Components.PageTree.Configuration.temporaryMountPoint +
 251                                 '</p>'
 252                 });
 253         },
 254
 255         /**
 256          * Adds an indicator item
 257          *
 258          * @param {Object} component
 259          * @return {void}
 260          */
 261         addIndicator: function(component) {
 262                 if (component.listeners && component.listeners.afterrender) {
 263                         component.listeners.afterrender.fn = component.listeners.afterrender.fn.createSequence(
 264                                 this.afterTopPanelItemAdded, this
 265                         );
 266                 } else {
 267                         if (component.listeners) {
 268                                 component.listeners = {}
 269                         }
 270
 271                         component.listeners.afterrender = {
 272                                 fn: this.afterTopPanelItemAdded
 273                         }
 274                 }
 275
 276                 return Ext.getCmp(this.id + '-indicatorBar').add(component);
 277         },
 278
 279         /**
 280          * Recalculates the top panel items height after an indicator was added
 281          *
 282          * @param {Ext.Component} component
 283          * @return {void}
 284          */
 285         afterTopPanelItemAdded: function(component) {
 286                 var topPanelItems = Ext.getCmp(this.id + '-topPanelItems');
 287                 topPanelItems.setHeight(topPanelItems.getHeight() + component.getHeight() + 3);
 288         },
 289
 290         /**
 291          * Removes an indicator item from the indicator bar
 292          *
 293          * @param {Ext.Component} component
 294          * @return {void}
 295          */
 296         removeIndicator: function(component) {
 297                 var topPanelItems = Ext.getCmp(this.id + '-topPanelItems');
 298                 topPanelItems.setHeight(topPanelItems.getHeight() - component.getHeight() - 3);
 299                 Ext.getCmp(this.id + '-indicatorBar').remove(component);
 300         },
 301
 302         /**
 303          * Compatibility method that calls refreshTree()
 304          *
 305          * @return {void}
 306          */
 307         refresh: function() {
 308                 this.refreshTree();
 309         },
 310
 311         /**
 312          * Another compatibility method that calls refreshTree()
 313          *
 314          * @return {void}
 315          */
 316         refresh_nav: function() {
 317                 this.refreshTree();
 318         },
 319
 320         /**
 321          * Refreshes the tree and selects the node defined by fsMod.recentIds['web']
 322          *
 323          * @return {void}
 324          */
 325         refreshTree: function() {
 326                 if (!isNaN(fsMod.recentIds['web']) && fsMod.recentIds['web'] !== '') {
 327                         this.select(fsMod.recentIds['web'], true);
 328                 }
 329
 330                 TYPO3.Components.PageTree.DataProvider.getIndicators(function(response) {
 331                         var indicators = Ext.getCmp(this.id + '-indicatorBar-indicatorTitle');
 332                         if (indicators) {
 333                                 this.removeIndicator(indicators);
 334                         }
 335
 336                         if (response._COUNT > 0) {
 337                                 TYPO3.Components.PageTree.Configuration.indicator = response.html;
 338                                 this.addIndicatorItems();
 339                         }
 340                 }, this);
 341
 342                 this.activeTree.refreshTree();
 343         },
 344
 345         /**
 346          * Returns the current active tree
 347          *
 348          * @return {TYPO3.Components.PageTree.Tree}
 349          */
 350         getTree: function() {
 351                 return this.activeTree;
 352         },
 353
 354         /**
 355          * Selects a node defined by the page id. If the second parameter is set, we
 356          * store the new location into the state hash.
 357          *
 358          * @param {int} pageId
 359          * @param {Boolean} saveState
 360          * @return {Boolean}
 361          */
 362         select: function(pageId, saveState) {
 363                 if (saveState !== false) {
 364                         saveState = true;
 365                 }
 366
 367                 var tree = this.getTree();
 368                 var succeeded = false;
 369                 var node = tree.getRootNode().findChild('realId', pageId, true);
 370                 if (node) {
 371                         succeeded = true;
 372                         tree.selectPath(node.getPath());
 373                         if (!!saveState && tree.stateHash) {
 374                                 tree.stateHash.lastSelectedNode = node.id;
 375                         }
 376                 }
 377
 378                 return succeeded;
 379         },
 380
 381         /**
 382          * Returns the currently selected node
 383          *
 384          * @return {Ext.tree.TreeNode}
 385          */
 386         getSelected: function() {
 387                 var node = this.getTree().getSelectionModel().getSelectedNode();
 388                 return node ? node : null;
 389         }
 390 });
 391
 392 /**
 393  * Callback method for the module menu
 394  *
 395  * @return {TYPO3.Components.PageTree.App}
 396  */
 397 TYPO3.ModuleMenu.App.registerNavigationComponent('typo3-pagetree', function() {
 398         TYPO3.Backend.NavigationContainer.PageTree = new TYPO3.Components.PageTree.App();
 399
 400                 // compatibility code
 401     top.nav = TYPO3.Backend.NavigationContainer.PageTree;
 402     top.nav_frame = TYPO3.Backend.NavigationContainer.PageTree;
 403     top.content.nav_frame = TYPO3.Backend.NavigationContainer.PageTree;
 404
 405         return TYPO3.Backend.NavigationContainer.PageTree;
 406 });
 407
 408 // XTYPE Registration
 409 Ext.reg('TYPO3.Components.PageTree.App', TYPO3.Components.PageTree.App);