Roo/bootstrap/Card.js

[roojs1] / Roo / bootstrap / Card.js

diff --git a/Roo/bootstrap/Card.js b/Roo/bootstrap/Card.js
index 6ec778a..baa1176 100644 (file)
--- a/Roo/bootstrap/Card.js
+++ b/Roo/bootstrap/Card.js
@@ -14,6 +14,7 @@
  * @cfg {String} header_image  src url of image.
  * @cfg {String|Object} header
  * @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
+ * @cfg {Number} header_weight  (primary|secondary|success|info|warning|danger|light|dark)
  * 
  * @cfg {String} title
  * @cfg {String} subtitle
@@ -31,7 +32,7 @@
  * @cfg {String} margin_y (0|1|2|3|4|5|auto)
  *
  * @cfg {String} padding (0|1|2|3|4|5)
- * @cfg {String} padding_top (0|1|2|3|4|5)
+ * @cfg {String} padding_top (0|1|2|3|4|5)next_to_card
  * @cfg {String} padding_bottom (0|1|2|3|4|5)
  * @cfg {String} padding_left (0|1|2|3|4|5)
  * @cfg {String} padding_right (0|1|2|3|4|5)
@@ -158,7 +159,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         
         ['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) {
             if (('' + t['display' + (v.length ? '_' : '') + v]).length) {
-                cls += ' d' +  (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v]
+                cls += ' d' +  (v.length ? '-' : '') + v + '-' + t['display' + (v.length ? '_' : '') + v]
             }
         });
         
@@ -211,14 +212,14 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             cfg.cls += ' bg-' + this.weight;
         }
         
-        cfg.cls += this.layoutCls(); 
+        cfg.cls += ' ' + this.layoutCls(); 
         
         var hdr = false;
         var hdr_ctr = false;
         if (this.header.length) {
             hdr = {
                 tag : this.header_size > 0 ? 'h' + this.header_size : 'div',
-                cls : 'card-header',
+                cls : 'card-header ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
                 cn : []
             };
             cfg.cn.push(hdr);
@@ -226,7 +227,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         } else {
             hdr = {
                 tag : 'div',
-                cls : 'card-header d-none',
+                cls : 'card-header d-none ' + (this.header_weight ? 'bg-' + this.header_weight : ''),
                 cn : []
             };
             cfg.cn.push(hdr);
@@ -400,6 +401,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         this.footerEl = this.el.select('.card-footer').first();
         this.collapsableToggleEl = this.el.select('.roo-collapse-toggle');
         this.headerContainerEl = this.el.select('.roo-card-header-ctr').first();
+        this.headerEl = this.el.select('.card-header',true).first();
         
         if (this.rotated) {
             this.el.addClass('roo-card-rotated');
@@ -573,7 +575,6 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
      * accept card
      *
      * -        card.acceptCard(move_card, info.position, info.card, info.items_n);
-
      */
     acceptCard : function(move_card,  position, next_to_card )
     {
@@ -583,15 +584,16 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         
         var to_items_n = next_to_card ? this.items.indexOf(next_to_card) : 0;
         
+        move_card.parent().removeCard(move_card)
         
-        var dom = move_card.el.dom;
-        dom.parentNode.removeChild(dom);
         
+        var dom = move_card.el.dom;
+        dom.style.width = ''; // clear with - which is set by drag.
         
-        if (next_to_card !== false) {
+        if (next_to_card !== false && next_to_card !== true && next_to_card.el.dom.parentNode) {
             var cardel = next_to_card.el.dom;
             
-            if (position == 'above') {
+            if (position == 'above' ) {
                 cardel.parentNode.insertBefore(dom, cardel);
             } else if (cardel.nextSibling) {
                 cardel.parentNode.insertBefore(dom,cardel.nextSibling);
@@ -611,10 +613,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         
         // remove Card from items.
         
-        var old_parent = move_card.parent();
-        
-        old_parent.items = old_parent.items.filter(function(e) { return e != move_card });
-        
+       
         if (this.items.length) {
             var nitems = [];
             //Roo.log([info.items_n, info.position, this.items.length]);
@@ -639,7 +638,16 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         
         
     },
-    
+    removeCard : function(c)
+    {
+        this.items = this.items.filter(function(e) { return e != c });
+ 
+        var dom = c.el.dom;
+        dom.parentNode.removeChild(dom);
+        dom.style.width = ''; // clear with - which is set by drag.
+        c.parentId = false;
+        
+    },
     
     /**    Decide whether to drop above or below a View node. */
     getDropPoint : function(e, n, dd)