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