gridster.js
gridster.js copied to clipboard
on_stop_resize function doesn't seem to honor $changed.
This is my code (coffeescript):
updateElements = =>
changedElements = @gridster.serialize_changed()
console.log 'Changed elements', changedElements
#...
@gridster = $(".gridster ul").gridster({
widget_base_dimensions: ['auto', 140],
autogenerate_stylesheet: true,
min_cols: 1,
max_cols: 12,
widget_margins: [8, 8],
serialize_params: ($w, wgd) ->
return {
col: wgd.col
row: wgd.row
size_x: wgd.size_x
size_y: wgd.size_y
id: $w.attr('data-kpi-key')
}
resize: {
enabled: true
stop: updateElements
}
draggable: {
stop: updateElements
}
}).data('gridster')
I check changed elements on two events: resize.stop and draggable.stop. Then in the callback I call .serialize_changed() function to see which elements have changed after the resize or drag. This is all done to persist the grid of my widgets into the database upon any change.
When draggable.stop event occurs the serialize_changed() functions correctly returns all elements that have been relocated. However, on resize.stop event it doesn't always work. When it was only the resized element that changed (no other elements moved due to the resize) - the serialize_changed() returns [].
I tried to dig it up but so far I can only found that there is:
fn.on_stop_drag = function (event, ui) {
...
this.$changed = this.$changed.add(this.$player);
...
but not in fn.on_stop_resize
I will continue looking, but perhaps it is me doing something wrong? I can of course just use serialize() method and reupdate all widget positions in the database, but I would prefer updating only changed ones.
One more thing - it seems that array of changed objects persists between changes. So, basically, it only grows when there are more and more changed elements.