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