*
* @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
* @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
});
};
collapsable : false,
collapsed : false,
+ rotateable : false,
+ rotated : false,
dragable : false,
drag_group : false,
};
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({
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 ]
};
}
if (this.footer.length) {
cfg.cn.push({
- cls : 'card-footer',
+ cls : 'card-footer ' + (this.rotated ? 'd-none' : ''),
html : this.footer
});
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;
},
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'
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)
{
this.items.push(data.source);
}
-
+ data.source.parentId = this.id;
return true;
},
{
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) {
+ },
+ setHeaderText: function(html)
+ {
+ this.headerEl.dom.innerHTML = html;
}