deblan/gridstack.js
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add option for animating gridstack with css transitions

Browse source
This commit is contained in:
ianshields 2014-12-04 16:21:22 -05:00
parent 490063bf7e
commit 461123ea53
2 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/gridstack.css
View file

@ -101,3 +101,20 @@
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;
}

23
src/gridstack.js
View file

@ -283,10 +283,12 @@
auto: true,
min_width: 768,
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.set_animation(this.opts.animate);
this._styles = Utils.create_stylesheet();
this._styles._max = 0;
@ -427,10 +429,12 @@
self.grid.end_update();
self.grid._sort_nodes();
_.each(self.grid.nodes, function (node) {
node.el.detach();
self.container.append(node.el);
});
setTimeout(function() { //if animating, delay detaching & reattaching all elements until animation finishes
_.each(self.grid.nodes, function (node) {
node.el.detach();
self.container.append(node.el);
});
}, (self.opts.animate ? 300 : 0));
};
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) {
el = $(el);
if (typeof x != 'undefined') el.attr('data-gs-x', x);