Roo/bootstrap/Card.js

[roojs1] / Roo / bootstrap / Card.js

diff --git a/Roo/bootstrap/Card.js b/Roo/bootstrap/Card.js
index d524710..726c4f2 100644 (file)
--- a/Roo/bootstrap/Card.js
+++ b/Roo/bootstrap/Card.js
@@ -17,7 +17,7 @@
  * 
  * @cfg {String} title
  * @cfg {String} subtitle
- * @cfg {String} html -- html contents - or just use children..
+ * @cfg {String|Boolean} html -- html contents - or just use children.. use false to hide it..
  * @cfg {String} footer
  
  * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark)
@@ -51,6 +51,9 @@
  * 
  * @config {Boolean} collapsable can the body be collapsed.
  * @config {Boolean} collapsed is the body collapsed when rendered...
+ * @config {Boolean} rotateable can the body be rotated by clicking on it..
+ * @config {Boolean} rotated is the body rotated when rendered...
+ * 
  * @constructor
  * Create a new Container
  * @param {Object} config The config object
@@ -113,6 +116,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
 
     collapsable : false,
     collapsed : false,
+    rotateable : false,
+    rotated : false,
     
     dragable : false,
     drag_group : false,
@@ -248,14 +253,14 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             
         var body = {
             tag : 'div',
-            cls : 'card-body',
+            cls : 'card-body' + (this.html === false  ? ' d-none' : ''),
             cn : []
         };
         var obody = body;
-        if (this.collapsable) {
+        if (this.collapsable || this.rotateable) {
             obody = {
             tag: 'div',
-            cls : 'roo-collapsable collapse ' + (this.collapsed ? '' : 'show'),
+            cls : 'roo-collapsable collapse ' + (this.collapsed || this.rotated ? '' : 'show'),
             cn : [  body ]
             };
         }
@@ -268,7 +273,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
                 cls : 'card-title',
                 src: this.title // escape?
             });
-        }
+        }  
         
         if (this.subtitle.length) {
             body.cn.push({
@@ -294,7 +299,7 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         if (this.footer.length) {
            
             cfg.cn.push({
-                cls : 'card-footer',
+                cls : 'card-footer ' + (this.rotated ? 'd-none' : ''),
                 html : this.footer
             });
             
@@ -329,10 +334,10 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     getCardImageTop : function()
     {
         var  ret = this.el.select('.card-img-top',true).first();
-    if (ret.hasClass('d-none')) {
-        ret.removeClass('d-none');
-    }
-        
+        if (ret.hasClass('d-none')) {
+            ret.removeClass('d-none');
+        }
+            
         return ret;
     },
     
@@ -348,8 +353,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     initEvents: function() 
     {
         
-    this.bodyEl = this.getChildContainer();
-    if(this.dragable){
+        this.bodyEl = this.getChildContainer();
+        if(this.dragable){
             this.dragZone = new Roo.dd.DragZone(this.getEl(), {
                     containerScroll: true,
                     ddGroup: this.drag_group || 'default_card_drag_group'
@@ -357,20 +362,24 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
             this.dragZone.getDragData = this.getDragData.createDelegate(this);
         }
         if (this.dropable) {
-        this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , {
-            containerScroll: true,
-            ddGroup: this.drop_group || 'default_card_drag_group'
-        });
-        this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
-        this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
-        this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
-        this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
-        this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
-    }
+            this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , {
+                containerScroll: true,
+                ddGroup: this.drop_group || 'default_card_drag_group'
+            });
+            this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
+            this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
+            this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
+            this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
+            this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
+        }
         
         if (this.collapsable) {
-        this.el.select('.card-header',true).on('click', this.onToggleCollapse, this);
-    }
+            this.el.select('.card-header',true).on('click', this.onToggleCollapse, this);
+        }
+        if (this.rotateable) {
+            this.el.select('.card-header',true).on('click', this.onToggleRotate, this);
+        }
+        
     },
     getDragData : function(e)
     {
@@ -507,14 +516,16 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
         // this could actually fail - if the Network drops..
         // we will ignore this at present..- client should probably reload
         // the whole set of cards if stuff like that fails.
-        if (this.fireEvent("drop", this, n, dd, e, data) === false) {
-            return false;
-        }
+        
         
         var info = this.getTargetFromEvent(e,data.source.el);
         if (info === false) {
             return false;
         }
+        
+        if (this.fireEvent("drop", this, n, dd, e, data) === false) {
+            return false;
+        }
          
         this.dropPlaceHolder('hide');