Roo/bootstrap/Card.js

[roojs1] / Roo / bootstrap / Card.js

diff --git a/Roo/bootstrap/Card.js b/Roo/bootstrap/Card.js
index 726c4f2..7bf9fac 100644 (file)
--- a/Roo/bootstrap/Card.js
+++ b/Roo/bootstrap/Card.js
@@ -73,7 +73,15 @@ Roo.bootstrap.Card = function(config){
          * @param {Roo.EventObject} e
          * @param {Roo.EventObject} data  the data passed via getDragData
          */
-        'drop' : true
+        'drop' : true,
+         /**
+         * @event rotate
+         * When a element a card is rotate
+         * @param {Roo.bootstrap.Element} this
+         * @param {Roo.Element} n the node being dropped?
+         * @param {Boolean} rotate status
+         */
+        'rotate' : true
         
     });
 };
@@ -230,13 +238,13 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             };
             hdr.cn.push(hdr_ctr);
         }
-        if (this.header.length) {
-            hdr_ctr.cn.push(        {
-                tag: 'span',
-                cls: 'roo-card-header-ctr',
-                html : this.header
-            })
-        }
+        
+        hdr_ctr.cn.push(        {
+            tag: 'span',
+            cls: 'roo-card-header-ctr' + ( this.header.length ? '' : ' d-none'),
+            html : this.header
+        })
+        
         
         if (this.header_image.length) {
             cfg.cn.push({
@@ -259,9 +267,9 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         var obody = body;
         if (this.collapsable || this.rotateable) {
             obody = {
-            tag: 'div',
-            cls : 'roo-collapsable collapse ' + (this.collapsed || this.rotated ? '' : 'show'),
-            cn : [  body ]
+                tag: 'div',
+                cls : 'roo-collapsable collapse ' + (this.collapsed || this.rotated ? '' : 'show'),
+                cn : [  body ]
             };
         }
         
@@ -379,6 +387,16 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         if (this.rotateable) {
             this.el.select('.card-header',true).on('click', this.onToggleRotate, this);
         }
+        this.collapsableEl = this.el.select('.roo-collapsable').first();
+         
+        this.footerEl = this.el.select('.card-footer').first();
+        this.collapsableToggleEl = this.el.select('.roo-collapse-toggle');
+        this.headerEl = this.el.select('.roo-card-header-ctr').first();
+        
+        if (this.rotated) {
+            this.el.addClass('roo-card-rotated');
+            this.fireEvent('rotate', this, true);
+        }
         
     },
     getDragData : function(e)
@@ -579,7 +597,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             this.items.push(data.source);
         }
         
-        
+        data.source.parentId = this.id;
         
         return true;
     },
@@ -606,16 +624,39 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         {
         if (this.collapsed) {
             this.el.select('.roo-collapse-toggle').removeClass('collapsed');
-            this.el.select('.roo-collapsable').addClass('show');
+            this.collapsableEl.addClass('show');
             this.collapsed = false;
             return;
         }
         this.el.select('.roo-collapse-toggle').addClass('collapsed');
-        this.el.select('.roo-collapsable').removeClass('show');
+        this.collapsableEl.removeClass('show');
         this.collapsed = true;
         
     
     },
+    
+    onToggleRotate : function(e)
+    {
+        this.collapsableEl.removeClass('show');
+        this.footerEl.removeClass('d-none');
+        this.el.removeClass('roo-card-rotated');
+        this.el.removeClass('d-none');
+        if (this.rotated) {
+            
+            this.collapsableEl.addClass('show');
+            this.rotated = false;
+            this.fireEvent('rotate', this, this.rotated);
+            return;
+        }
+        this.el.addClass('roo-card-rotated');
+        this.footerEl.addClass('d-none');
+        this.el.select('.roo-collapsable').removeClass('show');
+        
+        this.rotated = true;
+        this.fireEvent('rotate', this, this.rotated);
+    
+    },
+    
     dropPlaceHolder: function (action, info, data)
     {
         if (this.dropEl === false) {
@@ -655,6 +696,10 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     
     
     
+    },
+    setHeaderText: function(html)
+    {
+        this.headerEl.dom.innerHTML = html;
     }