From ae02b32b9210c6328f4acc339e215ae50c134f77 Mon Sep 17 00:00:00 2001 From: vieron Date: Fri, 18 Oct 2013 19:17:18 +0200 Subject: [PATCH] fix: fixes and improvements in widget-resizing. Closes #32 --- src/jquery.gridster.js | 85 ++++++++++++++++++++++++------------------ 1 file changed, 49 insertions(+), 36 deletions(-) diff --git a/src/jquery.gridster.js b/src/jquery.gridster.js index 321cc0254..4da3c98a6 100644 --- a/src/jquery.gridster.js +++ b/src/jquery.gridster.js @@ -17,7 +17,7 @@ min_cols: 1, max_cols: null, min_rows: 15, - max_size_x: 6, + max_size_x: false, autogenerate_stylesheet: true, avoid_overlapped_widgets: true, serialize_params: function($w, wgd) { @@ -191,7 +191,7 @@ /** - * Change the size of a widget. + * Change the size of a widget. Width is limited to the current grid width. * * @method resize_widget * @param {HTMLElement} $widget The jQuery wrapped HTMLElement @@ -210,13 +210,9 @@ size_x = this.cols; } - var old_cells_occupied = this.get_cells_occupied(wgd); - var old_size_x = wgd.size_x; var old_size_y = wgd.size_y; var old_col = wgd.col; var new_col = old_col; - var wider = size_x > old_size_x; - var taller = size_y > old_size_y; if (old_col + size_x - 1 > this.cols) { var diff = old_col + (size_x - 1) - this.cols; @@ -224,6 +220,10 @@ new_col = Math.max(1, c); } + if (size_y > old_size_y) { + this.add_faux_rows(Math.max(size_y - old_size_y, 0)); + } + var new_grid_data = { col: new_col, row: wgd.row, @@ -231,7 +231,25 @@ size_y: size_y }; - var new_cells_occupied = this.get_cells_occupied(new_grid_data); + this.mutate_widget_in_gridmap($widget, wgd, new_grid_data); + + this.set_dom_grid_height(); + + if (callback) { + callback.call(this, new_grid_data.size_x, new_grid_data.size_y); + } + + return $widget; + }; + + + fn.mutate_widget_in_gridmap = function($widget, wgd, new_wgd) { + + var old_size_x = wgd.size_x; + var old_size_y = wgd.size_y; + + var old_cells_occupied = this.get_cells_occupied(wgd); + var new_cells_occupied = this.get_cells_occupied(new_wgd); var empty_cols = []; $.each(old_cells_occupied.cols, function(i, col) { @@ -265,48 +283,44 @@ if (occupied_cols.length) { var cols_to_empty = [ - new_col, wgd.row, size_x, Math.min(old_size_y, size_y), $widget + new_wgd.col, new_wgd.row, new_wgd.size_x, Math.min(old_size_y, new_wgd.size_y), $widget ]; this.empty_cells.apply(this, cols_to_empty); } if (occupied_rows.length) { - var rows_to_empty = [new_col, wgd.row, size_x, size_y, $widget]; + var rows_to_empty = [new_wgd.col, new_wgd.row, new_wgd.size_x, new_wgd.size_y, $widget]; this.empty_cells.apply(this, rows_to_empty); } - wgd.col = new_col; - wgd.size_x = size_x; - wgd.size_y = size_y; - this.add_to_gridmap(new_grid_data, $widget); + // not the same that wgd = new_wgd; + wgd.col = new_wgd.col; + wgd.row = new_wgd.row; + wgd.size_x = new_wgd.size_x; + wgd.size_y = new_wgd.size_y; + + this.add_to_gridmap(new_wgd, $widget); //update coords instance attributes $widget.data('coords').update({ - width: (size_x * this.options.widget_base_dimensions[0] + - ((size_x - 1) * this.options.widget_margins[0]) * 2), - height: (size_y * this.options.widget_base_dimensions[1] + - ((size_y - 1) * this.options.widget_margins[1]) * 2) + width: (new_wgd.size_x * this.options.widget_base_dimensions[0] + + ((new_wgd.size_x - 1) * this.options.widget_margins[0]) * 2), + height: (new_wgd.size_y * this.options.widget_base_dimensions[1] + + ((new_wgd.size_y - 1) * this.options.widget_margins[1]) * 2) }); - if (size_y > old_size_y) { - this.add_faux_rows(size_y - old_size_y); - } - - if (size_x > old_size_x) { - this.add_faux_cols(size_x - old_size_x); - } - $widget.attr({ - 'data-col': new_col, - 'data-sizex': size_x, - 'data-sizey': size_y + 'data-col': new_wgd.col, + 'data-row': new_wgd.row, + 'data-sizex': new_wgd.size_x, + 'data-sizey': new_wgd.size_y }); if (empty_cols.length) { var cols_to_remove_holes = [ - empty_cols[0], wgd.row, + empty_cols[0], new_wgd.row, empty_cols.length, - Math.min(old_size_y, size_y), + Math.min(old_size_y, new_wgd.size_y), $widget ]; @@ -315,18 +329,17 @@ if (empty_rows.length) { var rows_to_remove_holes = [ - new_col, wgd.row, size_x, size_y, $widget + new_wgd.col, new_wgd.row, new_wgd.size_x, new_wgd.size_y, $widget ]; this.remove_empty_cells.apply(this, rows_to_remove_holes); } - if (callback) { - callback.call(this, size_x, size_y); - } + this.move_widget_up($widget); - return $widget; + return this; }; + /** * Move down widgets in cells represented by the arguments col, row, size_x, * size_y @@ -2280,7 +2293,7 @@ */ fn.generate_stylesheet = function(opts) { var styles = ''; - var max_size_x = this.options.max_size_x; + var max_size_x = this.options.max_size_x || this.cols; var max_rows = 0; var max_cols = 0; var i;