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