roojs-bootstrap.js

roojs-bootstrap-debug.js

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index b4b2278..09d507d 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -1925,7 +1925,8 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
  * @config {Boolean} dropable  if this card can recieve other cards being dropped onto it..
  * @config {String} drop_group  group for drag
  * 
- 
+ * @config {Boolean} collapsable can the body be collapsed.
+ * @config {Boolean} collapsed is the body collapsed when rendered...
  * @constructor
  * Create a new Container
  * @param {Object} config The config object
@@ -1974,6 +1975,9 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     subtitle : '',
     html : '',
     footer: '',
+
+    collapsable : false,
+    collapsed : false,
     
     dragable : false,
     drag_group : false,
@@ -2054,18 +2058,29 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         
         cfg.cls += this.layoutCls(); 
         
+       var hdr = false;
         if (this.header.length) {
-            cfg.cn.push({
+            hdr = cfg.cn.push({
                 tag : this.header_size > 0 ? 'h' + this.header_size : 'div',
                 cls : 'card-header',
+               cn : [],
                 html : this.header // escape?
             });
+           
         } else {
-           cfg.cn.push({
+           hdr = cfg.cn.push({
                 tag : 'div',
-                cls : 'card-header d-none'
+                cls : 'card-header d-none',
+               cn : []
             });
        }
+       if (this.collapsable) {
+           hdr.cn.push({
+               tag: 'i',
+               cls : 'fa fa-chevron-down pull-right'
+           });
+       }
+       
         if (this.header_image.length) {
             cfg.cn.push({
                 tag : 'img',
@@ -2084,6 +2099,15 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             cls : 'card-body',
             cn : []
         };
+       
+       if (this.collapsable) {
+           body = {
+               tag: 'div',
+               cls : 'roo-collapsable collapse ' + (this.collapsed ? '' : 'show'),
+               cn : body
+           };
+       }
+       
         cfg.cn.push(body);
         
         if (this.title.length) {
@@ -2179,7 +2203,9 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
            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 target = this.getEl();
@@ -2296,6 +2322,20 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
        }else{
                return "below";
        }
+    },
+    onToggleCollapse : function(e)
+    {
+       if (this.collapsed) {
+           this.el.select('.roo-collapse-toggle').removeClass('collapsed');
+           this.el.select('.roo-collapse').addClass('show');
+           this.collapsed = false;
+           return;
+       }
+       this.el.select('.roo-collapse-toggle').addClass('collapsed');
+       this.el.select('.roo-collapse').removeClass('show');
+       this.collapsed = true;
+       
+       
     }
 
     

diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index b2f4c3b..41e4667 100644 (file)
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -79,22 +79,24 @@ return this.el.select('.panel-body',true).first()},titleEl:function(){if(!this.e
 },getTitle:function(){var A=this.titleEl();if(!A){return '';}return A.dom.innerHTML;},setRightTitle:function(v){var t=this.el.select('.panel-header-right',true).first();if(!t){return;}t.dom.innerHTML=v;},onClick:function(e){e.preventDefault();this.fireEvent('click',this,e);
 }});
 // Roo/bootstrap/Card.js
-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:'',dragable:false,drag_group:false,dropable:false,drop_group:false,childContainer:false,layoutCls:function(){var A='';
+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();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});}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(){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=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'}
 );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);}},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();while((A!==null)&&(A.parentNode!=this.bodyEl.dom)){A=A.parentNode;
-}var B=false;var C=[];for(var i=0;i<this.items.length;i++){if(this.items[i].xtype!='Card'){continue;}C.push(this.items[i].el.dom);if(A==this.items[i].el.dom){B=A;}}if(!B){B=C[C.length-1]||this.el.dom;}Roo.log(['getTargetFromEvent',B]);return B;},onNodeEnter:function(n,dd,e,A){return false;
-},onNodeOver:function(n,dd,e,A){var pt=this.getDropPoint(e,n,dd);if(pt){Roo.log(pt);}return false;},onNodeOut:function(n,dd,e,A){},onNodeDrop:function(n,dd,e,A){return false;if(this.fireEvent("drop",this,n,dd,e,A)===false){return false;}var pt=this.getDropPoint(e,n,dd);
-var B=(n==this.bodyEl.dom)?this.items.length:n.nodeIndex;if(pt=="below"){B++;}for(var i=0;i<this.items.length;i++){var r=this.items[i];if(dup&&(dd!=this.dragZone)){Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red",1);}else{if(A.copy){this.store.insert(B++,r.copy());
-}else{A.source.isDirtyFlag=true;r.store.remove(r);this.store.insert(B++,r);}this.isDirtyFlag=true;}}this.dragZone.cachedTarget=null;return true;},getDropPoint:function(e,n,dd){if(n==this.bodyEl.dom){return "above";}var t=Roo.lib.Dom.getY(n),b=t+n.offsetHeight;
-var c=t+(b-t)/2;var y=Roo.lib.Event.getPageY(e);if(y<=c){return "above";}else{return "below";}}});
+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();
+while((A!==null)&&(A.parentNode!=this.bodyEl.dom)){A=A.parentNode;}var B=false;var C=[];for(var i=0;i<this.items.length;i++){if(this.items[i].xtype!='Card'){continue;}C.push(this.items[i].el.dom);if(A==this.items[i].el.dom){B=A;}}if(!B){B=C[C.length-1]||this.el.dom;
+}Roo.log(['getTargetFromEvent',B]);return B;},onNodeEnter:function(n,dd,e,A){return false;},onNodeOver:function(n,dd,e,A){var pt=this.getDropPoint(e,n,dd);if(pt){Roo.log(pt);}return false;},onNodeOut:function(n,dd,e,A){},onNodeDrop:function(n,dd,e,A){return false;
+if(this.fireEvent("drop",this,n,dd,e,A)===false){return false;}var pt=this.getDropPoint(e,n,dd);var B=(n==this.bodyEl.dom)?this.items.length:n.nodeIndex;if(pt=="below"){B++;}for(var i=0;i<this.items.length;i++){var r=this.items[i];if(dup&&(dd!=this.dragZone)){Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red",1);
+}else{if(A.copy){this.store.insert(B++,r.copy());}else{A.source.isDirtyFlag=true;r.store.remove(r);this.store.insert(B++,r);}this.isDirtyFlag=true;}}this.dragZone.cachedTarget=null;return true;},getDropPoint:function(e,n,dd){if(n==this.bodyEl.dom){return "above";
+}var t=Roo.lib.Dom.getY(n),b=t+n.offsetHeight;var c=t+(b-t)/2;var y=Roo.lib.Event.getPageY(e);if(y<=c){return "above";}else{return "below";}},onToggleCollapse:function(e){if(this.collapsed){this.el.select('.roo-collapse-toggle').removeClass('collapsed');this.el.select('.roo-collapse').addClass('show');
+this.collapsed=false;return;}this.el.select('.roo-collapse-toggle').addClass('collapsed');this.el.select('.roo-collapse').removeClass('show');this.collapsed=true;}});
 // 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,{container_method:'getCardHeader'});
 // Roo/bootstrap/CardImageTop.js