git.roojs.org Git - roojs1/blob - Roo/tree/TreeDropZone.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 if(Roo.dd.DropZone){
  13
  14 Roo.tree.TreeDropZone = function(tree, config){
  15     this.allowParentInsert = false;
  16     this.allowContainerDrop = false;
  17     this.appendOnly = false;
  18     Roo.tree.TreeDropZone.superclass.constructor.call(this, tree.innerCt, config);
  19     this.tree = tree;
  20     this.lastInsertClass = "x-tree-no-status";
  21     this.dragOverData = {};
  22 };
  23
  24 Roo.extend(Roo.tree.TreeDropZone, Roo.dd.DropZone, {
  25     ddGroup : "TreeDD",
  26
  27     expandDelay : 1000,
  28
  29     expandNode : function(node){
  30         if(node.hasChildNodes() && !node.isExpanded()){
  31             node.expand(false, null, this.triggerCacheRefresh.createDelegate(this));
  32         }
  33     },
  34
  35     queueExpand : function(node){
  36         this.expandProcId = this.expandNode.defer(this.expandDelay, this, [node]);
  37     },
  38
  39     cancelExpand : function(){
  40         if(this.expandProcId){
  41             clearTimeout(this.expandProcId);
  42             this.expandProcId = false;
  43         }
  44     },
  45
  46     isValidDropPoint : function(n, pt, dd, e, data){
  47         if(!n || !data){ return false; }
  48         var targetNode = n.node;
  49         var dropNode = data.node;
  50         // default drop rules
  51         if(!(targetNode && targetNode.isTarget && pt)){
  52             return false;
  53         }
  54         if(pt == "append" && targetNode.allowChildren === false){
  55             return false;
  56         }
  57         if((pt == "above" || pt == "below") && (targetNode.parentNode && targetNode.parentNode.allowChildren === false)){
  58             return false;
  59         }
  60         if(dropNode && (targetNode == dropNode || dropNode.contains(targetNode))){
  61             return false;
  62         }
  63         // reuse the object
  64         var overEvent = this.dragOverData;
  65         overEvent.tree = this.tree;
  66         overEvent.target = targetNode;
  67         overEvent.data = data;
  68         overEvent.point = pt;
  69         overEvent.source = dd;
  70         overEvent.rawEvent = e;
  71         overEvent.dropNode = dropNode;
  72         overEvent.cancel = false;
  73         var result = this.tree.fireEvent("nodedragover", overEvent);
  74         return overEvent.cancel === false && result !== false;
  75     },
  76
  77     getDropPoint : function(e, n, dd)
  78     {
  79         var tn = n.node;
  80         if(tn.isRoot){
  81             return tn.allowChildren !== false ? "append" : false; // always append for root
  82         }
  83         var dragEl = n.ddel;
  84         var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
  85         var y = Roo.lib.Event.getPageY(e);
  86         //var noAppend = tn.allowChildren === false || tn.isLeaf();
  87
  88         // we may drop nodes anywhere, as long as allowChildren has not been set to false..
  89         var noAppend = tn.allowChildren === false;
  90         if(this.appendOnly || tn.parentNode.allowChildren === false){
  91             return noAppend ? false : "append";
  92         }
  93         var noBelow = false;
  94         if(!this.allowParentInsert){
  95             noBelow = tn.hasChildNodes() && tn.isExpanded();
  96         }
  97         var q = (b - t) / (noAppend ? 2 : 3);
  98         if(y >= t && y < (t + q)){
  99             return "above";
 100         }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
 101             return "below";
 102         }else{
 103             return "append";
 104         }
 105     },
 106
 107     onNodeEnter : function(n, dd, e, data)
 108     {
 109         this.cancelExpand();
 110     },
 111
 112     onNodeOver : function(n, dd, e, data)
 113     {
 114         var pt = this.getDropPoint(e, n, dd);
 115         var node = n.node;
 116
 117         // auto node expand check
 118         if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
 119             this.queueExpand(node);
 120         }else if(pt != "append"){
 121             this.cancelExpand();
 122         }
 123
 124         // set the insert point style on the target node
 125         var returnCls = this.dropNotAllowed;
 126         if(this.isValidDropPoint(n, pt, dd, e, data)){
 127            if(pt){
 128                var el = n.ddel;
 129                var cls;
 130                if(pt == "above"){
 131                    returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
 132                    cls = "x-tree-drag-insert-above";
 133                }else if(pt == "below"){
 134                    returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
 135                    cls = "x-tree-drag-insert-below";
 136                }else{
 137                    returnCls = "x-tree-drop-ok-append";
 138                    cls = "x-tree-drag-append";
 139                }
 140                if(this.lastInsertClass != cls){
 141                    Roo.fly(el).replaceClass(this.lastInsertClass, cls);
 142                    this.lastInsertClass = cls;
 143                }
 144            }
 145        }
 146        return returnCls;
 147     },
 148
 149     onNodeOut : function(n, dd, e, data){
 150
 151         this.cancelExpand();
 152         this.removeDropIndicators(n);
 153     },
 154
 155     onNodeDrop : function(n, dd, e, data){
 156         var point = this.getDropPoint(e, n, dd);
 157         var targetNode = n.node;
 158         targetNode.ui.startDrop();
 159         if(!this.isValidDropPoint(n, point, dd, e, data)){
 160             targetNode.ui.endDrop();
 161             return false;
 162         }
 163         // first try to find the drop node
 164         var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
 165         var dropEvent = {
 166             tree : this.tree,
 167             target: targetNode,
 168             data: data,
 169             point: point,
 170             source: dd,
 171             rawEvent: e,
 172             dropNode: dropNode,
 173             cancel: !dropNode
 174         };
 175         var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
 176         if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
 177             targetNode.ui.endDrop();
 178             return false;
 179         }
 180         // allow target changing
 181         targetNode = dropEvent.target;
 182         if(point == "append" && !targetNode.isExpanded()){
 183             targetNode.expand(false, null, function(){
 184                 this.completeDrop(dropEvent);
 185             }.createDelegate(this));
 186         }else{
 187             this.completeDrop(dropEvent);
 188         }
 189         return true;
 190     },
 191
 192     completeDrop : function(de){
 193         var ns = de.dropNode, p = de.point, t = de.target;
 194         if(!(ns instanceof Array)){
 195             ns = [ns];
 196         }
 197         var n;
 198         for(var i = 0, len = ns.length; i < len; i++){
 199             n = ns[i];
 200             if(p == "above"){
 201                 t.parentNode.insertBefore(n, t);
 202             }else if(p == "below"){
 203                 t.parentNode.insertBefore(n, t.nextSibling);
 204             }else{
 205                 t.appendChild(n);
 206             }
 207         }
 208         n.ui.focus();
 209         if(this.tree.hlDrop){
 210             n.ui.highlight();
 211         }
 212         t.ui.endDrop();
 213         this.tree.fireEvent("nodedrop", de);
 214     },
 215
 216     afterNodeMoved : function(dd, data, e, targetNode, dropNode){
 217         if(this.tree.hlDrop){
 218             dropNode.ui.focus();
 219             dropNode.ui.highlight();
 220         }
 221         this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
 222     },
 223
 224     getTree : function(){
 225         return this.tree;
 226     },
 227
 228     removeDropIndicators : function(n){
 229         if(n && n.ddel){
 230             var el = n.ddel;
 231             Roo.fly(el).removeClass([
 232                     "x-tree-drag-insert-above",
 233                     "x-tree-drag-insert-below",
 234                     "x-tree-drag-append"]);
 235             this.lastInsertClass = "_noclass";
 236         }
 237     },
 238
 239     beforeDragDrop : function(target, e, id){
 240         this.cancelExpand();
 241         return true;
 242     },
 243
 244     afterRepair : function(data){
 245         if(data && Roo.enableFx){
 246             data.node.ui.highlight();
 247         }
 248         this.hideProxy();
 249     }
 250 });
 251
 252 }