Roo/bootstrap/Card.js
authorAlan Knowles <alan@roojs.com>
Mon, 16 Nov 2020 03:31:30 +0000 (11:31 +0800)
committerAlan Knowles <alan@roojs.com>
Mon, 16 Nov 2020 03:31:30 +0000 (11:31 +0800)
roojs-bootstrap.js
roojs-bootstrap-debug.js

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

index 07f9e97..4c3705f 100644 (file)
@@ -187,7 +187,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             hdr = {
                 tag : this.header_size > 0 ? 'h' + this.header_size : 'div',
                 cls : 'card-header',
-               cn : [],
+               cn : []
             };
            cfg.cn.push(hdr);
            hdr_ctr = hdr;
@@ -196,7 +196,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
                 tag : 'div',
                 cls : 'card-header d-none',
                cn : []
-            }
+            };
            cfg.cn.push(hdr);
        }
        if (this.collapsable) {
@@ -210,7 +210,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
                    }
                   
                ]
-           }
+           };
            hdr.cn.push(hdr_ctr);
        }
        if (this.header.length) {
index 09d507d..5c28fcc 100644 (file)
@@ -2060,25 +2060,41 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         
        var hdr = false;
         if (this.header.length) {
-            hdr = cfg.cn.push({
+            hdr = {
                 tag : this.header_size > 0 ? 'h' + this.header_size : 'div',
                 cls : 'card-header',
-               cn : [],
-                html : this.header // escape?
-            });
-           
+               cn : []
+            };
+           cfg.cn.push(hdr);
+           hdr_ctr = hdr;
         } else {
-           hdr = cfg.cn.push({
+           hdr = {
                 tag : 'div',
                 cls : 'card-header d-none',
                cn : []
-            });
+            };
+           cfg.cn.push(hdr);
        }
        if (this.collapsable) {
-           hdr.cn.push({
-               tag: 'i',
-               cls : 'fa fa-chevron-down pull-right'
-           });
+           hdr_ctr = {
+               tag : 'a',
+               cls : 'd-block',
+               cn: [
+                   {
+                       tag: 'i',
+                       cls : 'fa fa-chevron-down pull-right'
+                   }
+                  
+               ]
+           };
+           hdr.cn.push(hdr_ctr);
+       }
+       if (this.header.length) {
+           hdr_ctr.cn.push(        {
+               tag: 'span',
+               cls: 'roo-card-header-ctr',
+               html : this.header
+           })
        }
        
         if (this.header_image.length) {
@@ -2099,16 +2115,16 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             cls : 'card-body',
             cn : []
         };
-       
+       var obody = body;
        if (this.collapsable) {
-           body = {
+           obody = {
                tag: 'div',
                cls : 'roo-collapsable collapse ' + (this.collapsed ? '' : 'show'),
-               cn : body
+               cn : [  body ]
            };
        }
        
-        cfg.cn.push(body);
+        cfg.cn.push(obody);
         
         if (this.title.length) {
             body.cn.push({
index 41e4667..41d8cb0 100644 (file)
@@ -82,12 +82,12 @@ return this.el.select('.panel-body',true).first()},titleEl:function(){if(!this.e
 Roo.bootstrap.Card=function(A){Roo.bootstrap.Card.superclass.constructor.call(this,A);this.addEvents({});};Roo.extend(Roo.bootstrap.Card,Roo.bootstrap.Component,{weight:'',margin:'',margin_top:'',margin_bottom:'',margin_left:'',margin_right:'',margin_x:'',margin_y:'',padding:'',padding_top:'',padding_bottom:'',padding_left:'',padding_right:'',padding_x:'',padding_y:'',display:'',display_xs:'',display_sm:'',display_lg:'',display_xl:'',header_image:'',header:'',header_size:0,title:'',subtitle:'',html:'',footer:'',collapsable:false,collapsed:false,dragable:false,drag_group:false,dropable:false,drop_group:false,childContainer:false,layoutCls:function(){var A='';
 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();var B=false;if(this.header.length){B=A.cn.push({tag:this.header_size>0?'h'+this.header_size:'div',cls:'card-header',cn:[],html:this.header}
-);}else{B=A.cn.push({tag:'div',cls:'card-header d-none',cn:[]});}if(this.collapsable){B.cn.push({tag:'i',cls:'fa fa-chevron-down pull-right'});}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 C={tag:'div',cls:'card-body',cn:[]};if(this.collapsable){C={tag:'div',cls:'roo-collapsable collapse '+(this.collapsed?'':'show'),cn:C};}A.cn.push(C);if(this.title.length){C.cn.push({tag:'div',cls:'card-title',src:this.title});}if(this.subtitle.length){C.cn.push({tag:'div',cls:'card-title',src:this.subtitle}
-);}C.cn.push({tag:'div',cls:'roo-card-body-ctr'});if(this.html.length){C.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(){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'}
+;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();var B=false;if(this.header.length){B={tag:this.header_size>0?'h'+this.header_size:'div',cls:'card-header',cn:[]}
+;A.cn.push(B);hdr_ctr=B;}else{B={tag:'div',cls:'card-header d-none',cn:[]};A.cn.push(B);}if(this.collapsable){hdr_ctr={tag:'a',cls:'d-block',cn:[{tag:'i',cls:'fa fa-chevron-down pull-right'}]};B.cn.push(hdr_ctr);}if(this.header.length){hdr_ctr.cn.push({tag:'span',cls:'roo-card-header-ctr',html:this.header}
+)}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 C={tag:'div',cls:'card-body',cn:[]};var D=C;if(this.collapsable){D={tag:'div',cls:'roo-collapsable collapse '+(this.collapsed?'':'show'),cn:[C]}
+;}A.cn.push(D);if(this.title.length){C.cn.push({tag:'div',cls:'card-title',src:this.title});}if(this.subtitle.length){C.cn.push({tag:'div',cls:'card-title',src:this.subtitle});}C.cn.push({tag:'div',cls:'roo-card-body-ctr'});if(this.html.length){C.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(){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'}
 );this.dragZone.getDragData=this.getDragData.createDelegate(this);}if(this.dropable){this.dropZone=new Roo.dd.DropZone(this.getChildContainer(),{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-body .pull-right',true).on('click',this.onToggleCollapse,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;},getTargetFromEvent:function(e){var A=e.getTarget();