Add option for animating gridstack with css transitions
This commit is contained in:
parent
490063bf7e
commit
461123ea53
|
@ -101,3 +101,20 @@
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid-stack.grid-stack-animate .grid-stack-item {
|
||||||
|
-webkit-transition: left .3s, top .3s, height .3s, width .3s;
|
||||||
|
-moz-transition: left .3s, top .3s, height .3s, width .3s;
|
||||||
|
-o-transition: left .3s, top .3s, height .3s, width .3s;
|
||||||
|
-ms-transition: left .3s, top .3s, height .3s, width .3s;
|
||||||
|
transition: left .3s, top .3s, height .3s, width .3s;
|
||||||
|
}
|
||||||
|
/*Don't animate the placeholder or when dragging/resizing*/
|
||||||
|
.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
|
||||||
|
.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
|
||||||
|
.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
|
||||||
|
-webkit-transition: left .0s, top .0s, height .0s, width .0s;
|
||||||
|
-moz-transition: left .0s, top .0s, height .0s, width .0s;
|
||||||
|
-o-transition: left .0s, top .0s, height .0s, width .0s;
|
||||||
|
transition: left .0s, top .0s, height .0s, width .0s;
|
||||||
|
}
|
||||||
|
|
|
@ -283,10 +283,12 @@
|
||||||
auto: true,
|
auto: true,
|
||||||
min_width: 768,
|
min_width: 768,
|
||||||
float: false,
|
float: false,
|
||||||
_class: 'grid-stack-' + (Math.random() * 10000).toFixed(0)
|
_class: 'grid-stack-' + (Math.random() * 10000).toFixed(0),
|
||||||
|
animate: false
|
||||||
});
|
});
|
||||||
|
|
||||||
this.container.addClass(this.opts._class);
|
this.container.addClass(this.opts._class);
|
||||||
|
this.set_animation(this.opts.animate);
|
||||||
this._styles = Utils.create_stylesheet();
|
this._styles = Utils.create_stylesheet();
|
||||||
this._styles._max = 0;
|
this._styles._max = 0;
|
||||||
|
|
||||||
|
@ -427,10 +429,12 @@
|
||||||
self.grid.end_update();
|
self.grid.end_update();
|
||||||
|
|
||||||
self.grid._sort_nodes();
|
self.grid._sort_nodes();
|
||||||
|
setTimeout(function() { //if animating, delay detaching & reattaching all elements until animation finishes
|
||||||
_.each(self.grid.nodes, function (node) {
|
_.each(self.grid.nodes, function (node) {
|
||||||
node.el.detach();
|
node.el.detach();
|
||||||
self.container.append(node.el);
|
self.container.append(node.el);
|
||||||
});
|
});
|
||||||
|
}, (self.opts.animate ? 300 : 0));
|
||||||
};
|
};
|
||||||
|
|
||||||
el.draggable({
|
el.draggable({
|
||||||
|
@ -477,6 +481,15 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
GridStack.prototype.set_animation = function (enable) {
|
||||||
|
if (enable) {
|
||||||
|
this.container.addClass('grid-stack-animate');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.container.removeClass('grid-stack-animate');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
GridStack.prototype.add_widget = function (el, x, y, width, height, auto_position) {
|
GridStack.prototype.add_widget = function (el, x, y, width, height, auto_position) {
|
||||||
el = $(el);
|
el = $(el);
|
||||||
if (typeof x != 'undefined') el.attr('data-gs-x', x);
|
if (typeof x != 'undefined') el.attr('data-gs-x', x);
|
||||||
|
|
Loading…
Reference in a new issue