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