git.roojs.org Git - roojs1/blob - Roo/bootstrap/Card.js

   1 /*
   2  * This is BS4's Card element.. - similar to our containers probably..
   3  *
   4  */
   5 /**
   6  * @class Roo.bootstrap.Card
   7  * @extends Roo.bootstrap.Component
   8  * Bootstrap Card class
   9  *
  10  *
  11  * possible... may not be implemented..
  12  * @cfg {String} header content of header (for panel)
  13  * @cfg {String|Object} title
  14  * @cfg {String|Object} subtitle
  15  * @cfg {String|Object} body
  16  * @cfg {String|Object} footer
  17  * @cfg {Array} - links
  18  *
  19  * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark)
  20  *
  21  * @cfg {String} margin (0|1|2|3|4|5|auto)
  22  * @cfg {String} margin_top (0|1|2|3|4|5|auto)
  23  * @cfg {String} margin_bottom (0|1|2|3|4|5|auto)
  24  * @cfg {String} margin_left (0|1|2|3|4|5|auto)
  25  * @cfg {String} margin_right (0|1|2|3|4|5|auto)
  26  * @cfg {String} margin_x (0|1|2|3|4|5|auto)
  27  * @cfg {String} margin_y (0|1|2|3|4|5|auto)
  28  *
  29  * @cfg {String} padding (0|1|2|3|4|5)
  30  * @cfg {String} padding_top (0|1|2|3|4|5)
  31  * @cfg {String} padding_bottom (0|1|2|3|4|5)
  32  * @cfg {String} padding_left (0|1|2|3|4|5)
  33  * @cfg {String} padding_right (0|1|2|3|4|5)
  34  * @cfg {String} padding_x (0|1|2|3|4|5)
  35  * @cfg {String} padding_y (0|1|2|3|4|5)
  36  *
  37  * @cfg {String} display (block|none)
  38  * @cfg {String} display_xs (block|none)
  39  * @cfg {String} display_sm (block|none)
  40  * @cfg {String} display_lg (block|none)
  41  * @cfg {String} display_xl (block|none)
  42
  43  * @constructor
  44  * Create a new Container
  45  * @param {Object} config The config object
  46  */
  47
  48 Roo.bootstrap.Card = function(config){
  49     Roo.bootstrap.Card.superclass.constructor.call(this, config);
  50
  51     this.addEvents({
  52
  53     });
  54 };
  55
  56
  57 Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
  58
  59     weight : '',
  60
  61     margin: '', /// may be better in component?
  62     margin_xs: '',
  63     margin_sm: '',
  64     margin_lg: '',
  65     margin_xl: '',
  66     margin_x: '',
  67     margin_y: '',
  68
  69     padding : '',
  70     padding_xs: '',
  71     padding_sm: '',
  72     padding_lg: '',
  73     padding_xl: '',
  74     padding_x: '',
  75     padding_y: '',
  76
  77     display: '',
  78     display_xs: '',
  79     display_sm: '',
  80     display_lg: '',
  81     display_xl: '',
  82
  83
  84        // Roo.log("Call onRender: " + this.xtype);
  85         /*  We are looking at something like this.
  86 <div class="card">
  87     <img src="..." class="card-img-top" alt="...">
  88     <div class="card-body">
  89         <h5 class="card-title">Card title</h5>
  90          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
  91
  92         >> this bit is really the body...
  93         <div> << we will ad dthis in hopefully it will not break shit.
  94
  95             <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  96
  97         </div> <<
  98           <a href="#" class="card-link">Card link</a>
  99
 100     </div>
 101     <div class="card-footer">
 102         <small class="text-muted">Last updated 3 mins ago</small>
 103     </div>
 104 </div>
 105          */
 106     getAutoCreate : function(){
 107
 108         var cfg = {
 109             tag : this.tag || 'div',
 110             html : '',
 111             cls : 'card'
 112         };
 113
 114         if (this.weight.length && this.weight != 'light') {
 115             cfg.cls += ' text-white'
 116         }
 117         if (this.weight.length) {
 118             cfg.cls += ' bg-' + this.weight;
 119         }
 120
 121         // margin?
 122         if (this.margin.length) {
 123             var bits = this.margin.split(" ");
 124             bits.forEach(function (b) {
 125                 cfg.cls += ' m' + (b.length == 1 ? '-' : '') + b;
 126             });
 127         }
 128         if (this.padding.length) {
 129             var bits = this.padding.split(" ");
 130             bits.forEach(function (b) {
 131                 cfg.cls += ' p' + (b.length == 1 ? '-' : '') + b;
 132             });
 133         }
 134
 135         // - this is applied by the parent..
 136         //if (this.cls) {
 137         //    cfg.cls = this.cls + '';
 138         //}
 139
 140         if (this.sticky.length) {
 141
 142             var bd = Roo.get(document.body);
 143             if (!bd.hasClass('bootstrap-sticky')) {
 144                 bd.addClass('bootstrap-sticky');
 145                 Roo.select('html',true).setStyle('height', '100%');
 146             }
 147
 148             cfg.cls += 'bootstrap-sticky-' + this.sticky;
 149         }
 150
 151
 152         if (this.well.length) {
 153             switch (this.well) {
 154                 case 'lg':
 155                 case 'sm':
 156                     cfg.cls +=' well well-' +this.well;
 157                     break;
 158                 default:
 159                     cfg.cls +=' well';
 160                     break;
 161             }
 162         }
 163
 164         if (this.hidden) {
 165             cfg.cls += ' hidden';
 166         }
 167
 168
 169         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
 170             cfg.cls +=' alert alert-' + this.alert;
 171         }
 172
 173         var body = cfg;
 174
 175         if (this.panel.length) {
 176             cfg.cls += ' panel panel-' + this.panel;
 177             cfg.cn = [];
 178             if (this.header.length) {
 179
 180                 var h = [];
 181
 182                 if(this.expandable){
 183
 184                     cfg.cls = cfg.cls + ' expandable';
 185
 186                     h.push({
 187                         tag: 'i',
 188                         cls: (this.expanded ? 'fa fa-minus' : 'fa fa-plus')
 189                     });
 190
 191                 }
 192
 193                 h.push(
 194                     {
 195                         tag: 'span',
 196                         cls : 'panel-title',
 197                         html : (this.expandable ? '&nbsp;' : '') + this.header
 198                     },
 199                     {
 200                         tag: 'span',
 201                         cls: 'panel-header-right',
 202                         html: this.rheader
 203                     }
 204                 );
 205
 206                 cfg.cn.push({
 207                     cls : 'panel-heading',
 208                     style : this.expandable ? 'cursor: pointer' : '',
 209                     cn : h
 210                 });
 211
 212             }
 213
 214             body = false;
 215             cfg.cn.push({
 216                 cls : 'panel-body' + (this.expanded ? '' : ' hide'),
 217                 html : this.html
 218             });
 219
 220
 221             if (this.footer.length) {
 222                 cfg.cn.push({
 223                     cls : 'panel-footer',
 224                     html : this.footer
 225
 226                 });
 227             }
 228
 229         }
 230
 231         if (body) {
 232             body.html = this.html || cfg.html;
 233             // prefix with the icons..
 234             if (this.fa) {
 235                 body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
 236             }
 237             if (this.icon) {
 238                 body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
 239             }
 240
 241
 242         }
 243         if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
 244             cfg.cls =  'container';
 245         }
 246
 247         return cfg;
 248     },
 249 }