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