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