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