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