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