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