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);