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