X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=docs%2Fsrc%2FRoo_bootstrap_Card.js.html;h=beff5458df96ca72318bcfbadea2757e6d8e35ef;hb=aacc44f02a19b93ca6bbfef02358d4b20ad803e2;hp=7e1cce45a866ce56148bffd8673a479312eec82f;hpb=0eed9484459eb9380351c3a87474f5e3eec0df65;p=roojs1
diff --git a/docs/src/Roo_bootstrap_Card.js.html b/docs/src/Roo_bootstrap_Card.js.html
index 7e1cce45a8..beff5458df 100644
--- a/docs/src/Roo_bootstrap_Card.js.html
+++ b/docs/src/Roo_bootstrap_Card.js.html
@@ -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
@@ -70,7 +73,15 @@
* @param {Roo.EventObject} e
* @param {Roo.EventObject} data the data passed via getDragData
*/
- 'drop' : true
+ 'drop' : true,
+ 'rotate' : true
});
};
@@ -113,6 +124,8 @@
collapsable : false,
collapsed : false,
+ rotateable : false,
+ rotated : false,
dragable : false,
drag_group : false,
@@ -225,13 +238,13 @@
};
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({
@@ -248,15 +261,15 @@
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'),
- cn : [ body ]
+ tag: 'div',
+ cls : 'roo-collapsable collapse ' + (this.collapsed || this.rotated ? '' : 'show'),
+ cn : [ body ]
};
}
@@ -294,7 +307,7 @@
if (this.footer.length) {
cfg.cn.push({
- cls : 'card-footer',
+ cls : 'card-footer ' + (this.rotated ? 'd-none' : ''),
html : this.footer
});
@@ -329,9 +342,9 @@
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 +361,8 @@
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 +370,34 @@
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);
+ }
+ 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)
{
@@ -502,16 +529,22 @@
onNodeDrop : function(n, dd, e, data)
{
- 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');
var nitems = [];
Roo.log([info.items_n, info.position, this.items.length])
for (var i =0; i < this.items.length; i++) {
- if (i == info.items_n && info.position == 'before') {
+ if (i == info.items_n && info.position == 'above') {
nitems.push(data.source);
}
nitems.push(this.items[i]);
- if (i == info.items_n && info.position == 'after') {
+ if (i == info.items_n && info.position == 'below') {
nitems.push(data.source);
}
}
@@ -564,7 +597,7 @@
this.items.push(data.source);
}
-
+ data.source.parentId = this.id;
return true;
},
@@ -591,16 +624,39 @@
{
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) {
@@ -640,6 +696,10 @@
+ },
+ setHeaderText: function(html)
+ {
+ this.headerEl.dom.innerHTML = html;
}