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