roojs-bootstrap.js wip_alan_T6464_card_header
authorAlan Knowles <alan@roojs.com>
Tue, 3 Nov 2020 08:46:04 +0000 (16:46 +0800)
committerAlan Knowles <alan@roojs.com>
Tue, 3 Nov 2020 08:46:04 +0000 (16:46 +0800)
roojs-bootstrap-debug.js
Roo/bootstrap/Card.js

Roo/bootstrap/Card.js
roojs-bootstrap-debug.js
roojs-bootstrap.js

index 8826427..2cf1c9e 100644 (file)
@@ -196,7 +196,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         } else {
            cfg.cn.push({
                 tag : 'div',
-                cls : 'card-img-top d-none',
+                cls : 'card-img-top d-none' 
             });
        }
         
index ce4ffe5..83849e1 100644 (file)
@@ -1778,7 +1778,12 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
                 cls : 'card-img-top',
                 src: this.header_image // escape?
             });
-        }
+        } else {
+           cfg.cn.push({
+                tag : 'div',
+                cls : 'card-img-top d-none' 
+            });
+       }
         
         var body = {
             tag : 'div',
@@ -1838,6 +1843,16 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         return ret;
     },
     
+    getCardImageTop : function()
+    {
+        var  ret = this.el.select('.card-img-top',true).first();
+       if (ret.hasClass('d-none')) {
+           ret.removeClass('d-none');
+       }
+        
+        return ret;
+    },
+    
     getChildContainer : function()
     {
         
@@ -1894,9 +1909,9 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
 /**
  * @class Roo.bootstrap.CardHeader
  * @extends Roo.bootstrap.Element
- * Bootstrap Element class
+ * Bootstrap CardHeader class
  * @constructor
- * Create a new Element
+ * Create a new Card Header - that you can embed children into
  * @param {Object} config The config object
  */
 
@@ -1906,20 +1921,45 @@ Roo.bootstrap.CardHeader = function(config){
 
 Roo.extend(Roo.bootstrap.CardHeader, Roo.bootstrap.Element,  {
     
-    tag: 'div',
-    container_method : 'getCardHeader',
     
-    getAutoCreate : function() {
-        
-        var cfg = {
-            tag: 'div' 
-        };
-        
-        return cfg;
-    } 
+    container_method : 'getCardHeader' 
+    
+     
     
     
    
+});
+
+
+ /*
+ * - LGPL
+ *
+ * Card header - holder for the card header elements.
+ * 
+ */
+
+/**
+ * @class Roo.bootstrap.CardImageTop
+ * @extends Roo.bootstrap.Element
+ * Bootstrap CardImageTop class
+ * @constructor
+ * Create a new Card Image Top container
+ * @param {Object} config The config object
+ */
+
+Roo.bootstrap.CardImageTop = function(config){
+    Roo.bootstrap.CardImageTop.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element,  {
+    
+   
+    container_method : 'getCardImageTop' 
+    
+     
+    
+   
 });
 
  
index 204596a..5c1822a 100644 (file)
@@ -69,14 +69,16 @@ Roo.bootstrap.Card=function(A){Roo.bootstrap.Card.superclass.constructor.call(th
 var t=this;Roo.log(this.margin_bottom.length);['','top','bottom','left','right','x','y'].forEach(function(v){if((''+t['margin'+(v.length?'_':'')+v]).length){A+=' m'+(v.length?v[0]:'')+'-'+t['margin'+(v.length?'_':'')+v];}if((''+t['padding'+(v.length?'_':'')+v]).length){A+=' p'+(v.length?v[0]:'')+'-'+t['padding'+(v.length?'_':'')+v];
 }});['','xs','sm','lg','xl'].forEach(function(v){if((''+t['display'+(v.length?'_':'')+v]).length){A+=' d'+(v.length?'-':'')+v+'-'+t['margin'+(v.length?'_':'')+v]}});if(this.hidden){A+=' d-none';}return A;},getAutoCreate:function(){var A={tag:'div',cls:'card',cn:[]}
 ;if(this.weight.length&&this.weight!='light'){A.cls+=' text-white';}else{A.cls+=' text-dark';}if(this.weight.length){A.cls+=' bg-'+this.weight;}A.cls+=this.layoutCls();if(this.header.length){A.cn.push({tag:this.header_size>0?'h'+this.header_size:'div',cls:'card-header',html:this.header}
-);}else{A.cn.push({tag:'div',cls:'card-header d-none'});}if(this.header_image.length){A.cn.push({tag:'img',cls:'card-img-top',src:this.header_image});}var B={tag:'div',cls:'card-body',cn:[]};A.cn.push(B);if(this.title.length){B.cn.push({tag:'div',cls:'card-title',src:this.title}
-);}if(this.subtitle.length){B.cn.push({tag:'div',cls:'card-title',src:this.subtitle});}B.cn.push({tag:'div',cls:'roo-card-body-ctr'});if(this.html.length){B.cn.push({tag:'div',html:this.html});}if(this.footer.length){A.cn.push({tag:'div',cls:'card-footer',html:this.footer}
-);}return A;},getCardHeader:function(){var A=this.el.select('.card-header',true).first();if(A.hasClass('d-none')){A.removeClass('d-none');}return A;},getChildContainer:function(){if(!this.el){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 A=this.getEl();
-if(A){var B={source:this,copy:false,nodes:this.getEl(),records:[]};B.ddel=A.dom;Roo.log(A.getWidth());B.ddel.style.width=A.getWidth()+'px';return B;}return false;}});
+);}else{A.cn.push({tag:'div',cls:'card-header d-none'});}if(this.header_image.length){A.cn.push({tag:'img',cls:'card-img-top',src:this.header_image});}else{A.cn.push({tag:'div',cls:'card-img-top d-none'});}var B={tag:'div',cls:'card-body',cn:[]};A.cn.push(B);
+if(this.title.length){B.cn.push({tag:'div',cls:'card-title',src:this.title});}if(this.subtitle.length){B.cn.push({tag:'div',cls:'card-title',src:this.subtitle});}B.cn.push({tag:'div',cls:'roo-card-body-ctr'});if(this.html.length){B.cn.push({tag:'div',html:this.html}
+);}if(this.footer.length){A.cn.push({tag:'div',cls:'card-footer',html:this.footer});}return A;},getCardHeader:function(){var A=this.el.select('.card-header',true).first();if(A.hasClass('d-none')){A.removeClass('d-none');}return A;},getCardImageTop:function(){var A=this.el.select('.card-img-top',true).first();
+if(A.hasClass('d-none')){A.removeClass('d-none');}return A;},getChildContainer:function(){if(!this.el){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 A=this.getEl();if(A){var B={source:this,copy:false,nodes:this.getEl(),records:[]};B.ddel=A.dom;Roo.log(A.getWidth());B.ddel.style.width=A.getWidth()+'px';return B;
+}return false;}});
 // Roo/bootstrap/CardHeader.js
