Skip to content

Commit 835c2df

Browse files
vieronvieron
committed
fix(autogrow): refining autogrow_cols behavior and grid width issues
1 parent 9796c44 commit 835c2df

File tree

2 files changed

+70
-60
lines changed

2 files changed

+70
-60
lines changed

‎src/jquery.collision.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,7 @@
4141
this.$element = el;
4242
this.last_colliders = [];
4343
this.last_colliders_coords = [];
44-
if (typeof colliders === 'string' || colliders instanceof $) {
45-
this.$colliders = $(colliders,
46-
this.options.colliders_context).not(this.$element);
47-
}else{
48-
this.colliders = $(colliders);
49-
}
44+
this.set_colliders(colliders);
5045

5146
this.init();
5247
}
@@ -211,6 +206,16 @@
211206
};
212207

213208

209+
fn.set_colliders = function(colliders) {
210+
if (typeof colliders === 'string' || colliders instanceof $) {
211+
this.$colliders = $(colliders,
212+
this.options.colliders_context).not(this.$element);
213+
}else{
214+
this.colliders = $(colliders);
215+
}
216+
};
217+
218+
214219
//jQuery adapter
215220
$.fn.collision = function(collider, options) {
216221
return new Collision( this, collider, options );

‎src/jquery.gridster.js‎

Lines changed: 59 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@
261261
this.set_dom_grid_width();
262262
this.set_dom_grid_height();
263263

264-
this.drag_api.set_limits(this.container_width);
264+
this.drag_api.set_limits(this.cols * this.min_widget_width);
265265

266266
return $w.fadeIn();
267267
};
@@ -816,7 +816,7 @@
816816
var draggable_options = $.extend(true, {}, this.options.draggable, {
817817
offset_left: this.options.widget_margins[0],
818818
offset_top: this.options.widget_margins[1],
819-
container_width: this.container_width,
819+
container_width: this.cols * this.min_widget_width,
820820
limit: true,
821821
ignore_dragging: ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON',
822822
'.' + this.options.resize.handle_class],
@@ -910,14 +910,15 @@
910910
this.placeholder_grid_data = $.extend({}, this.player_grid_data);
911911

912912
this.set_dom_grid_height(this.$el.height() +
913-
(this.player_grid_data.size_y * this.min_widget_height));
913+
(this.player_grid_data.size_y * this.min_widget_height));
914914

915-
this.set_dom_grid_width(this.highest_col + 1);
915+
this.set_dom_grid_width(this.cols);
916916

917-
// auto grow cols
917+
var pgd_sizex = this.player_grid_data.size_x;
918918
var cols_diff = this.cols - this.highest_col;
919-
if (cols_diff < this.player_grid_data.size_x) {
920-
this.add_faux_cols(this.player_grid_data.size_x - cols_diff);
919+
920+
if (this.options.autogrow_cols && cols_diff <= pgd_sizex) {
921+
this.add_faux_cols(Math.min(pgd_sizex - cols_diff, 1));
921922
}
922923

923924
var colliders = this.faux_grid;
@@ -969,31 +970,30 @@
969970
top: ui.position.top + this.baseY
970971
};
971972

973+
// auto grow cols
974+
if (this.options.autogrow_cols) {
975+
var prcol = this.placeholder_grid_data.col +
976+
this.placeholder_grid_data.size_x - 1;
977+
978+
// "- 1" due to adding at least 1 column in on_start_drag
979+
if (prcol >= this.cols - 1 && this.options.max_cols >= this.cols + 1) {
980+
this.add_faux_cols(1);
981+
this.set_dom_grid_width(this.cols + 1);
982+
this.drag_api.set_limits(this.container_width);
983+
}
984+
985+
this.collision_api.set_colliders(this.faux_grid);
986+
}
987+
972988
this.colliders_data = this.collision_api.get_closest_colliders(
973989
abs_offset);
974990

