a5a2ea7c376af316cf14708509745dea9e60d93a
[Packages/TYPO3.CMS.git] / t3lib / js / extjs / components / pagetree / javascript / deletiondropzone.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.DeletionDropZone
30 *
31 * Deletion Drop Zone
32 *
33 * @namespace TYPO3.Components.PageTree
34 * @extends Ext.Panel
35 * @author Stefan Galinski <stefan.galinski@gmail.com>
36 */
37 TYPO3.Components.PageTree.DeletionDropZone = Ext.extend(Ext.Panel, {
38 /**
39 * Border
40 *
41 * @type {Boolean}
42 */
43 border: true,
44
45 /**
46 * Hide the drop zone initially
47 *
48 * @type {Boolean}
49 */
50 hidden: true,
51
52 /**
53 * Command Provider
54 *
55 * @cfg {Object}
56 */
57 commandProvider: null,
58
59 /**
60 * Drag and Drop Group
61 *
62 * @cfg {String}
63 */
64 ddGroup: '',
65
66 /**
67 * Main Application
68 *
69 * @cfg {TYPO3.Components.PageTree.App}
70 */
71 app: null,
72
73 /**
74 * Removed node had a previous sibling
75 *
76 * @type {Boolean}
77 */
78 isPreviousSibling: false,
79
80 /**
81 * Removed node
82 *
83 * @type {Ext.tree.TreeNode}
84 */
85 previousNode: null,
86
87 /**
88 * Click Handler for the recovery text
89 *
90 * @type {Function}
91 */
92 textClickHandler: null,
93
94 /**
95 * Amount of drops (used to prevent early hiding of the box)
96 *
97 * @type {int}
98 */
99 amountOfDrops: 0,
100
101 /**
102 * Listeners
103 *
104 * The "afterrender" event creates the drop zone
105 */
106 listeners: {
107 afterrender: {
108 fn: function() {
109 this.createDropZone();
110
111 this.getEl().on('mouseout', function(e) {
112 if (!e.within(this.getEl(), true)) {
113 this.removeClass(this.id + '-activateProxyOver');
114 if (!this.app.activeTree.shouldCopyNode) {
115 this.app.activeTree.copyHint.show();
116 }
117 }
118 }, this);
119 }
120 },
121
122 beforehide: {
123 fn: function() {
124 if (this.textClickHandler) {
125 return false;
126 }
127 }
128 }
129 },
130
131 /**
132 * Initializes the component
133 *
134 * @return {void}
135 */
136 initComponent: function() {
137 this.html = '<p><span id="' + this.id + '-icon" class="' +
138 TYPO3.Components.PageTree.Sprites.TrashCan +
139 '">&nbsp;</span><span id="' + this.id + '-text">' +
140 TYPO3.Components.PageTree.LLL.dropToRemove + '</span></p>';
141
142 TYPO3.Components.PageTree.DeletionDropZone.superclass.initComponent.apply(this, arguments);
143 },
144
145
146 /**
147 * Creates the drop zone and it's functionality
148 *
149 * @return {void}
150 */
151 createDropZone: function() {
152 (new Ext.dd.DropZone(this.getEl(), {
153 ddGroup: this.ddGroup,
154
155 notifyOver: function(ddProxy, e) {
156 ddProxy.setDragElPos(e.xy[0], e.xy[1] - 60);
157 return this.id + '-proxyOver';
158 }.createDelegate(this),
159
160 notifyEnter: function() {
161 this.addClass(this.id + '-activateProxyOver');
162 if (!this.app.activeTree.shouldCopyNode) {
163 this.app.activeTree.copyHint.hide();
164 }
165
166 return this.id + '-proxyOver';
167 }.createDelegate(this),
168
169 notifyDrop: function(ddProxy, e, n) {
170 var node = n.node;
171 if (!node) {
172 return;
173 }
174
175 var tree = node.ownerTree;
176 var nodeHasChildNodes = (node.hasChildNodes() || node.isExpandable());
177
178 var callback = null;
179 if (!top.TYPO3.configuration.inWorkspace && !nodeHasChildNodes) {
180 callback = this.setRecoverState.createDelegate(this);
181 }
182
183 if (nodeHasChildNodes) {
184 node.ownerTree.commandProvider.confirmDelete(node, tree, callback, true);
185 } else {
186 node.ownerTree.commandProvider.deleteNode(node, tree, callback);
187 }
188 }.createDelegate(this)
189 }));
190 },
191
192 /**
193 * Sets the drop zone into the recovery state
194 *
195 * @param {Ext.tree.TreeNode} node
196 * @param {TYPO3.Components.PageTree.Tree} tree
197 * @param {Boolean} succeeded
198 * @return {void}
199 */
200 setRecoverState: function(node, tree, succeeded) {
201 if (!succeeded) {
202 this.toOriginState();
203 return;
204 }
205
206 this.show();
207 this.setHeight(50);
208 this.updateIcon(TYPO3.Components.PageTree.Sprites.TrashCanRestore);
209 this.updateText(
210 node.text + '<br />' +
211 '<span class="' + this.id + '-restore">' +
212 '<span class="' + this.id + '-restoreText">' +
213 TYPO3.Components.PageTree.LLL.dropZoneElementRemoved +
214 '</span>' +
215 '</span>',
216 false
217 );
218
219 ++this.amountOfDrops;
220 (function() {
221 if (!--this.amountOfDrops) {
222 this.toOriginState();
223 }
224 }).defer(10000, this);
225
226 this.textClickHandler = this.restoreNode.createDelegate(this, [node, tree]);
227 Ext.get(this.id + '-text').on('click', this.textClickHandler);
228
229 this.isPreviousSibling = false;
230 this.previousNode = node.parentNode;
231 if (node.previousSibling) {
232 this.previousNode = node.previousSibling;
233 this.isPreviousSibling = true;
234 }
235 },
236
237 /**
238 * Updates the drop zone text label
239 *
240 * @param {String} text
241 * @param {Boolean} animate
242 * @return {void}
243 */
244 updateText: function(text, animate) {
245 animate = animate || false;
246
247 var elementText = Ext.get(this.id + '-text');
248 if (animate) {
249 elementText.animate({opacity: {to: 0}}, 1, function(elementText) {
250 elementText.update(text);
251 elementText.setStyle('opacity', 1);
252 });
253 } else {
254 elementText.update(text);
255 }
256 },
257
258 /**
259 * Updates the drop zone icon with another sprite icon
260 *
261 * @param {String} classes
262 * @return {void}
263 */
264 updateIcon: function(classes) {
265 Ext.get(this.id + '-icon').set({
266 'class': classes
267 });
268 },
269
270 /**
271 * Resets the drop zone to the initial state
272 *
273 * @param {Boolean} hide
274 * @return {void}
275 */
276 toOriginState: function(hide) {
277 if (hide !== false) {
278 hide = true;
279 }
280
281 Ext.get(this.id + '-text').un('click', this.textClickHandler);
282 this.previousNode = this.textClickHandler = null;
283 this.isPreviousSibling = false;
284
285 if (hide && !this.app.activeTree.dragZone.dragging) {
286 this.hide();
287 }
288
289 this.setHeight(35);
290 this.updateText(TYPO3.Components.PageTree.LLL.dropToRemove, false);
291 this.updateIcon(TYPO3.Components.PageTree.Sprites.TrashCan);
292 },
293
294 /**
295 * Restores the last removed node
296 *
297 * @param {Ext.tree.TreeNode} node
298 * @param {TYPO3.Components.PageTree.Tree} tree
299 * @return {void}
300 */
301 restoreNode: function(node, tree) {
302 if (this.isPreviousSibling) {
303 this.commandProvider.restoreNodeAfterDestination(node, tree, this.previousNode);
304 } else {
305 this.commandProvider.restoreNodeToFirstChildOfDestination(node, tree, this.previousNode);
306 }
307 this.setHeight(35);
308 this.updateText(TYPO3.Components.PageTree.LLL.dropZoneElementRestored);
309
310 (function() {
311 if (this.textClickHandler) {
312 this.toOriginState();
313 }
314 }).defer(3000, this);
315 }
316 });
317
318 // XTYPE Registration
319 Ext.reg('TYPO3.Components.PageTree.DeletionDropZone', TYPO3.Components.PageTree.DeletionDropZone);