Commit faf2ee11 authored by Pavel Reznikov's avatar Pavel Reznikov
Browse files

add movable/resizable API methods

parent 137ea915
......@@ -119,6 +119,20 @@ Parameters:
- `el` - widget to remove
### resizable(el, val)
Enables/Disables resizing.
- `el` - widget to modify
- `val` - if `true` widget will be resizable.
### movable(el, val)
Enables/Disables moving.
- `el` - widget to modify
- `val` - if `true` widget will be draggable.
## Use with knockout.js
```javascript
......@@ -178,6 +192,8 @@ Changes
#### v0.1.1 (development version)
- add `resizable` and `movable` API methods
- add `data-gs-no-move` attribute
- add `float` option
- fix default css rule for inner content
......
!function(a,b){var c={is_intercepted:function(a,b){return!(a.x+a.width<=b.x||b.x+b.width<=a.x||a.y+a.height<=b.y||b.y+b.height<=a.y)}},d=0,e=function(a,b,c){this.width=a,this.float=c||!1,this.nodes=[],this.onchange=b||function(){}};e.prototype._fix_collisions=function(a){for(this._sort_nodes(-1);;){var d=b.find(this.nodes,function(b){return b!=a&&c.is_intercepted(b,a)},this);if("undefined"==typeof d)return;this.move_node(d,d.x,a.y+a.height,d.width,d.height,!0)}},e.prototype._sort_nodes=function(a){a=-1!=a?1:-1,this.nodes=b.sortBy(this.nodes,function(b){return a*(b.x+b.y*this.width)},this)},e.prototype._pack_nodes=function(){this._sort_nodes(),this.float?b.each(this.nodes,function(a){if(!a._updating&&"undefined"!=typeof a._orig_y&&a.y!=a._orig_y){var e=b.chain(this.nodes).find(function(b){return a!=b&&c.is_intercepted({x:a.x,y:a._orig_y,width:a.width,height:a.height},b)}).value();e||(a._dirty=!0,a.y=a._orig_y)}},this):b.each(this.nodes,function(a,d){for(;a.y>0;){var e=a.y-1,f=0==d;if(d>0){var g=b.chain(this.nodes).first(d).find(function(b){return c.is_intercepted({x:a.x,y:e,width:a.width,height:a.height},b)}).value();f="undefined"==typeof g}if(!f)break;a._dirty=a.y!=e,a.y=e}},this)},e.prototype._prepare_node=function(a,c){return a=b.defaults(a||{},{width:1,height:1,x:0,y:0}),a.x=parseInt(""+a.x),a.y=parseInt(""+a.y),a.width=parseInt(""+a.width),a.height=parseInt(""+a.height),a.auto_position=a.auto_position||!1,a.no_resize=a.no_resize||!1,a.no_move=a.no_move||!1,a.width>this.width?a.width=this.width:a.width<1&&(a.width=1),a.height<1&&(a.height=1),a.x<0&&(a.x=0),a.x+a.width>this.width&&(c?a.x=this.width-a.width:a.width=this.width-a.x),a.y<0&&(a.y=0),a},e.prototype._notify=function(){var a=Array.prototype.slice.call(arguments,1).concat(this.get_dirty_nodes());a=a.concat(this.get_dirty_nodes()),this.onchange(a)},e.prototype.clean_nodes=function(){b.each(this.nodes,function(a){a._dirty=!1})},e.prototype.get_dirty_nodes=function(){return b.filter(this.nodes,function(a){return a._dirty})},e.prototype.add_node=function(a){if(a=this._prepare_node(a),"undefined"!=typeof a.max_width&&(a.width=Math.min(a.width,a.max_width)),"undefined"!=typeof a.max_height&&(a.height=Math.min(a.height,a.max_height)),"undefined"!=typeof a.min_width&&(a.width=Math.max(a.width,a.min_width)),"undefined"!=typeof a.min_height&&(a.height=Math.max(a.height,a.min_height)),a._id=++d,a._dirty=!0,a.auto_position){this._sort_nodes();for(var e=0;;++e){var f=e%this.width,g=Math.floor(e/this.width);if(!b.find(this.nodes,function(b){return c.is_intercepted({x:f,y:g,width:a.width,height:a.height},b)})){a.x=f,a.y=g;break}}}return this.nodes.push(a),this._fix_collisions(a),this._pack_nodes(),this._notify(),a},e.prototype.remove_node=function(a){a._id=null,this.nodes=b.without(this.nodes,a),this._pack_nodes(),this._notify(a)},e.prototype.move_node=function(a,b,c,d,e,f){if("undefined"==typeof b&&(b=a.x),"undefined"==typeof c&&(c=a.y),"undefined"==typeof d&&(d=a.width),"undefined"==typeof e&&(e=a.height),"undefined"!=typeof a.max_width&&(d=Math.min(d,a.max_width)),"undefined"!=typeof a.max_height&&(e=Math.min(e,a.max_height)),"undefined"!=typeof a.min_width&&(d=Math.max(d,a.min_width)),"undefined"!=typeof a.min_height&&(e=Math.max(e,a.min_height)),a.x==b&&a.y==c&&a.width==d&&a.height==e)return a;var g=a.x!=b;return a._dirty=!0,a.x=b,a.y=c,a.width=d,a.height=e,a=this._prepare_node(a,g),this._fix_collisions(a),f||(this._pack_nodes(),this._notify()),a},e.prototype.get_grid_height=function(){return b.reduce(this.nodes,function(a,b){return Math.max(a,b.y+b.height)},0)},e.prototype.begin_update=function(a){b.each(this.nodes,function(a){a._orig_y=a.y}),a._updating=!0},e.prototype.end_update=function(){var a=b.find(this.nodes,function(a){return a._updating});a&&(a._updating=!1)};var f=function(a,c){var f,d=this;this.container=$(a),this.opts=b.defaults(c||{},{width:12,item_class:"grid-stack-item",placeholder_class:"grid-stack-placeholder",handle:".grid-stack-item-content",cell_height:60,vertical_margin:20,auto:!0,min_width:768,"float":!1}),this.grid=new e(this.opts.width,function(a){b.each(a,function(a){null==a._id?a.el.remove():a.el.attr("data-gs-x",a.x).attr("data-gs-y",a.y).attr("data-gs-width",a.width).attr("data-gs-height",a.height)})},this.opts.float),this.opts.auto&&this.container.find("."+this.opts.item_class).each(function(a,b){d._prepare_element(b)}),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);var g=function(){if(d._is_one_column_mode()){if(f)return;f=!0,b.each(d.grid.nodes,function(a){a.no_move||a.el.draggable("disable"),a.no_resize||a.el.resizable("disable")})}else{if(!f)return;f=!1,b.each(d.grid.nodes,function(a){a.no_move||a.el.draggable("enable"),a.no_resize||a.el.resizable("enable")})}};$(window).resize(g),g()};f.prototype._update_container_height=function(){this.container.height(this.grid.get_grid_height()*(this.opts.cell_height+this.opts.vertical_margin)-this.opts.vertical_margin)},f.prototype._is_one_column_mode=function(){return $(window).width()<=this.opts.min_width},f.prototype._prepare_element=function(a){var c=this;a=$(a);var d=c.grid.add_node({x:a.attr("data-gs-x"),y:a.attr("data-gs-y"),width:a.attr("data-gs-width"),height:a.attr("data-gs-height"),max_width:a.attr("data-gs-max-width"),min_width:a.attr("data-gs-min-width"),max_height:a.attr("data-gs-max-height"),min_height:a.attr("data-gs-min-height"),auto_position:a.attr("data-gs-auto-position"),no_resize:a.attr("data-gs-no-resize"),no_move:a.attr("data-gs-no-move"),el:a});a.data("_gridstack_node",d);var e,f=this.opts.cell_height+this.opts.vertical_margin/2,g=function(){var f=$(this);c.grid.clean_nodes(),c.grid.begin_update(d),e=Math.ceil(f.outerWidth()/f.attr("data-gs-width")),c.placeholder.attr("data-gs-x",f.attr("data-gs-x")).attr("data-gs-y",f.attr("data-gs-y")).attr("data-gs-width",f.attr("data-gs-width")).attr("data-gs-height",f.attr("data-gs-height")).show(),d.el=c.placeholder},h=function(){var f=$(this);d.el=f,c.placeholder.hide(),f.attr("data-gs-x",d.x).attr("data-gs-y",d.y).attr("data-gs-width",d.width).attr("data-gs-height",d.height).removeAttr("style"),c._update_container_height(),c.container.trigger("change",[c.grid.get_dirty_nodes()]),c.grid.end_update(),c.grid._sort_nodes(),b.each(c.grid.nodes,function(a){a.el.detach(),c.container.append(a.el)})};d.no_move||(a.draggable({handle:this.opts.handle,scroll:!0,appendTo:"body",start:g,stop:h,drag:function(a,b){var g=Math.round(b.position.left/e),h=Math.floor(b.position.top/f);c.grid.move_node(d,g,h),c._update_container_height()}}),this._is_one_column_mode()&&a.draggable("disable")),d.no_resize||(a.resizable({autoHide:!0,handles:"se",minHeight:this.opts.cell_height-10,minWidth:70,start:g,stop:h,resize:function(a,b){var g=Math.round(b.size.width/e),h=Math.round(b.size.height/f);c.grid.move_node(d,d.x,d.y,g,h),c._update_container_height()}}),this._is_one_column_mode()&&a.resizable("disable"))},f.prototype.add_widget=function(a,b,c,d,e,f){a=$(a),"undefined"!=typeof b&&a.attr("data-gs-x",b),"undefined"!=typeof c&&a.attr("data-gs-y",c),"undefined"!=typeof d&&a.attr("data-gs-width",d),"undefined"!=typeof e&&a.attr("data-gs-height",e),"undefined"!=typeof f&&a.attr("data-gs-auto-position",f),this.container.append(a),this._prepare_element(a),this._update_container_height()},f.prototype.remove_widget=function(a){var b=$(a).data("_gridstack_node");this.grid.remove_node(b),a.remove(),this._update_container_height()},a.GridStackUI=f,$.fn.gridstack=function(a){return this.each(function(){$(this).data("gridstack")||$(this).data("gridstack",new f(this,a))})}}(window,_);
\ No newline at end of file
!function(a,b){var c={is_intercepted:function(a,b){return!(a.x+a.width<=b.x||b.x+b.width<=a.x||a.y+a.height<=b.y||b.y+b.height<=a.y)}},d=0,e=function(a,b,c){this.width=a,this.float=c||!1,this.nodes=[],this.onchange=b||function(){}};e.prototype._fix_collisions=function(a){for(this._sort_nodes(-1);;){var d=b.find(this.nodes,function(b){return b!=a&&c.is_intercepted(b,a)},this);if("undefined"==typeof d)return;this.move_node(d,d.x,a.y+a.height,d.width,d.height,!0)}},e.prototype._sort_nodes=function(a){a=-1!=a?1:-1,this.nodes=b.sortBy(this.nodes,function(b){return a*(b.x+b.y*this.width)},this)},e.prototype._pack_nodes=function(){this._sort_nodes(),this.float?b.each(this.nodes,function(a){if(!a._updating&&"undefined"!=typeof a._orig_y&&a.y!=a._orig_y){var e=b.chain(this.nodes).find(function(b){return a!=b&&c.is_intercepted({x:a.x,y:a._orig_y,width:a.width,height:a.height},b)}).value();e||(a._dirty=!0,a.y=a._orig_y)}},this):b.each(this.nodes,function(a,d){for(;a.y>0;){var e=a.y-1,f=0==d;if(d>0){var g=b.chain(this.nodes).first(d).find(function(b){return c.is_intercepted({x:a.x,y:e,width:a.width,height:a.height},b)}).value();f="undefined"==typeof g}if(!f)break;a._dirty=a.y!=e,a.y=e}},this)},e.prototype._prepare_node=function(a,c){return a=b.defaults(a||{},{width:1,height:1,x:0,y:0}),a.x=parseInt(""+a.x),a.y=parseInt(""+a.y),a.width=parseInt(""+a.width),a.height=parseInt(""+a.height),a.auto_position=a.auto_position||!1,a.no_resize=a.no_resize||!1,a.no_move=a.no_move||!1,a.width>this.width?a.width=this.width:a.width<1&&(a.width=1),a.height<1&&(a.height=1),a.x<0&&(a.x=0),a.x+a.width>this.width&&(c?a.x=this.width-a.width:a.width=this.width-a.x),a.y<0&&(a.y=0),a},e.prototype._notify=function(){var a=Array.prototype.slice.call(arguments,1).concat(this.get_dirty_nodes());a=a.concat(this.get_dirty_nodes()),this.onchange(a)},e.prototype.clean_nodes=function(){b.each(this.nodes,function(a){a._dirty=!1})},e.prototype.get_dirty_nodes=function(){return b.filter(this.nodes,function(a){return a._dirty})},e.prototype.add_node=function(a){if(a=this._prepare_node(a),"undefined"!=typeof a.max_width&&(a.width=Math.min(a.width,a.max_width)),"undefined"!=typeof a.max_height&&(a.height=Math.min(a.height,a.max_height)),"undefined"!=typeof a.min_width&&(a.width=Math.max(a.width,a.min_width)),"undefined"!=typeof a.min_height&&(a.height=Math.max(a.height,a.min_height)),a._id=++d,a._dirty=!0,a.auto_position){this._sort_nodes();for(var e=0;;++e){var f=e%this.width,g=Math.floor(e/this.width);if(!b.find(this.nodes,function(b){return c.is_intercepted({x:f,y:g,width:a.width,height:a.height},b)})){a.x=f,a.y=g;break}}}return this.nodes.push(a),this._fix_collisions(a),this._pack_nodes(),this._notify(),a},e.prototype.remove_node=function(a){a._id=null,this.nodes=b.without(this.nodes,a),this._pack_nodes(),this._notify(a)},e.prototype.move_node=function(a,b,c,d,e,f){if("undefined"==typeof b&&(b=a.x),"undefined"==typeof c&&(c=a.y),"undefined"==typeof d&&(d=a.width),"undefined"==typeof e&&(e=a.height),"undefined"!=typeof a.max_width&&(d=Math.min(d,a.max_width)),"undefined"!=typeof a.max_height&&(e=Math.min(e,a.max_height)),"undefined"!=typeof a.min_width&&(d=Math.max(d,a.min_width)),"undefined"!=typeof a.min_height&&(e=Math.max(e,a.min_height)),a.x==b&&a.y==c&&a.width==d&&a.height==e)return a;var g=a.x!=b;return a._dirty=!0,a.x=b,a.y=c,a.width=d,a.height=e,a=this._prepare_node(a,g),this._fix_collisions(a),f||(this._pack_nodes(),this._notify()),a},e.prototype.get_grid_height=function(){return b.reduce(this.nodes,function(a,b){return Math.max(a,b.y+b.height)},0)},e.prototype.begin_update=function(a){b.each(this.nodes,function(a){a._orig_y=a.y}),a._updating=!0},e.prototype.end_update=function(){var a=b.find(this.nodes,function(a){return a._updating});a&&(a._updating=!1)};var f=function(a,c){var f,d=this;this.container=$(a),this.opts=b.defaults(c||{},{width:12,item_class:"grid-stack-item",placeholder_class:"grid-stack-placeholder",handle:".grid-stack-item-content",cell_height:60,vertical_margin:20,auto:!0,min_width:768,"float":!1}),this.grid=new e(this.opts.width,function(a){b.each(a,function(a){null==a._id?a.el.remove():a.el.attr("data-gs-x",a.x).attr("data-gs-y",a.y).attr("data-gs-width",a.width).attr("data-gs-height",a.height)})},this.opts.float),this.opts.auto&&this.container.find("."+this.opts.item_class).each(function(a,b){d._prepare_element(b)}),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);var g=function(){if(d._is_one_column_mode()){if(f)return;f=!0,b.each(d.grid.nodes,function(a){a.no_move||a.el.draggable("disable"),a.no_resize||a.el.resizable("disable")})}else{if(!f)return;f=!1,b.each(d.grid.nodes,function(a){a.no_move||a.el.draggable("enable"),a.no_resize||a.el.resizable("enable")})}};$(window).resize(g),g()};f.prototype._update_container_height=function(){this.container.height(this.grid.get_grid_height()*(this.opts.cell_height+this.opts.vertical_margin)-this.opts.vertical_margin)},f.prototype._is_one_column_mode=function(){return $(window).width()<=this.opts.min_width},f.prototype._prepare_element=function(a){var c=this;a=$(a);var d=c.grid.add_node({x:a.attr("data-gs-x"),y:a.attr("data-gs-y"),width:a.attr("data-gs-width"),height:a.attr("data-gs-height"),max_width:a.attr("data-gs-max-width"),min_width:a.attr("data-gs-min-width"),max_height:a.attr("data-gs-max-height"),min_height:a.attr("data-gs-min-height"),auto_position:a.attr("data-gs-auto-position"),no_resize:a.attr("data-gs-no-resize"),no_move:a.attr("data-gs-no-move"),el:a});a.data("_gridstack_node",d);var e,f=this.opts.cell_height+this.opts.vertical_margin/2,g=function(){var f=$(this);c.grid.clean_nodes(),c.grid.begin_update(d),e=Math.ceil(f.outerWidth()/f.attr("data-gs-width")),c.placeholder.attr("data-gs-x",f.attr("data-gs-x")).attr("data-gs-y",f.attr("data-gs-y")).attr("data-gs-width",f.attr("data-gs-width")).attr("data-gs-height",f.attr("data-gs-height")).show(),d.el=c.placeholder},h=function(){var f=$(this);d.el=f,c.placeholder.hide(),f.attr("data-gs-x",d.x).attr("data-gs-y",d.y).attr("data-gs-width",d.width).attr("data-gs-height",d.height).removeAttr("style"),c._update_container_height(),c.container.trigger("change",[c.grid.get_dirty_nodes()]),c.grid.end_update(),c.grid._sort_nodes(),b.each(c.grid.nodes,function(a){a.el.detach(),c.container.append(a.el)})};a.draggable({handle:this.opts.handle,scroll:!0,appendTo:"body",start:g,stop:h,drag:function(a,b){var g=Math.round(b.position.left/e),h=Math.floor(b.position.top/f);c.grid.move_node(d,g,h),c._update_container_height()}}).resizable({autoHide:!0,handles:"se",minHeight:this.opts.cell_height-10,minWidth:70,start:g,stop:h,resize:function(a,b){var g=Math.round(b.size.width/e),h=Math.round(b.size.height/f);c.grid.move_node(d,d.x,d.y,g,h),c._update_container_height()}}),(d.no_move||this._is_one_column_mode())&&a.draggable("disable"),(d.no_resize||this._is_one_column_mode())&&a.resizable("disable")},f.prototype.add_widget=function(a,b,c,d,e,f){a=$(a),"undefined"!=typeof b&&a.attr("data-gs-x",b),"undefined"!=typeof c&&a.attr("data-gs-y",c),"undefined"!=typeof d&&a.attr("data-gs-width",d),"undefined"!=typeof e&&a.attr("data-gs-height",e),"undefined"!=typeof f&&a.attr("data-gs-auto-position",f),this.container.append(a),this._prepare_element(a),this._update_container_height()},f.prototype.remove_widget=function(a){var b=$(a).data("_gridstack_node");this.grid.remove_node(b),a.remove(),this._update_container_height()},f.prototype.resizable=function(a,b){return a=$(a),a.each(function(a,c){c=$(c);var d=c.data("_gridstack_node");"undefined"!=typeof d&&(d.no_resize=!b,d.no_resize?c.resizable("disable"):c.resizable("enable"))}),this},f.prototype.movable=function(a,b){return a=$(a),a.each(function(a,c){c=$(c);var d=c.data("_gridstack_node");"undefined"!=typeof d&&(d.no_move=!b,d.no_move?c.draggable("disable"):c.draggable("enable"))}),this},a.GridStackUI=f,$.fn.gridstack=function(a){return this.each(function(){$(this).data("gridstack")||$(this).data("gridstack",new f(this,a))})}}(window,_);
\ No newline at end of file
......@@ -375,47 +375,41 @@
});
};
if (!node.no_move) {
el.draggable({
handle: this.opts.handle,
scroll: true,
appendTo: 'body',
start: on_start_moving,
stop: on_end_moving,
drag: function (event, ui) {
var x = Math.round(ui.position.left / cell_width),
y = Math.floor(ui.position.top / cell_height);
self.grid.move_node(node, x, y);
self._update_container_height();
}
});
if (this._is_one_column_mode()) {
el.draggable('disable');
el.draggable({
handle: this.opts.handle,
scroll: true,
appendTo: 'body',
start: on_start_moving,
stop: on_end_moving,
drag: function (event, ui) {
var x = Math.round(ui.position.left / cell_width),
y = Math.floor(ui.position.top / cell_height);
self.grid.move_node(node, x, y);
self._update_container_height();
}
}
}).resizable({
autoHide: true,
handles: 'se',
minHeight: this.opts.cell_height - 10,
minWidth: 70,
start: on_start_moving,
stop: on_end_moving,
resize: function (event, ui) {
var width = Math.round(ui.size.width / cell_width),
height = Math.round(ui.size.height / cell_height);
self.grid.move_node(node, node.x, node.y, width, height);
self._update_container_height();
}
});
if (!node.no_resize) {
el.resizable({
autoHide: true,
handles: 'se',
minHeight: this.opts.cell_height - 10,
minWidth: 70,
start: on_start_moving,
stop: on_end_moving,
resize: function (event, ui) {
var width = Math.round(ui.size.width / cell_width),
height = Math.round(ui.size.height / cell_height);
self.grid.move_node(node, node.x, node.y, width, height);
self._update_container_height();
}
});
if (node.no_move || this._is_one_column_mode()) {
el.draggable('disable');
}
if (this._is_one_column_mode()) {
el.resizable('disable');
}
if (node.no_resize || this._is_one_column_mode()) {
el.resizable('disable');
}
};
......@@ -438,6 +432,46 @@
this._update_container_height();
};
GridStack.prototype.resizable = function (el, val) {
el = $(el);
el.each(function (index, el) {
el = $(el);
var node = el.data('_gridstack_node');
if (typeof node == 'undefined') {
return;
}
node.no_resize = !(val || false);
if (node.no_resize) {
el.resizable('disable');
}
else {
el.resizable('enable');
}
});
return this;
};
GridStack.prototype.movable = function (el, val) {
el = $(el);
el.each(function (index, el) {
el = $(el);
var node = el.data('_gridstack_node');
if (typeof node == 'undefined') {
return;
}
node.no_move = !(val || false);
if (node.no_move) {
el.draggable('disable');
}
else {
el.draggable('enable');
}
});
return this;
};
scope.GridStackUI = GridStack;
$.fn.gridstack = function (opts) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment