From faf2ee1140664c4bb768dab6033a9e3abc9b5b6c Mon Sep 17 00:00:00 2001 From: Pavel Reznikov Date: Thu, 20 Nov 2014 17:56:36 -0800 Subject: [PATCH] add movable/resizable API methods --- README.md | 16 +++++++ dist/gridstack.min.js | 2 +- src/gridstack.js | 108 +++++++++++++++++++++++++++--------------- 3 files changed, 88 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 4ee2698..301a81b 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/dist/gridstack.min.js b/dist/gridstack.min.js index 129c70d..9bedc9a 100644 --- a/dist/gridstack.min.js +++ b/dist/gridstack.min.js @@ -1 +1 @@ -!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=$('
').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=$('
').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 diff --git a/src/gridstack.js b/src/gridstack.js index a77a06b..aa4c16a 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -375,47 +375,41 @@ }); }; - if (!node.no_move) { - el.draggable({ - handle: this.opts.handle, - scroll: true, - appendTo: 'body', + 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'); + 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_move || this._is_one_column_mode()) { + el.draggable('disable'); } - 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 (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) {