975991
this.on_overlapped_column_change(
976-
this.on_start_overlapping_column,
977-
this.on_stop_overlapping_column
978-
);
992+
this.on_start_overlapping_column, this.on_stop_overlapping_column);
979993

980994
this.on_overlapped_row_change(
981-
this.on_start_overlapping_row,
982-
this.on_stop_overlapping_row
983-
);
995+
this.on_start_overlapping_row, this.on_stop_overlapping_row);
984996

985-
//auto grow cols
986-
if (this.options.autogrow_cols) {
987-
var prcol = this.placeholder_grid_data.col +
988-
this.placeholder_grid_data.size_x - 1;
989-
if (prcol === this.highest_col) {
990-
if (prcol < this.cols) {
991-
this.set_dom_grid_width(prcol + 1);
992-
}
993-
this.highest_col = prcol + 1;
994-
this.drag_api.set_limits(this.container_width);
995-
}
996-
}
997997

998998
if (this.helper && this.$player) {
999999
this.$player.css({
@@ -1069,7 +1069,7 @@
10691069
this.set_dom_grid_width();
10701070

10711071
if (this.options.autogrow_cols) {
1072-
this.drag_api.set_limits(this.container_width);
1072+
this.drag_api.set_limits(this.cols * this.min_widget_width);
10731073
}
10741074
};
10751075

@@ -1107,6 +1107,8 @@
11071107

11081108
this.resize_initial_last_col = this.get_highest_occupied_cell().col;
11091109

1110+
this.set_dom_grid_width(this.cols);
1111+
11101112
this.resize_dir = {
11111113
right: ui.$player.is('.' + this.resize_handle_class + '-x'),
11121114
bottom: ui.$player.is('.' + this.resize_handle_class + '-y')
@@ -1165,7 +1167,7 @@
11651167
this.set_dom_grid_width();
11661168

11671169
if (this.options.autogrow_cols) {
1168-
this.drag_api.set_limits(this.container_width);
1170+
this.drag_api.set_limits(this.cols * this.min_widget_width);
11691171
}
11701172

11711173
if (this.options.resize.stop) {
@@ -1187,52 +1189,54 @@
11871189
var rel_y = (ui.pointer.diff_top);
11881190
var wbd_x = this.options.widget_base_dimensions[0];
11891191
var wbd_y = this.options.widget_base_dimensions[1];
1192+
var margin_x = this.options.widget_margins[0];
1193+
var margin_y = this.options.widget_margins[1];
1194+
var max_size_x = this.resize_max_size_x;
1195+
var min_size_x = this.resize_min_size_x;
1196+
var max_size_y = this.resize_max_size_y;
1197+
var min_size_y = this.resize_min_size_y;
1198+
var autogrow = this.options.autogrow_cols;
1199+
var width;
11901200
var max_width = Infinity;
11911201
var max_height = Infinity;
11921202

1193-
var inc_units_x = Math.ceil((rel_x /
1194-
(this.options.widget_base_dimensions[0] +
1195-
this.options.widget_margins[0] * 2)) - 0.2);
1196-
1197-
var inc_units_y = Math.ceil((rel_y /
1198-
(this.options.widget_base_dimensions[1] +
1199-
this.options.widget_margins[1] * 2)) - 0.2);
1203+
var inc_units_x = Math.ceil((rel_x / (wbd_x + margin_x * 2)) - 0.2);
1204+
var inc_units_y = Math.ceil((rel_y / (wbd_y + margin_y * 2)) - 0.2);
12001205

12011206
var size_x = Math.max(1, this.resize_initial_sizex + inc_units_x);
12021207
var size_y = Math.max(1, this.resize_initial_sizey + inc_units_y);
12031208

1204-
size_x = Math.max(Math.min(size_x, this.resize_max_size_x), this.resize_min_size_x);
1205-
max_width = (this.resize_max_size_x * wbd_x) +
1206-
((size_x - 1) * this.options.widget_margins[0] * 2);
1207-
min_width = (this.resize_min_size_x * wbd_x) +
1208-
((size_x - 1) * this.options.widget_margins[0] * 2);
1209+
var max_cols = (this.container_width / this.min_widget_width) -
1210+
this.resize_initial_col + 1;
1211+
var limit_width = ((max_cols * this.min_widget_width) - margin_x * 2);
1212+
1213+
size_x = Math.max(Math.min(size_x, max_size_x), min_size_x);
1214+
size_x = Math.min(max_cols, size_x);
1215+
width = (max_size_x * wbd_x) + ((size_x - 1) * margin_x * 2);
1216+
max_width = Math.min(width, limit_width);
1217+
min_width = (min_size_x * wbd_x) + ((size_x - 1) * margin_x * 2);
12091218

1210-
size_y = Math.max(Math.min(size_y, this.resize_max_size_y), this.resize_min_size_y);
1211-
max_height = (this.resize_max_size_y * wbd_y) +
1212-
((size_y - 1) * this.options.widget_margins[1] * 2);
1213-
min_height = (this.resize_min_size_y * wbd_y) +
1214-
((size_y - 1) * this.options.widget_margins[1] * 2);
1219+
size_y = Math.max(Math.min(size_y, max_size_y), min_size_y);
1220+
max_height = (max_size_y * wbd_y) + ((size_y - 1) * margin_y * 2);
1221+
min_height = (min_size_y * wbd_y) + ((size_y - 1) * margin_y * 2);
12151222

12161223
if (this.resize_dir.right) {
12171224
size_y = this.resize_initial_sizey;
12181225
} else if (this.resize_dir.bottom) {
12191226
size_x = this.resize_initial_sizex;
12201227
}
12211228

1222-
1223-
if (this.options.autogrow_cols) {
1224-
// auto grow cols
1229+
if (autogrow) {
12251230
var last_widget_col = this.resize_initial_col + size_x - 1;
1226-
if (this.options.autogrow_cols && this.resize_initial_last_col <= last_widget_col) {
1227-
this.set_dom_grid_width(last_widget_col + 1);
1231+
if (autogrow && this.resize_initial_last_col <= last_widget_col) {
1232+
this.set_dom_grid_width(Math.max(last_widget_col + 1, this.cols));
12281233

12291234
if (this.cols < last_widget_col) {
12301235
this.add_faux_cols(last_widget_col - this.cols);
12311236
}
12321237
}
12331238
}
12341239

1235-
12361240
var css_props = {};
12371241
!this.resize_dir.bottom && (css_props.width = Math.max(Math.min(
12381242
this.resize_initial_width + rel_x, max_width), min_width));
@@ -1245,6 +1249,7 @@
12451249
size_y !== this.resize_last_sizey) {
12461250

12471251
this.resize_widget(this.$resized_widget, size_x, size_y);
1252+
this.set_dom_grid_width(this.cols);
12481253

12491254
this.$resize_preview_holder.css({
12501255
'width': '',
@@ -2710,14 +2715,14 @@
27102715
* @return {Object} Returns the instance of the Gridster class.
27112716
*/
27122717
fn.set_dom_grid_width = function(cols) {
2713-
var width;
2714-
27152718
if (typeof cols === 'undefined') {
27162719
cols = this.get_highest_occupied_cell().col;
27172720
}
27182721

2719-
cols = Math.min(this.options.max_cols,
2720-
Math.max(cols, this.options.min_cols));
2722+
var max_cols = (this.options.autogrow_cols ? this.options.max_cols :
2723+
this.cols);
2724+
2725+
cols = Math.min(max_cols, Math.max(cols, this.options.min_cols));
27212726
this.container_width = cols * this.min_widget_width;
27222727
this.$el.css('width', this.container_width);
27232728
return this;

0 commit comments

Comments
 (0)