-Roo.bootstrap.CardHeader=function(A){Roo.bootstrap.CardHeader.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.CardHeader,Roo.bootstrap.Element,{tag:'div',container_method:'getCardHeader',getAutoCreate:function(){var A={tag:'div'};return A;}}
-);
+Roo.bootstrap.CardHeader=function(A){Roo.bootstrap.CardHeader.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.CardHeader,Roo.bootstrap.Element,{container_method:'getCardHeader'});
+// Roo/bootstrap/CardImageTop.js
+Roo.bootstrap.CardImageTop=function(A){Roo.bootstrap.CardImageTop.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.CardImageTop,Roo.bootstrap.Element,{container_method:'getCardImageTop'});
 // Roo/bootstrap/Img.js
 Roo.bootstrap.Img=function(A){Roo.bootstrap.Img.superclass.constructor.call(this,A);this.addEvents({"click":true});};Roo.extend(Roo.bootstrap.Img,Roo.bootstrap.Component,{imgResponsive:true,border:'',src:'about:blank',href:false,target:false,xsUrl:'',smUrl:'',mdUrl:'',lgUrl:'',getAutoCreate:function(){if(this.src||(!this.xsUrl&&!this.smUrl&&!this.mdUrl&&!this.lgUrl)){return this.createSingleImg();
 }var A={tag:'div',cls:'roo-image-responsive-group',cn:[]};var B=this;Roo.each(['xs','sm','md','lg'],function(C){if(!B[C+'Url']){return;}var D={tag:'img',cls:(B.imgResponsive)?'img-responsive':'',html:B.html||A.html,src:B[C+'Url']};D.cls+=' roo-image-responsive-'+C;