*
* @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)
*
* @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
collapsable : false,
collapsed : false,
+ rotateable : false,
+ rotated : false,
dragable : false,
drag_group : false,
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 ]
};
}
cls : 'card-title',
src: this.title // escape?
});
- }
+ }
if (this.subtitle.length) {
body.cn.push({
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();
+
},
getDragData : function(e)
{
}
if (!ret.cards.length) {
ret.card = true;
- ret.position = below;
+ ret.position = 'below';
ret.items_n;
return ret;
}
ret.card_n = last_card_n;
ret.card = ret.cards[last_card_n];
ret.items_n = this.items.indexOf(ret.cards[last_card_n]);
- cpos = 'below';
+ ret.position = 'below';
}
if (this.items[ret.items_n].el == dragged_card_el) {
onNodeDrop : function(n, dd, e, data)
{
- // call drop - return false if
- if (this.fireEvent("drop", this, n, dd, e, data) === false) {
+ // call drop - return false if
+
+ // 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.
+
+
+ var info = this.getTargetFromEvent(e,data.source.el);
+ if (info === false) {
return false;
}
- var target_info = this.getTargetFromEvent(e,data.source.el);
- if (target_info === false) {
+ if (this.fireEvent("drop", this, n, dd, e, data) === false) {
return false;
}
dom.parentNode.removeChild(dom);
+ if (info.card !== true) {
+ var cardel = info.card.el.dom;
+
+ if (info.position == 'above') {
+ cardel.parentNode.insertBefore(dom, cardel);
+ } else if (cardel.nextSibling) {
+ cardel.parentNode.insertBefore(dom,cardel.nextSibling);
+ } else {
+ cardel.parentNode.append(dom);
+ }
+ } else {
+ // card container???
+ this.bodyEl.dom.append(dom);
+ }
+
+ //FIXME HANDLE card = true
+
+ // add this to the correct place in items.
+
+
// remove Card from items.
var old_parent = data.source.parent();
old_parent.items = old_parent.items.filter(function(e) { return e != data.source });
+
if (this.items.length) {
var nitems = [];
- for (var i =0; i < this.items; i++) {
- if (i == target_info.item_n && target_info.position == 'before') {
+ 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 == 'above') {
nitems.push(data.source);
}
nitems.push(this.items[i]);
- if (i == target_info.item_n && target_info.position == 'after') {
+ if (i == info.items_n && info.position == 'below') {
nitems.push(data.source);
}
}
this.items = nitems;
+ Roo.log(this.items);
} else {
this.items.push(data.source);
}
- //FIXME HANDLE card = true
-
- // add this to the correct place in items.
-
return true;
},
},
+
+ onToggleRotate : function(e)
+ {
+ this.collapsableEl.removeClass('show');
+ this.footerEl.removeClass('d-none');
+ if (this.rotated) {
+
+ this.collapsableEl.addClass('show');
+ this.rotated = false;
+ return;
+ }
+ this.footerEl.addClass('d-none');
+ this.el.select('.roo-collapsable').removeClass('show');
+ this.rotated = true;
+
+
+ },
+
dropPlaceHolder: function (action, info, data)
{
if (this.dropEl === false) {
projects / roojs1 / blobdiff