roojs-bootstrap.js

[roojs1] / Roo / bootstrap / Container.js

diff --git a/Roo/bootstrap/Container.js b/Roo/bootstrap/Container.js
index 41d1237..4ce6886 100644 (file)
--- a/Roo/bootstrap/Container.js
+++ b/Roo/bootstrap/Container.js
@@ -9,21 +9,25 @@
 /**
  * @class Roo.bootstrap.Container
  * @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.Component
+ * @parent builder
  * Bootstrap Container class
  * @cfg {Boolean} jumbotron is it a jumbotron element
  * @cfg {String} html content of element
  * @cfg {String} well (lg|sm|md) a well, large, small or medium.
- * @cfg {String} panel (primary|success|info|warning|danger) render as a panel.
+ * @cfg {String} panel (default|primary|success|info|warning|danger) render as panel  - type - primary/success.....
  * @cfg {String} header content of header (for panel)
  * @cfg {String} footer content of footer (for panel)
  * @cfg {String} sticky (footer|wrap|push) block to use as footer or body- needs css-bootstrap/sticky-footer.css
  * @cfg {String} tag (header|aside|section) type of HTML tag.
  * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
- * @cfg {String} fa (ban|check|...) font awesome icon
+ * @cfg {String} fa font awesome icon
  * @cfg {String} icon (info-sign|check|...) glyphicon name
  * @cfg {Boolean} hidden (true|false) hide the element
  * @cfg {Boolean} expandable (true|false) default false
+ * @cfg {Boolean} expanded (true|false) default true
  * @cfg {String} rheader contet on the right of header
+ * @cfg {Boolean} clickable (true|false) default false
 
  *     
  * @constructor
@@ -49,7 +53,14 @@ Roo.bootstrap.Container = function(config){
          * 
          * @param {Roo.bootstrap.Container} this
          */
-        "collapse" : true
+        "collapse" : true,
+        /**
+         * @event click
+         * When a element is chick
+         * @param {Roo.bootstrap.Container} this
+         * @param {Roo.EventObject} e
+         */
+        "click" : true
     });
 };
 
@@ -67,6 +78,8 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
     icon : false,
     expandable : false,
     rheader : '',
+    expanded : true,
+    clickable: false,
   
      
     getChildContainer : function() {
@@ -144,17 +157,21 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
                 var h = [];
                 
                 if(this.expandable){
+                    
+                    cfg.cls = cfg.cls + ' expandable';
+                    
                     h.push({
                         tag: 'i',
-                        cls: 'fa fa-minus'
+                        cls: (this.expanded ? 'fa fa-minus' : 'fa fa-plus') 
                     });
+                    
                 }
                 
                 h.push(
                     {
                         tag: 'span',
                         cls : 'panel-title',
-                        html : this.header
+                        html : (this.expandable ? ' ' : '') + this.header
                     },
                     {
                         tag: 'span',
@@ -165,6 +182,7 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
                 
                 cfg.cn.push({
                     cls : 'panel-heading',
+                    style : this.expandable ? 'cursor: pointer' : '',
                     cn : h
                 });
                 
@@ -172,7 +190,7 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
             
             body = false;
             cfg.cn.push({
-                cls : 'panel-body',
+                cls : 'panel-body' + (this.expanded ? '' : ' hide'),
                 html : this.html
             });
             
@@ -208,37 +226,46 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
     
     initEvents: function() 
     {
-        this.toggle = this.toggleEl();
+        if(this.expandable){
+            var headerEl = this.headerEl();
         
-        if(!this.toggle){
-            return;
+            if(headerEl){
+                headerEl.on('click', this.onToggleClick, this);
+            }
+        }
+        
+        if(this.clickable){
+            this.el.on('click', this.onClick, this);
         }
         
-        this.toggle.on('click', this.onToggleClick, this);
     },
     
     onToggleClick : function()
     {
-        var toggleEl = this.toggleEl();
+        var headerEl = this.headerEl();
         
-        if(!toggleEl){
+        if(!headerEl){
             return;
         }
         
-        if(toggleEl.hasClass('fa-minus')){
+        if(this.expanded){
             this.collapse();
             return;
         }
         
         this.expand();
-        
     },
     
     expand : function()
     {
         if(this.fireEvent('expand', this)) {
-            this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).show();
-        
+            
+            this.expanded = true;
+            
+            //this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).show();
+            
+            this.el.select('.panel-body',true).first().removeClass('hide');
+            
             var toggleEl = this.toggleEl();
 
             if(!toggleEl){
@@ -253,7 +280,11 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
     collapse : function()
     {
         if(this.fireEvent('collapse', this)) {
-            this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).hide();
+            
+            this.expanded = false;
+            
+            //this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).hide();
+            this.el.select('.panel-body',true).first().addClass('hide');
         
             var toggleEl = this.toggleEl();
 
@@ -271,7 +302,25 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
             return;
         }
         
-        return this.el.select('.panel-heading',true).first();
+        return this.el.select('.panel-heading .fa',true).first();
+    },
+    
+    headerEl : function()
+    {
+        if(!this.el || !this.panel.length || !this.header.length){
+            return;
+        }
+        
+        return this.el.select('.panel-heading',true).first()
+    },
+    
+    bodyEl : function()
+    {
+        if(!this.el || !this.panel.length){
+            return;
+        }
+        
+        return this.el.select('.panel-body',true).first()
     },
     
     titleEl : function()
@@ -315,8 +364,14 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
         }
         
         t.dom.innerHTML = v;
+    },
+    
+    onClick : function(e)
+    {
+        e.preventDefault();
+        
+        this.fireEvent('click', this, e);
     }
-   
 });
 
  
\ No newline at end of file