Roo/bootstrap/Card.js
[roojs1] / Roo / bootstrap / Card.js
index 18aa435..618505e 100644 (file)
@@ -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)
@@ -113,6 +113,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
 
     collapsable : false,
     collapsed : false,
+    rotateable : false,
+    rotated : false,
     
     dragable : false,
     drag_group : false,
@@ -248,7 +250,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             
         var body = {
             tag : 'div',
-            cls : 'card-body',
+            cls : 'card-body' + (this.html === false  ? ' d-none' : ''),
             cn : []
         };
         var obody = body;
@@ -268,7 +270,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
                 cls : 'card-title',
                 src: this.title // escape?
             });
-        }
+        }  
         
         if (this.subtitle.length) {
             body.cn.push({
@@ -329,10 +331,10 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     getCardImageTop : function()
     {
         var  ret = this.el.select('.card-img-top',true).first();
-    if (ret.hasClass('d-none')) {
-        ret.removeClass('d-none');
-    }
-        
+        if (ret.hasClass('d-none')) {
+            ret.removeClass('d-none');
+        }
+            
         return ret;
     },
     
@@ -348,8 +350,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     initEvents: function() 
     {
         
-    this.bodyEl = this.getChildContainer();
-    if(this.dragable){
+        this.bodyEl = this.getChildContainer();
+        if(this.dragable){
             this.dragZone = new Roo.dd.DragZone(this.getEl(), {
                     containerScroll: true,
                     ddGroup: this.drag_group || 'default_card_drag_group'
@@ -357,20 +359,24 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             this.dragZone.getDragData = this.getDragData.createDelegate(this);
         }
         if (this.dropable) {
-        this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , {
-            containerScroll: true,
-            ddGroup: this.drop_group || 'default_card_drag_group'
-        });
-        this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
-        this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
-        this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
-        this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
-        this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
-    }
+            this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , {
+                containerScroll: true,
+                ddGroup: this.drop_group || 'default_card_drag_group'
+            });
+            this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
+            this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
+            this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
+            this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
+            this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
+        }
         
         if (this.collapsable) {
-        this.el.select('.card-header',true).on('click', this.onToggleCollapse, this);
-    }
+            this.el.select('.card-header',true).on('click', this.onToggleCollapse, this);
+        }
+        if (this.rotateable) {
+            this.el.select('.card-header',true).on('click', this.onToggleRotate, this);
+        }
+        
     },
     getDragData : function(e)
     {
@@ -451,7 +457,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,15 +508,21 @@ 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) {
-            return 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;
         }
+        
+        if (this.fireEvent("drop", this, n, dd, e, data) === false) {
+            return false;
+        }
          
         this.dropPlaceHolder('hide');
         
@@ -548,12 +560,13 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         
         if (this.items.length) {
             var nitems = [];
-            for (var i =0; i < this.items; i++) {
-                if (i == info.item_n && info.position == 'before') {
+            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.item_n && info.position == 'after') {
+                if (i == info.items_n && info.position == 'below') {
                     nitems.push(data.source);
                 }
             }