Gridster Class
Constructor
Gridster
-
el -
[options]
Parameters:
-
elHTMLElementThe HTMLelement that contains all the widgets.
-
[options]Object optionalAn Object with all options you want to overwrite:
-
[widget_selector]HTMLElement | String optionalDefine who will be the draggable widgets. Can be a CSS Selector String or a collection of HTMLElements
-
[widget_margins]Array optionalMargin between widgets. The first index for the horizontal margin (left, right) and the second for the vertical margin (top, bottom).
-
[widget_base_dimensions]Array optionalBase widget dimensions in pixels. The first index for the width and the second for the height.
-
[extra_cols]Number optionalAdd more columns in addition to those that have been calculated.
-
[extra_rows]Number optionalAdd more rows in addition to those that have been calculated.
-
[min_cols]Number optionalThe minimum required columns.
-
[min_rows]Number optionalThe minimum required rows.
-
[max_size_x]Number optionalThe maximum number of columns that a widget can span.
-
[autogenerate_stylesheet]Boolean optionalIf true, all the CSS required to position all widgets in their respective columns and rows will be generated automatically and injected to the
<head>of the document. You can set this to false, and write your own CSS targeting rows and cols via data-attributes like so:[data-col="1"] { left: 10px; } -
[avoid_overlapped_widgets]Boolean optionalAvoid that widgets loaded from the DOM can be overlapped. It is helpful if the positions were bad stored in the database or if there was any conflict.
-
[serialize_params]Function optionalReturn the data you want for each widget in the serialization. Two arguments are passed:
$w: the jQuery wrapped HTMLElement, andwgd: the grid coords object (col,row,size_x,size_y). -
[collision]Object optionalAn Object with all options for Collision class you want to overwrite. See Collision docs for more info.
-
[draggable]Object optionalAn Object with all options for Draggable class you want to overwrite. See Draggable docs for more info.
-
Item Index
Methods
- add_faux_cell
- add_faux_cols
- add_faux_rows
- add_style_tag
- add_to_gridmap
- add_widget
- can_go_player_up
- can_go_up_to_row
- can_go_widget_up
- can_move_to
- disable
- draggable
- empty_cells
- empty_cells_player_occupies
- enable
- for_each_cell_occupied
- for_each_column_occupied
- for_each_row_occupied
- for_each_widget_above
- for_each_widget_below
- generate_faux_grid
- generate_grid_and_stylesheet
- generate_stylesheet
- get_cells_occupied
- get_highest_occupied_cell
- get_targeted_columns
- get_targeted_rows
- get_valid_rows
- get_widgets_from_DOM
- get_widgets_overlapped
- get_widgets_under_player
- is_empty
- is_occupied
- is_placeholder_in
- is_placeholder_in_col
- is_player
- is_player_in
- is_widget
- is_widget_under_player
- manage_movements
- move_widget_down
- move_widget_to
- move_widget_up
- next_position
- on_drag
- on_overlapped_column_change
- on_overlapped_row_change
- on_start_drag
- on_start_overlapping_column
- on_start_overlapping_row
- on_stop_drag
- on_stop_overlapping_column
- on_stop_overlapping_row
- recalculate_faux_grid
- register_widget
- remove_all_widgets
- remove_empty_cells
- remove_from_gridmap
- remove_widget
- resize_widget
- serialize
- serialize_changed
- set_cells_player_occupies
- set_dom_grid_height
- set_placeholder
- set_player
- sort_by_col_asc
- sort_by_row_and_col_asc
- sort_by_row_asc
- sort_by_row_desc
- update_widget_position
- widgets_below
- widgets_contraints
Methods
add_faux_cell
-
row -
col
Add cell to the faux grid.
Returns:
add_faux_cols
-
cols
Add cols to the faux grid.
Parameters:
-
colsNumberThe number of cols you want to add to the faux grid.
Returns:
add_faux_rows
-
rows
Add rows to the faux grid.
Parameters:
-
rowsNumberThe number of rows you want to add to the faux grid.
Returns:
add_style_tag
-
css
Injects the given CSS as string to the head of the document.
Parameters:
-
cssStringThe styles to apply.
Returns:
add_to_gridmap
-
grid_data -
value
Add a widget to the mapped array of positions.
Parameters:
-
grid_dataObjectThe grid coords object representing the cells to update in the mapped array.
-
valueHTMLElement | BooleanThe value to set in the specified position .
Returns:
add_widget
-
html -
[size_x] -
[size_y] -
[col] -
[row]
Add a new widget to the grid.
Parameters:
-
htmlString | HTMLElementThe string representing the HTML of the widget or the HTMLElement.
-
[size_x]Number optionalThe nº of rows the widget occupies horizontally.
-
[size_y]Number optionalThe nº of columns the widget occupies vertically.
-
[col]Number optionalThe column the widget should start in.
-
[row]Number optionalThe row the widget should start in.
Returns:
can_go_player_up
-
widget_grid_data
Determines whether the player can move to a position above.
Parameters:
-
widget_grid_dataObjectThe actual grid coords object of the player.
Returns:
can_go_up_to_row
-
widget_grid_data -
col -
row
Check if the widget can move to the specified row, else returns the upper row possible.
Parameters:
Returns:
can_go_widget_up
-
widget_grid_data
Determines whether a widget can move to a position above.
Parameters:
-
widget_grid_dataObjectThe actual grid coords object of the widget we want to check.
Returns:
can_move_to
-
widget_grid_data -
col -
row -
[max_row]
Check if it's possible to move a widget to a specific col/row. It takes
into account the dimensions (size_y and size_x attrs. of the grid
coords object) the widget occupies.
Parameters:
-
widget_grid_dataObjectThe grid coords object that represents the widget.
-
colObjectThe col to check.
-
rowObjectThe row to check.
-
[max_row]Number optionalThe max row allowed.
Returns:
disable
()
Class
Disables dragging.
Returns:
draggable
()
Class
Make widgets draggable.
Returns:
empty_cells
-
col -
row -
size_x -
size_y -
$exclude
Move down widgets in cells represented by the arguments col, row, sizex, sizey
Parameters:
Returns:
empty_cells_player_occupies
()
Class
Remove from the array of mapped positions the reference to the player.
Returns:
enable
()
Class
Enables dragging.
Returns:
for_each_cell_occupied
-
el_grid_data -
callback
Iterate over the cells occupied by a widget executing a function for each one.
Parameters:
-
el_grid_dataObjectThe grid coords object that represents the widget.
-
callbackFunctionThe function to execute on each column iteration. Column and row are passed as arguments.
Returns:
for_each_column_occupied
-
el_grid_data -
callback
Iterate over the columns occupied by a widget executing a function for each one.
Parameters:
-
el_grid_dataObjectThe grid coords object that represents the widget.
-
callbackFunctionThe function to execute on each column iteration. The column number is passed as first argument.
Returns:
for_each_row_occupied
-
el_grid_data -
callback
Iterate over the rows occupied by a widget executing a function for each one.
Parameters:
-
el_grid_dataObjectThe grid coords object that represents the widget.
-
callbackFunctionThe function to execute on each column iteration. The row number is passed as first argument.
Returns:
for_each_widget_above
-
col -
row -
callback
Iterate over each widget above the column and row specified.
Parameters:
Returns:
for_each_widget_below
-
col -
row -
callback
Iterate over each widget below the column and row specified.
Parameters:
Returns:
generate_faux_grid
-
rows -
cols
Generates a faux grid to collide with it when a widget is dragged and detect row or column that we want to go.
Returns:
generate_grid_and_stylesheet
()
Object
Calculate columns and rows to be set based on the configuration parameters, grid dimensions, etc ...
Returns:
generate_stylesheet
-
rows -
cols
It generates the neccessary styles to position the widgets.
Returns:
get_cells_occupied
-
el_grid_data
Get all columns and rows that a widget occupies.
Parameters:
-
el_grid_dataObjectThe grid coords object of the widget.
Returns:
{ cols: [], rows: []}.
get_highest_occupied_cell
()
Object
Returns the highest occupied cell in the grid.
Returns:
col and row numbers.
get_targeted_columns
-
[from_col]
Given the leftmost column returns all columns that are overlapping with the player.
Parameters:
-
[from_col]Number optionalThe leftmost column.
Returns:
get_targeted_rows
-
[from_row]
Given the upper row returns all rows that are overlapping with the player.
Parameters:
-
[from_row]Number optionalThe upper row.
Returns:
get_valid_rows
-
widget_grid_data -
upper_rows -
min_row
Search a valid row for the widget represented by widget_grid_data' in
theupperrowsarray. Iteration starts from row specified inminrow`.
Parameters:
-
widget_grid_dataObjectThe actual grid coords object of the player.
-
upper_rowsArrayAn array with columns as index and arrays of valid rows as values.
-
min_rowNumberThe upper row from which the iteration will start.
Returns:
upper_rows
for the widget in question.
get_widgets_from_DOM
()
Object
Get all widgets in the DOM and register them.
Returns:
get_widgets_overlapped
()
HTMLElements
Get widgets overlapping with the player.
Returns:
get_widgets_under_player
()
HTMLElement
Get widgets overlapping with the player or with the object passed representing the grid cells.
Returns:
is_empty
-
col -
row
Determines if the cell represented by col and row params is empty.
Returns:
is_occupied
-
col -
row
Determines if the cell represented by col and row params is occupied.
Returns:
is_placeholder_in
-
col -
row
Determines if the placeholder is currently over the row and col given.
Returns:
is_placeholder_in_col
-
col
Determines if the placeholder is currently over the column given.
Parameters:
-
colNumberThe column to check.
Returns:
is_player
-
col_or_el -
[row]
Determines if there is a widget in the row and col given. Or if the HTMLElement passed as first argument is the player.
Parameters:
Returns:
is_player_in
-
col -
row
Determines if the widget that is being dragged is currently over the row and col given.
Returns:
is_widget
-
col -
row
Determines if there is a widget in the cell represented by col/row params.
Returns:
is_widget_under_player
-
col -
row
Determines if there is a widget in the cell represented by col/row params and if this is under the widget that is being dragged.
Returns:
manage_movements
-
$widgets -
to_col -
to_row
Sorts an Array of grid coords objects (representing the grid coords of each widget) in descending way.
Parameters:
Returns:
move_widget_down
-
$widget -
The
Move down the specified widget and all below it.
Parameters:
-
$widgetHTMLElementThe jQuery object representing the widget you want to move.
-
TheNumbernumber of cells that the widget has to move.
Returns:
move_widget_to
-
$widget
Move a widget to a specific row. The cell or cells must be empty. If the widget has widgets below, all of these widgets will be moved also if they can.
Parameters:
-
$widgetHTMLElementThe jQuery wrapped HTMLElement of the widget is going to be moved.
Returns:
move_widget_up
-
$widget -
[y_units]
Move up the specified widget and all below it.
Parameters:
-
$widgetHTMLElementThe widget you want to move.
-
[y_units]Number optionalThe number of cells that the widget has to move.
Returns:
next_position
-
size_x -
size_y
Get the most left column below to add a new widget.
Parameters:
Returns:
on_drag
-
The -
A
This function is executed when the player is being dragged.
Parameters:
-
TheEventoriginal browser event
-
AObjectprepared ui object.
on_overlapped_column_change
-
start_callback -
stop_callback
Executes the callbacks passed as arguments when a column begins to be overlapped or stops being overlapped.
Parameters:
-
start_callbackFunctionFunction executed when a new column begins to be overlapped. The column is passed as first argument.
-
stop_callbackFunctionFunction executed when a column stops being overlapped. The column is passed as first argument.
Returns:
on_overlapped_row_change
-
start_callback -
stop_callback
Executes the callbacks passed as arguments when a row starts to be overlapped or stops being overlapped.
Parameters:
-
start_callbackFunctionFunction executed when a new row begins to be overlapped. The row is passed as first argument.
-
stop_callbackFunctionFunction executed when a row stops being overlapped. The row is passed as first argument.
Returns:
on_start_drag
-
The -
A
This function is executed when the player begins to be dragged.
Parameters:
-
TheEventoriginal browser event
-
AObjectprepared ui object.
on_start_overlapping_column
-
col
This callback is executed when the player begins to collide with a column.
Parameters:
-
colNumberThe collided column.
Returns:
on_start_overlapping_row
-
col
A callback executed when the player begins to collide with a row.
Parameters:
-
colNumberThe collided row.
Returns:
on_stop_drag
-
The -
A
This function is executed when the player stops being dragged.
Parameters:
-
TheEventoriginal browser event
-
AObjectprepared ui object.
on_stop_overlapping_column
-
col
A callback executed when the the player ends to collide with a column.
Parameters:
-
colNumberThe collided row.
Returns:
on_stop_overlapping_row
-
row
This callback is executed when the player ends to collide with a row.
Parameters:
-
rowNumberThe collided row.
Returns:
recalculate_faux_grid
()
Object
Recalculates the offsets for the faux grid. You need to use it when the browser is resized.
Returns:
register_widget
()
Array
Creates the grid coords object representing the widget a add it to the mapped array of positions.
Returns:
remove_all_widgets
-
callback
Remove all widgets from the grid.
Parameters:
-
callbackFunctionFunction executed for each widget removed.
Returns:
remove_empty_cells
-
col -
row -
size_x -
size_y -
$exclude
Move up widgets below cells represented by the arguments col, row, sizex, sizey.
Parameters:
Returns:
remove_from_gridmap
-
grid_data
Remove a widget from the mapped array of positions.
Parameters:
-
grid_dataObjectThe grid coords object representing the cells to update in the mapped array.
Returns:
remove_widget
-
el -
silent -
callback
Remove a widget from the grid.
Parameters:
-
elHTMLElementThe jQuery wrapped HTMLElement you want to remove.
-
silentBoolean | FunctionIf true, widgets below the removed one will not move up. If a Function is passed it will be used as callback.
-
callbackFunctionFunction executed when the widget is removed.
Returns:
resize_widget
-
$widget -
size_x -
size_y
Change the size of a widget.
Parameters:
Returns:
serialize
-
[$widgets]
Returns a serialized array of the widgets in the grid.
Parameters:
-
[$widgets]HTMLElement optionalThe collection of jQuery wrapped HTMLElements you want to serialize. If no argument is passed all widgets will be serialized.
Returns:
serialize_changed
()
Array
Returns a serialized array of the widgets that have changed their position.
Returns:
set_cells_player_occupies
-
col -
col
Update the array of mapped positions with the new player position.
Returns:
set_dom_grid_height
()
Object
Set the current height of the parent grid.
Returns:
set_placeholder
-
col -
row
Put placeholder at the row and column specified.
Parameters:
Returns:
set_player
-
start_callback -
stop_callback
Sets the current position of the player
Parameters:
-
start_callbackFunctionFunction executed when a new row begins to be overlapped. The row is passed as first argument.
-
stop_callbackFunctionFunction executed when a row stops being overlapped. The row is passed as first argument.
Returns:
sort_by_col_asc
-
widgets
Sorts an Array of grid coords objects by column (representing the grid coords of each widget) in ascending way.
Parameters:
-
widgetsArrayArray of grid coords objects
Returns:
sort_by_row_and_col_asc
-
widgets
Sorts an Array of grid coords objects (representing the grid coords of each widget) placing first the empty cells upper left.
Parameters:
-
widgetsArrayArray of grid coords objects
Returns:
sort_by_row_asc
-
widgets
Sorts an Array of grid coords objects (representing the grid coords of each widget) in ascending way.
Parameters:
-
widgetsArrayArray of grid coords objects
Returns:
sort_by_row_desc
-
widgets
Sorts an Array of grid coords objects (representing the grid coords of each widget) in descending way.
Parameters:
-
widgetsArrayArray of grid coords objects
Returns:
update_widget_position
-
grid_data -
value
Update in the mapped array of positions the value of cells represented by
the grid coords object passed in the grid_data param.
Parameters:
-
grid_dataObjectThe grid coords object representing the cells to update in the mapped array.
-
valueHTMLElement | BooleanPass
falseor the jQuery wrapped HTMLElement, depends if you want to delete an existing position or add a new one.
Returns:
widgets_below
-
$el
Get widgets below a widget.
Parameters:
-
$elHTMLElementThe jQuery wrapped HTMLElement.
Returns:
widgets_contraints
-
$widgets
See which of the widgets in the $widgets param collection can go to a upper row and which not.
Parameters:
-
$widgetsHTMLElementsA jQuery wrapped collection of HTMLElements.
Returns:
can_go_up &
can_not_go_up. Each contains a set of HTMLElements.
