Roo/bootstrap/Card.js

[roojs1] / Roo / bootstrap / Card.js

diff --git a/Roo/bootstrap/Card.js b/Roo/bootstrap/Card.js
index 132180a..1cf3967 100644 (file)
--- a/Roo/bootstrap/Card.js
+++ b/Roo/bootstrap/Card.js
@@ -17,7 +17,7 @@
  * 
  * @cfg {String} title
  * @cfg {String} subtitle
- * @cfg {String} html -- html contents - or just use children..
+ * @cfg {String|Boolean} html -- html contents - or just use children.. use false to hide it..
  * @cfg {String} footer
  
  * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark)
@@ -248,7 +248,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             
         var body = {
             tag : 'div',
-            cls : 'card-body',
+            cls : 'card-body' + (this.body === false  ? ' d-none' : ''),
             cn : []
         };
         var obody = body;
@@ -268,7 +268,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
                 cls : 'card-title',
                 src: this.title // escape?
             });
-        }
+        }  
         
         if (this.subtitle.length) {
             body.cn.push({
@@ -442,7 +442,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         }
         if (!ret.cards.length) {
             ret.card = true;
-            ret.position = below;
+            ret.position = 'below';
             ret.items_n;
             return ret;
         }
@@ -451,7 +451,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             ret.card_n = last_card_n;
             ret.card = ret.cards[last_card_n];
             ret.items_n = this.items.indexOf(ret.cards[last_card_n]);
-            cpos = 'below';
+            ret.position = 'below';
         }
         
         if (this.items[ret.items_n].el == dragged_card_el) {
@@ -502,24 +502,76 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     onNodeDrop : function(n, dd, e, data)
     {
         
-        // call drop - return false if  
-        if (this.fireEvent("drop", this, n, dd, e, data) === false) {
+        // call drop - return false if
+        
+        // this could actually fail - if the Network drops..
+        // we will ignore this at present..- client should probably reload
+        // the whole set of cards if stuff like that fails.
+        
+        
+        var info = this.getTargetFromEvent(e,data.source.el);
+        if (info === false) {
             return false;
         }
         
-        var target_info = this.getTargetFromEvent(e,data.source.el);
-        if (target_info === false) {
+        if (this.fireEvent("drop", this, n, dd, e, data) === false) {
             return false;
         }
          
         this.dropPlaceHolder('hide');
         
-        // remove Card from items.
+        // do the dom manipulation first..
+        var dom = data.source.el.dom;
+        dom.parentNode.removeChild(dom);
+        
+        
+        if (info.card !== true) {
+            var cardel = info.card.el.dom;
+            
+            if (info.position == 'above') {
+                cardel.parentNode.insertBefore(dom, cardel);
+            } else if (cardel.nextSibling) {
+                cardel.parentNode.insertBefore(dom,cardel.nextSibling);
+            } else {
+                cardel.parentNode.append(dom);
+            }
+        } else {
+            // card container???
+            this.bodyEl.dom.append(dom);
+        }
         
+        //FIXME HANDLE card = true 
         
         // add this to the correct place in items.
         
         
+        
+        // remove Card from items.
+        
+        var old_parent = data.source.parent();
+        
+        old_parent.items = old_parent.items.filter(function(e) { return e != data.source });
+        
+        if (this.items.length) {
+            var nitems = [];
+            Roo.log([info.items_n, info.position, this.items.length])
+            for (var i =0; i < this.items.length; i++) {
+                if (i == info.items_n && info.position == 'above') {
+                    nitems.push(data.source);
+                }
+                nitems.push(this.items[i]);
+                if (i == info.items_n && info.position == 'below') {
+                    nitems.push(data.source);
+                }
+            }
+            this.items = nitems;
+            Roo.log(this.items);
+        } else {
+            this.items.push(data.source);
+        }
+        
+        
+        
         return true;
     },
     
@@ -568,16 +620,24 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             this.dropEl.addClass('d-none');
             return;
         }
-        var cardel = info.card.el.dom;
-        
+        // FIXME - info.card == true!!!
         this.dropEl.dom.parentNode.removeChild(this.dropEl.dom);
-        if (info.position == 'above') {
-            cardel.parentNode.insertBefore(this.dropEl.dom, cardel);
-        } else if (cardel.nextSibling) {
-            cardel.parentNode.insertBefore(this.dropEl.dom,cardel.nextSibling);
+        
+        if (info.card !== true) {
+            var cardel = info.card.el.dom;
+            
+            if (info.position == 'above') {
+                cardel.parentNode.insertBefore(this.dropEl.dom, cardel);
+            } else if (cardel.nextSibling) {
+                cardel.parentNode.insertBefore(this.dropEl.dom,cardel.nextSibling);
+            } else {
+                cardel.parentNode.append(this.dropEl.dom);
+            }
         } else {
-            cardel.parentNode.append(this.dropEl.dom);
+            // card container???
+            this.bodyEl.dom.append(this.dropEl.dom);
         }
+        
         this.dropEl.addClass('d-block roo-card-dropzone');
         
         this.dropEl.setHeight( Roo.get(data.ddel).getHeight() );