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

update gridstack

Browse source
This commit is contained in:
Pavel Reznikov 2014-12-04 20:52:38 -08:00
commit ff9136cd87
3 changed files with 37 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
gridstack.css
View file

@ -88,7 +88,6 @@
.grid-stack-item[data-gs-x="2"] { left: 16.66666667% }
.grid-stack-item[data-gs-x="1"] { left: 8.33333333% }
@media (max-width: 768px) {
.grid-stack-item {
position: relative !important;
@ -102,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;
}

24
gridstack.js
View file

@ -283,7 +283,8 @@
auto: true,
min_width: 768,
float: false,
_class: 'grid-stack-' + (Math.random() * 10000).toFixed(0)
_class: 'grid-stack-' + (Math.random() * 10000).toFixed(0),
animate: Boolean(this.container.attr('data-gs-animate')) || false
});
this.container.addClass(this.opts._class);
@ -324,6 +325,8 @@
});
}
this.set_animation(this.opts.animate);
this.placeholder = $('<div class="' + this.opts.placeholder_class + ' ' + this.opts.item_class + '"><div class="placeholder-content" /></div>').hide();
this.container.append(this.placeholder);
this.container.height((this.grid.get_grid_height()) * (this.opts.cell_height + this.opts.vertical_margin) - this.opts.vertical_margin);
@ -427,10 +430,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 +482,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);

2
index.html
View file

@ -106,7 +106,7 @@
</div>
</div>
<div class="grid-stack" data-gs-width="12">
<div class="grid-stack" data-gs-width="12" data-gs-animate="yes">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2"><div class="grid-stack-item-content">1</div></div>
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4"><div class="grid-stack-item-content">2</div></div>
<div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2" data-gs-min-width="2" data-gs-no-resize="yes"><div class="grid-stack-item-content"> <span class="fa fa-hand-o-up"></span> Drag me! </div></div>