git.roojs.org Git - roojs1/blob - Roo/bootstrap/Container.js

   1 /*
   2  * - LGPL
   3  *
   4  * page container.
   5  *
   6  */
   7
   8
   9 /**
  10  * @class Roo.bootstrap.Container
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap Container class
  13  * @cfg {Boolean} jumbotron is it a jumbotron element
  14  * @cfg {String} html content of element
  15  * @cfg {String} well (lg|sm|md) a well, large, small or medium.
  16  * @cfg {String} panel (primary|success|info|warning|danger) render as a panel.
  17  * @cfg {String} header content of header (for panel)
  18  * @cfg {String} footer content of footer (for panel)
  19  * @cfg {String} sticky (footer|wrap|push) block to use as footer or body- needs css-bootstrap/sticky-footer.css
  20  * @cfg {String} tag (header|aside|section) type of HTML tag.
  21  * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
  22  * @cfg {String} fa (ban|check|...) font awesome icon
  23  * @cfg {String} icon (info-sign|check|...) glyphicon name
  24  * @cfg {Boolean} hidden (true|false) hide the element
  25  * @cfg {Boolean} expandable (true|false) default false
  26  * @cfg {String} rheader contet on the right of header
  27
  28  *
  29  * @constructor
  30  * Create a new Container
  31  * @param {Object} config The config object
  32  */
  33
  34 Roo.bootstrap.Container = function(config){
  35     Roo.bootstrap.Container.superclass.constructor.call(this, config);
  36
  37     this.addEvents({
  38         // raw events
  39          /**
  40          * @event expand
  41          * After the panel has been expand
  42          *
  43          * @param {Roo.bootstrap.Container} this
  44          */
  45         "expand" : true,
  46         /**
  47          * @event collapse
  48          * After the panel has been collapsed
  49          *
  50          * @param {Roo.bootstrap.Container} this
  51          */
  52         "collapse" : true
  53     });
  54 };
  55
  56 Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
  57
  58     jumbotron : false,
  59     well: '',
  60     panel : '',
  61     header: '',
  62     footer : '',
  63     sticky: '',
  64     tag : false,
  65     alert : false,
  66     fa: false,
  67     icon : false,
  68     expandable : false,
  69     rheader : '',
  70     expanded : true,
  71
  72
  73     getChildContainer : function() {
  74
  75         if(!this.el){
  76             return false;
  77         }
  78
  79         if (this.panel.length) {
  80             return this.el.select('.panel-body',true).first();
  81         }
  82
  83         return this.el;
  84     },
  85
  86
  87     getAutoCreate : function(){
  88
  89         var cfg = {
  90             tag : this.tag || 'div',
  91             html : '',
  92             cls : ''
  93         };
  94         if (this.jumbotron) {
  95             cfg.cls = 'jumbotron';
  96         }
  97
  98
  99
 100         // - this is applied by the parent..
 101         //if (this.cls) {
 102         //    cfg.cls = this.cls + '';
 103         //}
 104
 105         if (this.sticky.length) {
 106
 107             var bd = Roo.get(document.body);
 108             if (!bd.hasClass('bootstrap-sticky')) {
 109                 bd.addClass('bootstrap-sticky');
 110                 Roo.select('html',true).setStyle('height', '100%');
 111             }
 112
 113             cfg.cls += 'bootstrap-sticky-' + this.sticky;
 114         }
 115
 116
 117         if (this.well.length) {
 118             switch (this.well) {
 119                 case 'lg':
 120                 case 'sm':
 121                     cfg.cls +=' well well-' +this.well;
 122                     break;
 123                 default:
 124                     cfg.cls +=' well';
 125                     break;
 126             }
 127         }
 128
 129         if (this.hidden) {
 130             cfg.cls += ' hidden';
 131         }
 132
 133
 134         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
 135             cfg.cls +=' alert alert-' + this.alert;
 136         }
 137
 138         var body = cfg;
 139
 140         if (this.panel.length) {
 141             cfg.cls += ' panel panel-' + this.panel;
 142             cfg.cn = [];
 143             if (this.header.length) {
 144
 145                 var h = [];
 146
 147                 if(this.expandable){
 148                     h.push({
 149                         tag: 'i',
 150                         cls: 'fa fa-minus'
 151                     });
 152                 }
 153
 154                 h.push(
 155                     {
 156                         tag: 'span',
 157                         cls : 'panel-title',
 158                         html : this.header
 159                     },
 160                     {
 161                         tag: 'span',
 162                         cls: 'panel-header-right',
 163                         html: this.rheader
 164                     }
 165                 );
 166
 167                 cfg.cn.push({
 168                     cls : 'panel-heading',
 169                     cn : h
 170                 });
 171
 172             }
 173
 174             body = false;
 175             cfg.cn.push({
 176                 cls : 'panel-body',
 177                 html : this.html
 178             });
 179
 180
 181             if (this.footer.length) {
 182                 cfg.cn.push({
 183                     cls : 'panel-footer',
 184                     html : this.footer
 185
 186                 });
 187             }
 188
 189         }
 190
 191         if (body) {
 192             body.html = this.html || cfg.html;
 193             // prefix with the icons..
 194             if (this.fa) {
 195                 body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
 196             }
 197             if (this.icon) {
 198                 body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
 199             }
 200
 201
 202         }
 203         if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
 204             cfg.cls =  'container';
 205         }
 206
 207         return cfg;
 208     },
 209
 210     initEvents: function()
 211     {
 212         if(!this.expandable){
 213             return;
 214         }
 215
 216         var headerEl = this.headerEl();
 217
 218         if(!headerEl){
 219             return;
 220         }
 221
 222         headerEl.on('click', this.onToggleClick, this);
 223
 224     },
 225
 226     onToggleClick : function()
 227     {
 228         var headerEl = this.headerEl();
 229
 230         if(!headerEl){
 231             return;
 232         }
 233
 234         if(this.expanded){
 235             this.collapse();
 236             return;
 237         }
 238
 239         this.expand();
 240
 241     },
 242
 243     expand : function()
 244     {
 245         if(this.fireEvent('expand', this)) {
 246             this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).show();
 247
 248             var toggleEl = this.toggleEl();
 249
 250             if(!toggleEl){
 251                 return;
 252             }
 253
 254             toggleEl.removeClass(['fa-minus', 'fa-plus']).addClass(['fa-minus']);
 255         }
 256
 257     },
 258
 259     collapse : function()
 260     {
 261         if(this.fireEvent('collapse', this)) {
 262             this.el.select('.panel-body',true).first().setVisibilityMode(Roo.Element.DISPLAY).hide();
 263
 264             var toggleEl = this.toggleEl();
 265
 266             if(!toggleEl){
 267                 return;
 268             }
 269
 270             toggleEl.removeClass(['fa-minus', 'fa-plus']).addClass(['fa-plus']);
 271         }
 272     },
 273
 274     toggleEl : function()
 275     {
 276         if(!this.el || !this.panel.length || !this.header.length || !this.expandable){
 277             return;
 278         }
 279
 280         return this.el.select('.panel-heading .fa',true).first();
 281     },
 282
 283     headerEl : function()
 284     {
 285         if(!this.el || !this.panel.length || !this.header.length){
 286             return;
 287         }
 288
 289         return this.el.select('.panel-heading',true).first()
 290     }
 291
 292     titleEl : function()
 293     {
 294         if(!this.el || !this.panel.length || !this.header.length){
 295             return;
 296         }
 297
 298         return this.el.select('.panel-title',true).first();
 299     },
 300
 301     setTitle : function(v)
 302     {
 303         var titleEl = this.titleEl();
 304
 305         if(!titleEl){
 306             return;
 307         }
 308
 309         titleEl.dom.innerHTML = v;
 310     },
 311
 312     getTitle : function()
 313     {
 314
 315         var titleEl = this.titleEl();
 316
 317         if(!titleEl){
 318             return '';
 319         }
 320
 321         return titleEl.dom.innerHTML;
 322     },
 323
 324     setRightTitle : function(v)
 325     {
 326         var t = this.el.select('.panel-header-right',true).first();
 327
 328         if(!t){
 329             return;
 330         }
 331
 332         t.dom.innerHTML = v;
 333     }
 334
 335 });
 336
 337