Fix #6673 - mobile cards issues

[roojs1] / Roo / bootstrap / Card.js

diff --git a/Roo/bootstrap/Card.js b/Roo/bootstrap/Card.js
index 47c575a..58c24ac 100644 (file)
--- a/Roo/bootstrap/Card.js
+++ b/Roo/bootstrap/Card.js
@@ -80,12 +80,19 @@ Roo.bootstrap.Card = function(config){
          /**
          * @event rotate
          * When a element a card is rotate
-         * @param {Roo.bootstrap.Element} this
+         * @param {Roo.bootstrap.Card} this
          * @param {Roo.Element} n the node being dropped?
          * @param {Boolean} rotate status
          */
-        'rotate' : true
-        
+        'rotate' : true,
+        /**
+         * @event cardover
+         * When a card element is dragged over ready to drop (return false to block dropable)
+         * @param {Roo.bootstrap.Card} this
+         * @param {Object} data from dragdrop 
+         */
+         'cardover' : true
+         
     });
 };
 
@@ -140,6 +147,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     bodyEl: false, // card-body
     headerContainerEl : false, //
     headerEl : false,
+    header_imageEl : false,
     
     layoutCls : function()
     {
@@ -350,7 +358,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     },
     getCardImageTop : function()
     {
-        var  ret = this.el.select('.card-img-top',true).first();
+        var  ret = this.header_imageEl;
         if (ret.hasClass('d-none')) {
             ret.removeClass('d-none');
         }
@@ -407,6 +415,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             this.el.addClass('roo-card-rotated');
             this.fireEvent('rotate', this, true);
         }
+        this.header_imageEl = this.el.select('.card-img-top',true).first(); 
+        this.header_imageEl.on('load', this.onHeaderImageLoad, this );
         
     },
     getDragData : function(e)
@@ -434,6 +444,17 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     /**
     *    Part of the Roo.dd.DropZone interface. If no target node is found, the
     *    whole Element becomes the target, and this causes the drop gesture to append.
+    *
+    *    Returns an object:
+    *     {
+           
+           position : 'below' or 'above'
+           card  : relateive to card OBJECT (or true for no cards listed)
+           items_n : relative to nth item in list
+           card_n : relative to  nth card in list
+    }
+    *
+    *    
     */
     getTargetFromEvent : function(e, dragged_card_el)
     {
@@ -527,7 +548,11 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         }
         Roo.log(['getTargetFromEvent', target_info ]);
         
-         
+        
+        if (this.fireEvent('cardover', this, [ data ]) === false) {
+            return false;
+        }
+        
         this.dropPlaceHolder('show', target_info,data);
         
         return false; 
@@ -552,9 +577,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         }
         this.dropPlaceHolder('hide');
   
-         
-    
-    
+          
     
         this.acceptCard(data.source, info.position, info.card, info.items_n);
         return true;
@@ -748,6 +771,27 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         if (this.headerContainerEl) {
             this.headerContainerEl.dom.innerHTML = html;
         }
+    },
+    onHeaderImageLoad : function(ev, he)
+    {
+        if (!this.header_image_fit_square) {
+            return;
+        }
+        
+        var hw = he.naturalHeight / he.naturalWidth;
+        // wide image = < 0
+        // tall image = > 1
+        //var w = he.dom.naturalWidth;
+        var ww = he.width;
+        he.style.left =  0;
+        he.style.position =  'relative';
+        if (hw > 1) {
+            var nw = (ww * (1/hw));
+            Roo.get(he).setSize( ww * (1/hw),  ww);
+            he.style.left =  ((ww - nw)/ 2) + 'px';
+            he.style.position =  'relative';
+        }
+
     }