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