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).
