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 (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
  38  * @cfg {String} display_xs (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
  39  * @cfg {String} display_sm (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
  40  * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
  41  * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
  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_top: '',
  63     margin_bottom: '',
  64     margin_left: '',
  65     margin_right: '',
  66     margin_x: '',
  67     margin_y: '',
  68
  69     padding : '',
  70     padding_top: '',
  71     padding_bottom: '',
  72     padding_left: '',
  73     padding_right: '',
  74     padding_x: '',
  75     padding_y: '',
  76
  77     display: '',
  78     display_xs: '',
  79     display_sm: '',
  80     display_lg: '',
  81     display_xl: '',
  82
  83
  84     layoutCls : function()
  85     {
  86         var cls = '';
  87         var t = this;
  88
  89         ['', 'top', 'bottom', 'left', 'right', 'x', 'y' ].forEach(function(v) {
  90             // in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet
  91
  92             if (t['margin' + (v.length ? '_' : '') + v].length) {
  93                 cls += ' m' +  (v.length ? v[0]  : '') + '-' +  t['margin' + (v.length ? '_' : '') + v];
  94             }
  95             if (t['padding' + (v.length ? '_' : '') + v].length) {
  96                 cls += ' p' +  (v.length ? v[0]  : '') + '-' +  t['padding' + (v.length ? '_' : '') + v];
  97             }
  98         });
  99
 100         ['', 'xs', 'sm', 'lg', 'xl',   ].forEach(function(v) {
 101             if (t['display' + (v.length ? '_' : '') + v].length) {
 102                 cls += ' d' +  (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v].length
 103             }
 104         });
 105
 106         return cls;
 107     }
 108
 109        // Roo.log("Call onRender: " + this.xtype);
 110         /*  We are looking at something like this.
 111 <div class="card">
 112     <img src="..." class="card-img-top" alt="...">
 113     <div class="card-body">
 114         <h5 class="card-title">Card title</h5>
 115          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
 116
 117         >> this bit is really the body...
 118         <div> << we will ad dthis in hopefully it will not break shit.
 119
 120             <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>
 121
 122         </div> <<
 123           <a href="#" class="card-link">Card link</a>
 124
 125     </div>
 126     <div class="card-footer">
 127         <small class="text-muted">Last updated 3 mins ago</small>
 128     </div>
 129 </div>
 130          */
 131     getAutoCreate : function(){
 132
 133         var cfg = {
 134             tag : this.tag || 'div',
 135             html : '',
 136             cls : 'card'
 137         };
 138
 139         if (this.weight.length && this.weight != 'light') {
 140             cfg.cls += ' text-white'
 141         }
 142         if (this.weight.length) {
 143             cfg.cls += ' bg-' + this.weight;
 144         }
 145
 146         // margin?
 147         if (this.margin.length) {
 148             var bits = this.margin.split(" ");
 149             bits.forEach(function (b) {
 150                 cfg.cls += ' m' + (b.length == 1 ? '-' : '') + b;
 151             });
 152         }
 153         if (this.padding.length) {
 154             var bits = this.padding.split(" ");
 155             bits.forEach(function (b) {
 156                 cfg.cls += ' p' + (b.length == 1 ? '-' : '') + b;
 157             });
 158         }
 159
 160         // - this is applied by the parent..
 161         //if (this.cls) {
 162         //    cfg.cls = this.cls + '';
 163         //}
 164
 165         if (this.sticky.length) {
 166
 167             var bd = Roo.get(document.body);
 168             if (!bd.hasClass('bootstrap-sticky')) {
 169                 bd.addClass('bootstrap-sticky');
 170                 Roo.select('html',true).setStyle('height', '100%');
 171             }
 172
 173             cfg.cls += 'bootstrap-sticky-' + this.sticky;
 174         }
 175
 176
 177         if (this.well.length) {
 178             switch (this.well) {
 179                 case 'lg':
 180                 case 'sm':
 181                     cfg.cls +=' well well-' +this.well;
 182                     break;
 183                 default:
 184                     cfg.cls +=' well';
 185                     break;
 186             }
 187         }
 188
 189         if (this.hidden) {
 190             cfg.cls += ' hidden';
 191         }
 192
 193
 194         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
 195             cfg.cls +=' alert alert-' + this.alert;
 196         }
 197
 198         var body = cfg;
 199
 200         if (this.panel.length) {
 201             cfg.cls += ' panel panel-' + this.panel;
 202             cfg.cn = [];
 203             if (this.header.length) {
 204
 205                 var h = [];
 206
 207                 if(this.expandable){
 208
 209                     cfg.cls = cfg.cls + ' expandable';
 210
 211                     h.push({
 212                         tag: 'i',
 213                         cls: (this.expanded ? 'fa fa-minus' : 'fa fa-plus')
 214                     });
 215
 216                 }
 217
 218                 h.push(
 219                     {
 220                         tag: 'span',
 221                         cls : 'panel-title',
 222                         html : (this.expandable ? '&nbsp;' : '') + this.header
 223                     },
 224                     {
 225                         tag: 'span',
 226                         cls: 'panel-header-right',
 227                         html: this.rheader
 228                     }
 229                 );
 230
 231                 cfg.cn.push({
 232                     cls : 'panel-heading',
 233                     style : this.expandable ? 'cursor: pointer' : '',
 234                     cn : h
 235                 });
 236
 237             }
 238
 239             body = false;
 240             cfg.cn.push({
 241                 cls : 'panel-body' + (this.expanded ? '' : ' hide'),
 242                 html : this.html
 243             });
 244
 245
 246             if (this.footer.length) {
 247                 cfg.cn.push({
 248                     cls : 'panel-footer',
 249                     html : this.footer
 250
 251                 });
 252             }
 253
 254         }
 255
 256         if (body) {
 257             body.html = this.html || cfg.html;
 258             // prefix with the icons..
 259             if (this.fa) {
 260                 body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
 261             }
 262             if (this.icon) {
 263                 body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
 264             }
 265
 266
 267         }
 268         if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
 269             cfg.cls =  'container';
 270         }
 271
 272         return cfg;
 273     },
 274 }