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