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