Is it possible to add a callback to the resize_widget function, that is
called when the resizing of a widget is finished? This may help to
update the widget content properly.
Right now the number of columns is calculated by dividing the available
space by the necessary space. I want to have an option to limit the
number of calculated columns, without changing the width of the div my
grid lives in.
In order to limit the number of calculated columns max_cols is set to a
number. To have 'unlimited' columns set the value of max_cols to -1 (as
ids done in the default settings). This provides the arbitrary useful
functionality to set the max number of columns to 0. Any sideeffect
caused by this are mitigated by checking that the max_cols is larger
than the min_cols setting.
Remove multiple widgets without chaining callbacks was not possible so I've added a new argument to remove_widget method named `silent` which if it's value is true, widgets below the removed will not move up.
Also added the method remove_all_widgets.
Fixes#63
When defining the gridster, you can now define a draggable.handle selector:
For example:
$("#widgets").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [565, 400],
draggable: {
stop: function(event, ui) {
console.log('save new columns');
},
handle: '.title'
}
});
If handle is omitted (or left blank), it works as it did previously. If a value is specified, then dragging only starts if the element which was clicked matches the selector specified.
Added by @vieron:
Closes#29
Some new methods we need at Ducksboard to implement TV mode.
Two new distributions of Gridster are generated with grunt:
- jquery.gridster.with-extras.js
- jquery.gridster.with-extras.min.js
Previously, disabling gridster caused all the instances of Gridster running on the pages was disabled. Because Draggable class uses event delegation from the body to manage drag events.
This solves the overlapping-blocks seen in the screencast provided by @daniel-nelson. I've captured another one trying to reproduce the same movements with this commit applied: http://www.screenr.com/g7J8
By popular demand, now gridster allows to change the size of widgets dynamically.
Usage.
- gridster_api.resize_wiget($widget, [size_x], [size_y]);
E.g. (try in gridster.net):
- gridster.resize_widget($('.gs_w:eq(3)'), 6);
- gridster.resize_widget($('.gs_w:eq(3)'), 1, 4);
To do this, two new methods were added to gridster:
- empty_cells(col, row, size_x, size_y, $exclude)
Move down widgets in cells represented by the arguments col, row, size_x,
size_y.
- remove_empty_cells(col, row, size_x, size_y, $exclude)
Move up widgets below cells represented by the arguments col, row, size_x,
size_y.
Also, add_widget method supports specifying a row and column. This was easy
through empty_cells method. Related to #24. Thanks to @parkerd for the help!
The code should be improved and make it more reusable when the feature of
"move widgets dynamically" is added (related to #20).
Until now, the number of rows for the faux grid (this.cols) was calculated taking the highest
value among min_rows option, the highest widget, and the number of rows
that fits on the wrapper height (based on widget_base_dimensions, widget_margins
and extra_rows options).
In addition to this, styles for data-row attributes ara generated based on
this.cols (above) plus a constant value of 10. This was done to reduce
the number of cells by which iterate when dragging, but it's not very logical...
So, now the number of rows is calculated by adding the height of all widgets.
In this way we ensure that there is always available cells in the grid.
Also the same number of rows are generated for both the faux grid and
the DOM grid (css styles).
