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         // more generic support?
 107         if (this.hidden) {
 108             cls += ' d-none';
 109         }
 110
 111         return cls;
 112     },
 113
 114        // Roo.log("Call onRender: " + this.xtype);
 115         /*  We are looking at something like this.
 116 <div class="card">
 117     <img src="..." class="card-img-top" alt="...">
 118     <div class="card-body">
 119         <h5 class="card-title">Card title</h5>
 120          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
 121
 122         >> this bit is really the body...
 123         <div> << we will ad dthis in hopefully it will not break shit.
 124
 125             <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>
 126
 127         </div> <<
 128           <a href="#" class="card-link">Card link</a>
 129
 130     </div>
 131     <div class="card-footer">
 132         <small class="text-muted">Last updated 3 mins ago</small>
 133     </div>
 134 </div>
 135          */
 136     getAutoCreate : function(){
 137
 138         var cfg = {
 139             tag : this.tag || 'div',
 140             html : '',
 141             cls : 'card'
 142         };
 143
 144         if (this.weight.length && this.weight != 'light') {
 145             cfg.cls += ' text-white'
 146         }
 147         if (this.weight.length) {
 148             cfg.cls += ' bg-' + this.weight;
 149         }
 150
 151         cfg.cls += this.layoutCls();
 152
 153
 154
 155
 156         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
 157             cfg.cls +=' alert alert-' + this.alert;
 158         }
 159
 160         var body = cfg;
 161
 162         if (this.panel.length) {
 163             cfg.cls += ' panel panel-' + this.panel;
 164             cfg.cn = [];
 165             if (this.header.length) {
 166
 167                 var h = [];
 168
 169                 if(this.expandable){
 170
 171                     cfg.cls = cfg.cls + ' expandable';
 172
 173                     h.push({
 174                         tag: 'i',
 175                         cls: (this.expanded ? 'fa fa-minus' : 'fa fa-plus')
 176                     });
 177
 178                 }
 179
 180                 h.push(
 181                     {
 182                         tag: 'span',
 183                         cls : 'panel-title',
 184                         html : (this.expandable ? '&nbsp;' : '') + this.header
 185                     },
 186                     {
 187                         tag: 'span',
 188                         cls: 'panel-header-right',
 189                         html: this.rheader
 190                     }
 191                 );
 192
 193                 cfg.cn.push({
 194                     cls : 'panel-heading',
 195                     style : this.expandable ? 'cursor: pointer' : '',
 196                     cn : h
 197                 });
 198
 199             }
 200
 201             body = false;
 202             cfg.cn.push({
 203                 cls : 'panel-body' + (this.expanded ? '' : ' hide'),
 204                 html : this.html
 205             });
 206
 207
 208             if (this.footer.length) {
 209                 cfg.cn.push({
 210                     cls : 'panel-footer',
 211                     html : this.footer
 212
 213                 });
 214             }
 215
 216         }
 217
 218         if (body) {
 219             body.html = this.html || cfg.html;
 220             // prefix with the icons..
 221             if (this.fa) {
 222                 body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
 223             }
 224             if (this.icon) {
 225                 body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
 226             }
 227
 228
 229         }
 230         if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
 231             cfg.cls =  'container';
 232         }
 233
 234         return cfg;
 235     },
 236 }