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