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         var tn = n.node;
  79         if(tn.isRoot){
  80             return tn.allowChildren !== false ? "append" : false; // always append for root
  81         }
  82         var dragEl = n.ddel;
  83         var t = Roo.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
  84         var y = Roo.lib.Event.getPageY(e);
  85         var noAppend = tn.allowChildren === false || tn.isLeaf();
  86         if(this.appendOnly || tn.parentNode.allowChildren === false){
  87             return noAppend ? false : "append";
  88         }
  89         var noBelow = false;
  90         if(!this.allowParentInsert){
  91             noBelow = tn.hasChildNodes() && tn.isExpanded();
  92         }
  93         var q = (b - t) / (noAppend ? 2 : 3);
  94         if(y >= t && y < (t + q)){
  95             return "above";
  96         }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
  97             return "below";
  98         }else{
  99             return "append";
 100         }
 101     },
 102
 103     onNodeEnter : function(n, dd, e, data){
 104         this.cancelExpand();
 105     },
 106
 107     onNodeOver : function(n, dd, e, data){
 108         var pt = this.getDropPoint(e, n, dd);
 109         var node = n.node;
 110
 111         // auto node expand check
 112         if(!this.expandProcId && pt == "append" && node.hasChildNodes() && !n.node.isExpanded()){
 113             this.queueExpand(node);
 114         }else if(pt != "append"){
 115             this.cancelExpand();
 116         }
 117
 118         // set the insert point style on the target node
 119         var returnCls = this.dropNotAllowed;
 120         if(this.isValidDropPoint(n, pt, dd, e, data)){
 121            if(pt){
 122                var el = n.ddel;
 123                var cls;
 124                if(pt == "above"){
 125                    returnCls = n.node.isFirst() ? "x-tree-drop-ok-above" : "x-tree-drop-ok-between";
 126                    cls = "x-tree-drag-insert-above";
 127                }else if(pt == "below"){
 128                    returnCls = n.node.isLast() ? "x-tree-drop-ok-below" : "x-tree-drop-ok-between";
 129                    cls = "x-tree-drag-insert-below";
 130                }else{
 131                    returnCls = "x-tree-drop-ok-append";
 132                    cls = "x-tree-drag-append";
 133                }
 134                if(this.lastInsertClass != cls){
 135                    Roo.fly(el).replaceClass(this.lastInsertClass, cls);
 136                    this.lastInsertClass = cls;
 137                }
 138            }
 139        }
 140        return returnCls;
 141     },
 142
 143     onNodeOut : function(n, dd, e, data){
 144         this.cancelExpand();
 145         this.removeDropIndicators(n);
 146     },
 147
 148     onNodeDrop : function(n, dd, e, data){
 149         var point = this.getDropPoint(e, n, dd);
 150         var targetNode = n.node;
 151         targetNode.ui.startDrop();
 152         if(!this.isValidDropPoint(n, point, dd, e, data)){
 153             targetNode.ui.endDrop();
 154             return false;
 155         }
 156         // first try to find the drop node
 157         var dropNode = data.node || (dd.getTreeNode ? dd.getTreeNode(data, targetNode, point, e) : null);
 158         var dropEvent = {
 159             tree : this.tree,
 160             target: targetNode,
 161             data: data,
 162             point: point,
 163             source: dd,
 164             rawEvent: e,
 165             dropNode: dropNode,
 166             cancel: !dropNode
 167         };
 168         var retval = this.tree.fireEvent("beforenodedrop", dropEvent);
 169         if(retval === false || dropEvent.cancel === true || !dropEvent.dropNode){
 170             targetNode.ui.endDrop();
 171             return false;
 172         }
 173         // allow target changing
 174         targetNode = dropEvent.target;
 175         if(point == "append" && !targetNode.isExpanded()){
 176             targetNode.expand(false, null, function(){
 177                 this.completeDrop(dropEvent);
 178             }.createDelegate(this));
 179         }else{
 180             this.completeDrop(dropEvent);
 181         }
 182         return true;
 183     },
 184
 185     completeDrop : function(de){
 186         var ns = de.dropNode, p = de.point, t = de.target;
 187         if(!(ns instanceof Array)){
 188             ns = [ns];
 189         }
 190         var n;
 191         for(var i = 0, len = ns.length; i < len; i++){
 192             n = ns[i];
 193             if(p == "above"){
 194                 t.parentNode.insertBefore(n, t);
 195             }else if(p == "below"){
 196                 t.parentNode.insertBefore(n, t.nextSibling);
 197             }else{
 198                 t.appendChild(n);
 199             }
 200         }
 201         n.ui.focus();
 202         if(this.tree.hlDrop){
 203             n.ui.highlight();
 204         }
 205         t.ui.endDrop();
 206         this.tree.fireEvent("nodedrop", de);
 207     },
 208
 209     afterNodeMoved : function(dd, data, e, targetNode, dropNode){
 210         if(this.tree.hlDrop){
 211             dropNode.ui.focus();
 212             dropNode.ui.highlight();
 213         }
 214         this.tree.fireEvent("nodedrop", this.tree, targetNode, data, dd, e);
 215     },
 216
 217     getTree : function(){
 218         return this.tree;
 219     },
 220
 221     removeDropIndicators : function(n){
 222         if(n && n.ddel){
 223             var el = n.ddel;
 224             Roo.fly(el).removeClass([
 225                     "x-tree-drag-insert-above",
 226                     "x-tree-drag-insert-below",
 227                     "x-tree-drag-append"]);
 228             this.lastInsertClass = "_noclass";
 229         }
 230     },
 231
 232     beforeDragDrop : function(target, e, id){
 233         this.cancelExpand();
 234         return true;
 235     },
 236
 237     afterRepair : function(data){
 238         if(data && Roo.enableFx){
 239             data.node.ui.highlight();
 240         }
 241         this.hideProxy();
 242     }
 243 });
 244
 245 }