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