b4 column hidden

[roojs1] / roojs-bootstrap-debug.js

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index deff70d..e470784 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -1060,7 +1060,8 @@ Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
         };
         
         var settings=this;
-        ['xs','sm','md','lg'].map(function(size){
+        var sizes =   ['xs','sm','md','lg'];
+        sizes.map(function(size ,ix){
             //Roo.log( size + ':' + settings[size]);
             
             if (settings[size+'off'] !== false) {
@@ -1072,7 +1073,13 @@ Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
             }
             
             if (!settings[size]) { // 0 = hidden
-                cfg.cls += ' hidden-' + size + ' hidden' + size + '-down';;
+                cfg.cls += ' hidden-' + size + ' hidden-' + size + '-down';
+                // bootsrap4
+                for (var i = ix; i > -1; i--) {
+                    cfg.cls +=  ' d-' + sizes[i] + '-none'; 
+                }
+                
+                
                 return;
             }
             cfg.cls += ' col-' + size + '-' + settings[size] + (
@@ -1533,6 +1540,10 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
  * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
  * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
  
+ * @config {Boolean} dragable  if this card can be dragged.
+ * @config {Boolean} drag_group  group for drag
+ * 
+ 
  * @constructor
  * Create a new Container
  * @param {Object} config The config object
@@ -1580,7 +1591,10 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     title : '',
     subtitle : '',
     html : '',
+    footer: '',
     
+    dragable : false,
+    drag_group : false,
     
     childContainer : false,
 
@@ -1588,21 +1602,21 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     {
         var cls = '';
         var t = this;
-        
+        Roo.log(this.margin_bottom.length);
         ['', 'top', 'bottom', 'left', 'right', 'x', 'y' ].forEach(function(v) {
             // in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet
             
-            if (t['margin' + (v.length ? '_' : '') + v].length) {
+            if (('' + t['margin' + (v.length ? '_' : '') + v]).length) {
                 cls += ' m' +  (v.length ? v[0]  : '') + '-' +  t['margin' + (v.length ? '_' : '') + v];
             }
-            if (t['padding' + (v.length ? '_' : '') + v].length) {
+            if (('' + t['padding' + (v.length ? '_' : '') + v]).length) {
                 cls += ' p' +  (v.length ? v[0]  : '') + '-' +  t['padding' + (v.length ? '_' : '') + v];
             }
         });
         
         ['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) {
-            if (t['display' + (v.length ? '_' : '') + v].length) {
-                cls += ' d' +  (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v].length
+            if (('' + t['display' + (v.length ? '_' : '') + v]).length) {
+                cls += ' d' +  (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v]
             }
         });
         
@@ -1647,7 +1661,9 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         };
         
         if (this.weight.length && this.weight != 'light') {
-            cfg.cls += ' text-white'
+            cfg.cls += ' text-white';
+        } else {
+            cfg.cls += ' text-dark'; // need as it's nested..
         }
         if (this.weight.length) {
             cfg.cls += ' bg-' + this.weight;
@@ -1675,7 +1691,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             cls : 'card-body',
             cn : []
         };
-        cfg.push(body);
+        cfg.cn.push(body);
         
         if (this.title.length) {
             body.cn.push({
@@ -1698,9 +1714,15 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             cls : 'roo-card-body-ctr'
         });
         
+        if (this.html.length) {
+            body.cn.push({
+                tag: 'div',
+                html : this.html
+            });
+        }
         // fixme ? handle objects?
         if (this.footer.length) {
-            body.cn.push({
+            cfg.cn.push({
                 tag : 'div',
                 cls : 'card-footer',
                 html: this.footer // escape?
@@ -1719,9 +1741,46 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             return false;
         }
         return this.el.select('.roo-card-body-ctr',true).first();    
+    },
+    
+    initEvents: function() 
+    {
+        if(this.dragable){
+             this.dragZone = new Roo.dd.DragZone(this.getEl(), {
+                    containerScroll: true,
+                    ddGroup: this.drag_group || 'default_card_drag_group'
+            });
+            this.dragZone.getDragData = this.getDragData.createDelegate(this);
+        }
+        
+        
+        
+    },
+    getDragData : function(e) {
+        var target = this.getEl();
+       if (target) {
+           //this.handleSelection(e);
+           
+            var dragData = {
+                source: this,
+                copy: false,
+                nodes: this.getEl(),
+                records: []
+            };
+            
+            
+            dragData.ddel = target.dom ;       // the div element
+            Roo.log(target.getWidth( ));
+             dragData.ddel.style.width = target.getWidth() + 'px';
+            
+            return dragData;
+        }
+        return false;
     }
     
-}/*
+});
+
+/*
  * - LGPL
  *
  * image
@@ -4459,7 +4518,7 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar,  {
         
         cn.push({
             tag: 'div',
-            cls: Roo.bootstrap.version == 4  ? 'nav flex-row roo-navbar-collapse' : 'collapse navbar-collapse roo-navbar-collapse',
+            cls: Roo.bootstrap.version == 4  ? 'nav flex-row roo-navbar-collapse collapse navbar-collapse' : 'collapse navbar-collapse roo-navbar-collapse',
             cn : []
         });
         
@@ -4509,6 +4568,13 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar,  {
         return this.getChildContainer();
     },
     
+    getChildContainer : function()
+    {
+        
+       return this.el.select('.roo-navbar-collapse',true).first();
+        
+       
+    },
     
     initEvents : function()
     {
@@ -21185,10 +21251,10 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         
         var cfg = {};
         
-        cfg.cls = 'form-group ' + this.inputType; //input-group
+        cfg.cls = 'form-group form-check ' + this.inputType; //input-group
         
         if(this.inline){
-            cfg.cls += ' ' + this.inputType + '-inline';
+            cfg.cls += ' ' + this.inputType + '-inline  form-check-inline';
         }
         
         var input =  {