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

   1 /*
   2  *  - LGPL
   3  *
   4  *  This is BS4's Card element.. - similar to our containers probably..
   5  *
   6  */
   7 /**
   8  * @class Roo.bootstrap.Card
   9  * @extends Roo.bootstrap.Component
  10  * Bootstrap Card class
  11  *
  12  *
  13  * possible... may not be implemented..
  14  * @cfg {String} header_image  src url of image.
  15  * @cfg {String|Object} header
  16  * @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default
  17  *
  18  * @cfg {String} title
  19  * @cfg {String} subtitle
  20  * @cfg {String|Boolean} html -- html contents - or just use children.. use false to hide it..
  21  * @cfg {String} footer
  22
  23  * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark)
  24  *
  25  * @cfg {String} margin (0|1|2|3|4|5|auto)
  26  * @cfg {String} margin_top (0|1|2|3|4|5|auto)
  27  * @cfg {String} margin_bottom (0|1|2|3|4|5|auto)
  28  * @cfg {String} margin_left (0|1|2|3|4|5|auto)
  29  * @cfg {String} margin_right (0|1|2|3|4|5|auto)
  30  * @cfg {String} margin_x (0|1|2|3|4|5|auto)
  31  * @cfg {String} margin_y (0|1|2|3|4|5|auto)
  32  *
  33  * @cfg {String} padding (0|1|2|3|4|5)
  34  * @cfg {String} padding_top (0|1|2|3|4|5)
  35  * @cfg {String} padding_bottom (0|1|2|3|4|5)
  36  * @cfg {String} padding_left (0|1|2|3|4|5)
  37  * @cfg {String} padding_right (0|1|2|3|4|5)
  38  * @cfg {String} padding_x (0|1|2|3|4|5)
  39  * @cfg {String} padding_y (0|1|2|3|4|5)
  40  *
  41  * @cfg {String} display (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
  42  * @cfg {String} display_xs (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
  43  * @cfg {String} display_sm (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
  44  * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
  45  * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
  46
  47  * @config {Boolean} dragable  if this card can be dragged.
  48  * @config {String} drag_group  group for drag
  49  * @config {Boolean} dropable  if this card can recieve other cards being dropped onto it..
  50  * @config {String} drop_group  group for drag
  51  *
  52  * @config {Boolean} collapsable can the body be collapsed.
  53  * @config {Boolean} collapsed is the body collapsed when rendered...
  54  * @config {Boolean} rotateable can the body be rotated by clicking on it..
  55  * @config {Boolean} rotated is the body rotated when rendered...
  56  *
  57  * @constructor
  58  * Create a new Container
  59  * @param {Object} config The config object
  60  */
  61
  62 Roo.bootstrap.Card = function(config){
  63     Roo.bootstrap.Card.superclass.constructor.call(this, config);
  64
  65     this.addEvents({
  66          // raw events
  67         /**
  68          * @event drop
  69          * When a element a card is dropped
  70          * @param {Roo.bootstrap.Element} this
  71          * @param {Roo.Element} n the node being dropped?
  72          * @param {Object} dd Drag and drop data
  73          * @param {Roo.EventObject} e
  74          * @param {Roo.EventObject} data  the data passed via getDragData
  75          */
  76         'drop' : true,
  77          /**
  78          * @event rotate
  79          * When a element a card is rotate
  80          * @param {Roo.bootstrap.Element} this
  81          * @param {Roo.Element} n the node being dropped?
  82          * @param {Boolean} rotate status
  83          */
  84         'rotate' : true
  85
  86     });
  87 };
  88
  89
  90 Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
  91
  92
  93     weight : '',
  94
  95     margin: '', /// may be better in component?
  96     margin_top: '',
  97     margin_bottom: '',
  98     margin_left: '',
  99     margin_right: '',
 100     margin_x: '',
 101     margin_y: '',
 102
 103     padding : '',
 104     padding_top: '',
 105     padding_bottom: '',
 106     padding_left: '',
 107     padding_right: '',
 108     padding_x: '',
 109     padding_y: '',
 110
 111     display: '',
 112     display_xs: '',
 113     display_sm: '',
 114     display_lg: '',
 115     display_xl: '',
 116
 117     header_image  : '',
 118     header : '',
 119     header_size : 0,
 120     title : '',
 121     subtitle : '',
 122     html : '',
 123     footer: '',
 124
 125     collapsable : false,
 126     collapsed : false,
 127     rotateable : false,
 128     rotated : false,
 129
 130     dragable : false,
 131     drag_group : false,
 132     dropable : false,
 133     drop_group : false,
 134     childContainer : false,
 135     dropEl : false, /// the dom placeholde element that indicates drop location.
 136
 137     layoutCls : function()
 138     {
 139         var cls = '';
 140         var t = this;
 141         Roo.log(this.margin_bottom.length);
 142         ['', 'top', 'bottom', 'left', 'right', 'x', 'y' ].forEach(function(v) {
 143             // in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet
 144
 145             if (('' + t['margin' + (v.length ? '_' : '') + v]).length) {
 146                 cls += ' m' +  (v.length ? v[0]  : '') + '-' +  t['margin' + (v.length ? '_' : '') + v];
 147             }
 148             if (('' + t['padding' + (v.length ? '_' : '') + v]).length) {
 149                 cls += ' p' +  (v.length ? v[0]  : '') + '-' +  t['padding' + (v.length ? '_' : '') + v];
 150             }
 151         });
 152
 153         ['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) {
 154             if (('' + t['display' + (v.length ? '_' : '') + v]).length) {
 155                 cls += ' d' +  (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v]
 156             }
 157         });
 158
 159         // more generic support?
 160         if (this.hidden) {
 161             cls += ' d-none';
 162         }
 163
 164         return cls;
 165     },
 166
 167        // Roo.log("Call onRender: " + this.xtype);
 168         /*  We are looking at something like this.
 169 <div class="card">
 170     <img src="..." class="card-img-top" alt="...">
 171     <div class="card-body">
 172         <h5 class="card-title">Card title</h5>
 173          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
 174
 175         >> this bit is really the body...
 176         <div> << we will ad dthis in hopefully it will not break shit.
 177
 178         ** card text does not actually have any styling...
 179
 180             <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>
 181
 182         </div> <<
 183           <a href="#" class="card-link">Card link</a>
 184
 185     </div>
 186     <div class="card-footer">
 187         <small class="text-muted">Last updated 3 mins ago</small>
 188     </div>
 189 </div>
 190          */
 191     getAutoCreate : function(){
 192
 193         var cfg = {
 194             tag : 'div',
 195             cls : 'card',
 196             cn : [ ]
 197         };
 198
 199         if (this.weight.length && this.weight != 'light') {
 200             cfg.cls += ' text-white';
 201         } else {
 202             cfg.cls += ' text-dark'; // need as it's nested..
 203         }
 204         if (this.weight.length) {
 205             cfg.cls += ' bg-' + this.weight;
 206         }
 207
 208         cfg.cls += this.layoutCls();
 209
 210         var hdr = false;
 211         var hdr_ctr = false;
 212         if (this.header.length) {
 213             hdr = {
 214                 tag : this.header_size > 0 ? 'h' + this.header_size : 'div',
 215                 cls : 'card-header',
 216                 cn : []
 217             };
 218             cfg.cn.push(hdr);
 219             hdr_ctr = hdr;
 220         } else {
 221             hdr = {
 222                 tag : 'div',
 223                 cls : 'card-header d-none',
 224                 cn : []
 225             };
 226             cfg.cn.push(hdr);
 227             hdr_ctr = hdr;
 228         }
 229         if (this.collapsable) {
 230             hdr_ctr = {
 231             tag : 'a',
 232             cls : 'd-block user-select-none',
 233             cn: [
 234                     {
 235                         tag: 'i',
 236                         cls : 'roo-collapse-toggle fa fa-chevron-down float-right ' + (this.collapsed ? 'collapsed' : '')
 237                     }
 238
 239                 ]
 240             };
 241             hdr.cn.push(hdr_ctr);
 242         }
 243
 244         hdr_ctr.cn.push(        {
 245             tag: 'span',
 246             cls: 'roo-card-header-ctr' + ( this.header.length ? '' : ' d-none'),
 247             html : this.header
 248         });
 249
 250
 251         if (this.header_image.length) {
 252             cfg.cn.push({
 253                 tag : 'img',
 254                 cls : 'card-img-top',
 255                 src: this.header_image // escape?
 256             });
 257         } else {
 258             cfg.cn.push({
 259                     tag : 'div',
 260                     cls : 'card-img-top d-none'
 261                 });
 262         }
 263
 264         var body = {
 265             tag : 'div',
 266             cls : 'card-body' + (this.html === false  ? ' d-none' : ''),
 267             cn : []
 268         };
 269         var obody = body;
 270         if (this.collapsable || this.rotateable) {
 271             obody = {
 272                 tag: 'div',
 273                 cls : 'roo-collapsable collapse ' + (this.collapsed || this.rotated ? '' : 'show'),
 274                 cn : [  body ]
 275             };
 276         }
 277
 278         cfg.cn.push(obody);
 279
 280         if (this.title.length) {
 281             body.cn.push({
 282                 tag : 'div',
 283                 cls : 'card-title',
 284                 src: this.title // escape?
 285             });
 286         }
 287
 288         if (this.subtitle.length) {
 289             body.cn.push({
 290                 tag : 'div',
 291                 cls : 'card-title',
 292                 src: this.subtitle // escape?
 293             });
 294         }
 295
 296         body.cn.push({
 297             tag : 'div',
 298             cls : 'roo-card-body-ctr'
 299         });
 300
 301         if (this.html.length) {
 302             body.cn.push({
 303                 tag: 'div',
 304                 html : this.html
 305             });
 306         }
 307         // fixme ? handle objects?
 308
 309         if (this.footer.length) {
 310
 311             cfg.cn.push({
 312                 cls : 'card-footer ' + (this.rotated ? 'd-none' : ''),
 313                 html : this.footer
 314             });
 315
 316         } else {
 317             cfg.cn.push({cls : 'card-footer d-none'});
 318         }
 319
 320         // footer...
 321
 322         return cfg;
 323     },
 324
 325
 326     getCardHeader : function()
 327     {
 328         var  ret = this.el.select('.card-header',true).first();
 329         if (ret.hasClass('d-none')) {
 330             ret.removeClass('d-none');
 331         }
 332
 333         return ret;
 334     },
 335     getCardFooter : function()
 336     {
 337         var  ret = this.el.select('.card-footer',true).first();
 338         if (ret.hasClass('d-none')) {
 339             ret.removeClass('d-none');
 340         }
 341
 342         return ret;
 343     },
 344     getCardImageTop : function()
 345     {
 346         var  ret = this.el.select('.card-img-top',true).first();
 347         if (ret.hasClass('d-none')) {
 348             ret.removeClass('d-none');
 349         }
 350
 351         return ret;
 352     },
 353
 354     getChildContainer : function()
 355     {
 356
 357         if(!this.el){
 358             return false;
 359         }
 360         return this.el.select('.roo-card-body-ctr',true).first();
 361     },
 362
 363     initEvents: function()
 364     {
 365
 366         this.bodyEl = this.getChildContainer();
 367         if(this.dragable){
 368             this.dragZone = new Roo.dd.DragZone(this.getEl(), {
 369                     containerScroll: true,
 370                     ddGroup: this.drag_group || 'default_card_drag_group'
 371             });
 372             this.dragZone.getDragData = this.getDragData.createDelegate(this);
 373         }
 374         if (this.dropable) {
 375             this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , {
 376                 containerScroll: true,
 377                 ddGroup: this.drop_group || 'default_card_drag_group'
 378             });
 379             this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
 380             this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
 381             this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
 382             this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
 383             this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
 384         }
 385
 386         if (this.collapsable) {
 387             this.el.select('.card-header',true).on('click', this.onToggleCollapse, this);
 388         }
 389         if (this.rotateable) {
 390             this.el.select('.card-header',true).on('click', this.onToggleRotate, this);
 391         }
 392         this.collapsableEl = this.el.select('.roo-collapsable').first();
 393
 394         this.footerEl = this.el.select('.card-footer').first();
 395         this.collapsableToggleEl = this.el.select('.roo-collapse-toggle');
 396         this.headerEl = this.el.select('.roo-card-header-ctr').first();
 397
 398         if (this.rotated) {
 399             this.el.addClass('roo-card-rotated');
 400             this.fireEvent('rotate', this, true);
 401         }
 402
 403     },
 404     getDragData : function(e)
 405     {
 406         var target = this.getEl();
 407         if (target) {
 408             //this.handleSelection(e);
 409
 410             var dragData = {
 411                 source: this,
 412                 copy: false,
 413                 nodes: this.getEl(),
 414                 records: []
 415             };
 416
 417
 418             dragData.ddel = target.dom ;    // the div element
 419             Roo.log(target.getWidth( ));
 420             dragData.ddel.style.width = target.getWidth() + 'px';
 421
 422             return dragData;
 423         }
 424         return false;
 425     },
 426     /**
 427     *    Part of the Roo.dd.DropZone interface. If no target node is found, the
 428     *    whole Element becomes the target, and this causes the drop gesture to append.
 429     */
 430     getTargetFromEvent : function(e, dragged_card_el)
 431     {
 432         var target = e.getTarget();
 433         while ((target !== null) && (target.parentNode != this.bodyEl.dom)) {
 434             target = target.parentNode;
 435         }
 436
 437         var ret = {
 438             position: '',
 439             cards : [],
 440             card_n : -1,
 441             items_n : -1,
 442             card : false
 443         };
 444
 445         //Roo.log([ 'target' , target ? target.id : '--nothing--']);
 446         // see if target is one of the 'cards'...
 447
 448
 449         //Roo.log(this.items.length);
 450         var pos = false;
 451
 452         var last_card_n = 0;
 453         var cards_len  = 0;
 454         for (var i = 0;i< this.items.length;i++) {
 455
 456             if (!this.items[i].el.hasClass('card')) {
 457                  continue;
 458             }
 459             pos = this.getDropPoint(e, this.items[i].el.dom);
 460
 461             cards_len = ret.cards.length;
 462             //Roo.log(this.items[i].el.dom.id);
 463             ret.cards.push(this.items[i]);
 464             last_card_n  = i;
 465             if (ret.card_n < 0 && pos == 'above') {
 466                 ret.position = cards_len > 0 ? 'below' : pos;
 467                 ret.items_n = i > 0 ? i - 1 : 0;
 468                 ret.card_n  = cards_len  > 0 ? cards_len - 1 : 0;
 469                 ret.card = ret.cards[ret.card_n];
 470             }
 471         }
 472         if (!ret.cards.length) {
 473             ret.card = true;
 474             ret.position = 'below';
 475             ret.items_n;
 476             return ret;
 477         }
 478         // could not find a card.. stick it at the end..
 479         if (ret.card_n < 0) {
 480             ret.card_n = last_card_n;
 481             ret.card = ret.cards[last_card_n];
 482             ret.items_n = this.items.indexOf(ret.cards[last_card_n]);
 483             ret.position = 'below';
 484         }
 485
 486         if (this.items[ret.items_n].el == dragged_card_el) {
 487             return false;
 488         }
 489
 490         if (ret.position == 'below') {
 491             var card_after = ret.card_n+1 == ret.cards.length ? false : ret.cards[ret.card_n+1];
 492
 493             if (card_after  && card_after.el == dragged_card_el) {
 494                 return false;
 495             }
 496             return ret;
 497         }
 498
 499         // its's after ..
 500         var card_before = ret.card_n > 0 ? ret.cards[ret.card_n-1] : false;
 501
 502         if (card_before  && card_before.el == dragged_card_el) {
 503             return false;
 504         }
 505
 506         return ret;
 507     },
 508
 509     onNodeEnter : function(n, dd, e, data){
 510         return false;
 511     },
 512     onNodeOver : function(n, dd, e, data)
 513     {
 514
 515         var target_info = this.getTargetFromEvent(e,data.source.el);
 516         if (target_info === false) {
 517             this.dropPlaceHolder('hide');
 518             return false;
 519         }
 520         Roo.log(['getTargetFromEvent', target_info ]);
 521
 522
 523         this.dropPlaceHolder('show', target_info,data);
 524
 525         return false;
 526     },
 527     onNodeOut : function(n, dd, e, data){
 528         this.dropPlaceHolder('hide');
 529
 530     },
 531     onNodeDrop : function(n, dd, e, data)
 532     {
 533
 534         // call drop - return false if
 535
 536         // this could actually fail - if the Network drops..
 537         // we will ignore this at present..- client should probably reload
 538         // the whole set of cards if stuff like that fails.
 539
 540
 541         var info = this.getTargetFromEvent(e,data.source.el);
 542         if (info === false) {
 543             return false;
 544         }
 545
 546         if (this.fireEvent("drop", this, n, dd, e, data) === false) {
 547             return false;
 548         }
 549
 550         this.dropPlaceHolder('hide');
 551
 552         // do the dom manipulation first..
 553         var dom = data.source.el.dom;
 554         dom.parentNode.removeChild(dom);
 555
 556
 557         if (info.card !== true) {
 558             var cardel = info.card.el.dom;
 559
 560             if (info.position == 'above') {
 561                 cardel.parentNode.insertBefore(dom, cardel);
 562             } else if (cardel.nextSibling) {
 563                 cardel.parentNode.insertBefore(dom,cardel.nextSibling);
 564             } else {
 565                 cardel.parentNode.append(dom);
 566             }
 567         } else {
 568             // card container???
 569             this.bodyEl.dom.append(dom);
 570         }
 571
 572         //FIXME HANDLE card = true
 573
 574         // add this to the correct place in items.
 575
 576
 577
 578         // remove Card from items.
 579
 580         var old_parent = data.source.parent();
 581
 582         old_parent.items = old_parent.items.filter(function(e) { return e != data.source });
 583
 584         if (this.items.length) {
 585             var nitems = [];
 586             //Roo.log([info.items_n, info.position, this.items.length]);
 587             for (var i =0; i < this.items.length; i++) {
 588                 if (i == info.items_n && info.position == 'above') {
 589                     nitems.push(data.source);
 590                 }
 591                 nitems.push(this.items[i]);
 592                 if (i == info.items_n && info.position == 'below') {
 593                     nitems.push(data.source);
 594                 }
 595             }
 596             this.items = nitems;
 597             Roo.log(this.items);
 598         } else {
 599             this.items.push(data.source);
 600         }
 601
 602         data.source.parentId = this.id;
 603
 604         return true;
 605     },
 606
 607     /**    Decide whether to drop above or below a View node. */
 608     getDropPoint : function(e, n, dd)
 609     {
 610         if (dd) {
 611              return false;
 612         }
 613         if (n == this.bodyEl.dom) {
 614             return "above";
 615         }
 616         var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
 617         var c = t + (b - t) / 2;
 618         var y = Roo.lib.Event.getPageY(e);
 619         if(y <= c) {
 620             return "above";
 621         }else{
 622             return "below";
 623         }
 624     },
 625     onToggleCollapse : function(e)
 626         {
 627         if (this.collapsed) {
 628             this.el.select('.roo-collapse-toggle').removeClass('collapsed');
 629             this.collapsableEl.addClass('show');
 630             this.collapsed = false;
 631             return;
 632         }
 633         this.el.select('.roo-collapse-toggle').addClass('collapsed');
 634         this.collapsableEl.removeClass('show');
 635         this.collapsed = true;
 636
 637
 638     },
 639
 640     onToggleRotate : function(e)
 641     {
 642         this.collapsableEl.removeClass('show');
 643         this.footerEl.removeClass('d-none');
 644         this.el.removeClass('roo-card-rotated');
 645         this.el.removeClass('d-none');
 646         if (this.rotated) {
 647
 648             this.collapsableEl.addClass('show');
 649             this.rotated = false;
 650             this.fireEvent('rotate', this, this.rotated);
 651             return;
 652         }
 653         this.el.addClass('roo-card-rotated');
 654         this.footerEl.addClass('d-none');
 655         this.el.select('.roo-collapsable').removeClass('show');
 656
 657         this.rotated = true;
 658         this.fireEvent('rotate', this, this.rotated);
 659
 660     },
 661
 662     dropPlaceHolder: function (action, info, data)
 663     {
 664         if (this.dropEl === false) {
 665             this.dropEl = Roo.DomHelper.append(this.bodyEl, {
 666             cls : 'd-none'
 667             },true);
 668         }
 669         this.dropEl.removeClass(['d-none', 'd-block']);
 670         if (action == 'hide') {
 671
 672             this.dropEl.addClass('d-none');
 673             return;
 674         }
 675         // FIXME - info.card == true!!!
 676         this.dropEl.dom.parentNode.removeChild(this.dropEl.dom);
 677
 678         if (info.card !== true) {
 679             var cardel = info.card.el.dom;
 680
 681             if (info.position == 'above') {
 682                 cardel.parentNode.insertBefore(this.dropEl.dom, cardel);
 683             } else if (cardel.nextSibling) {
 684                 cardel.parentNode.insertBefore(this.dropEl.dom,cardel.nextSibling);
 685             } else {
 686                 cardel.parentNode.append(this.dropEl.dom);
 687             }
 688         } else {
 689             // card container???
 690             this.bodyEl.dom.append(this.dropEl.dom);
 691         }
 692
 693         this.dropEl.addClass('d-block roo-card-dropzone');
 694
 695         this.dropEl.setHeight( Roo.get(data.ddel).getHeight() );
 696
 697
 698
 699
 700
 701     },
 702     setHeaderText: function(html)
 703     {
 704         this.headerEl.dom.innerHTML = html;
 705     }
 706
 707
 708 });
 709