1c2489d83088e24c2903fa89a6c37baba2a9bf5b
[Packages/TYPO3.CMS.git] / 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);