nicolas/librenms
1
0
Fork 0
mirror of https://github.com/stylersnico/librenms.git synced 2026-07-27 00:25:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add new demo page and allow two new features based on Issue #6:

Browse Source 
- delay moving components until drag is complete
- allow exact position of grid components (do not move up)
This commit is contained in:
Eric Johnson
2015-05-18 02:28:57 -06:00
committed by David Morse
parent 4d946ead88
commit 0a7ae2ee99
10 changed files with 319 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demos/SwapDrop.html
+1 -1
View File
@@ -7,7 +7,7 @@
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var gridster = "";
demos/index.html
+1
View File
@@ -31,6 +31,7 @@
<li><a href="dynamic-grid-width.html">Dynamic grid width</a></li>
<li><a href="responsive.html">Responsive grid width</a></li>
<li><a href="SwapDrop.html">Grid with larger widgets swapping spots with smaller ones</a></li>
<li><a href="sticky-postion.html">Grid that allows widgets to be exactly placed anywhere</a></li>
</ul>
demos/sticky-postion.html
+51
View File
@@ -0,0 +1,51 @@
<!doctype html>
<html>
<head>
<title>Demo &raquo; sticky position widgets &raquo; gridster.js</title>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Sticky position widgets</h1>
<p>Widgets can be moved to an exact postion on the grid and the grid will not attempt to collapse it down to a smaller size. Also widgets will not move out of the way automatically, but will move only on mouse up</p>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">0</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">1</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">2</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">3</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">4</li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">5</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">6</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">7</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">8</li>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1">9</li>
<li data-row="3" data-col="3" data-sizex="1" data-sizey="1">10</li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1">11</li>
</ul>
</div>
<script type="text/javascript">
var gridster;
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
shift_widgets_up: false,
shift_larger_widgets_down: false,
collision: {
wait_for_mouseup: true
}
}).data('gridster');
</script>
</body>
</html>
dist/jquery.gridster.css
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.6.8 - 2015-05-13
/*! gridster.js - v0.6.8 - 2015-05-18
* http://gridster.net/
* Copyright (c) 2015 ducksboard; Licensed MIT */
dist/jquery.gridster.js
Vendored
+87 -53
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.6.8 - 2015-05-13
/*! gridster.js - v0.6.8 - 2015-05-18
* http://gridster.net/
* Copyright (c) 2015 ducksboard; Licensed MIT */
@@ -934,6 +934,7 @@
responsive_breakpoint: false,
scroll_container: window,
shift_larger_widgets_down: true,
shift_widgets_up: true,
serialize_params: function ($w, wgd) {
return {
col: wgd.col,
@@ -942,7 +943,9 @@
size_y: wgd.size_y
};
},
collision: {},
collision: {
wait_for_mouseup: false
},
draggable: {
items: '.gs-w:not(.static)',
distance: 4,
@@ -997,9 +1000,17 @@
* for each widget in the serialization. Two arguments are passed:
* `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid
* coords object (`col`, `row`, `size_x`, `size_y`).
* @param {Boolean} [options.shift_larger_widgets_down] Determines if how widgets get pushes
* out of the way of the player. If set to false smaller widgets will not move larger
* widgets out of their way . Defaults to true.
* @param {Boolean} [options.shift_widgets_up] Determines if the player will automatically
* condense the grid and not allow a widget to have space above it. Defaults to true.
* @param {Object} [options.collision] An Object with all options for
* Collision class you want to overwrite. See Collision docs for
* more info.
* @param {Boolean} [options.collision.wait_for_mouseup] Default is false.
* If true then it will not move colliding widgets during drag, but only on
* mouseup.
* @param {Object} [options.draggable] An Object with all options for
* Draggable class you want to overwrite. See Draggable docs for more
* info.
@@ -2409,7 +2420,6 @@
this.on_overlapped_row_change(
this.on_start_overlapping_row, this.on_stop_overlapping_row);
if (this.helper && this.$player) {
this.$player.css({
'left': ui.position.left,
@@ -2449,29 +2459,36 @@
this.on_stop_overlapping_row
);
this.$player.addClass('player-revert').removeClass('player')
.attr({
'data-col': this.placeholder_grid_data.col,
'data-row': this.placeholder_grid_data.row
}).css({
'left': '',
'top': ''
});
this.$changed = this.$changed.add(this.$player);
this.cells_occupied_by_player = this.get_cells_occupied(
this.placeholder_grid_data);
this.set_cells_player_occupies(
this.placeholder_grid_data.col, this.placeholder_grid_data.row);
this.cells_occupied_by_player = this.get_cells_occupied(this.placeholder_grid_data);
this.$player.coords().grid.row = this.placeholder_grid_data.row;
this.$player.coords().grid.col = this.placeholder_grid_data.col;
var col = this.placeholder_grid_data.col;
var row = this.placeholder_grid_data.row;
var widgetsIncell = this.get_widgets_at_cell(col,row);
if (widgetsIncell.length > 0) {
this.move_widget_down(widgetsIncell, this.placeholder_grid_data.size_y);
}
this.set_cells_player_occupies(col, row);
this.$player.coords().grid.row = row;
this.$player.coords().grid.col = col;
if (this.options.draggable.stop) {
this.options.draggable.stop.call(this, event, ui);
}
this.$player.addClass('player-revert').removeClass('player')
.attr({
'data-col': col,
'data-row': row
}).css({
'left': '',
'top': ''
});
this.$preview_holder.remove();
this.$player = null;
@@ -2801,8 +2818,7 @@
this.cells_occupied_by_placeholder = this.get_cells_occupied(
this.placeholder_grid_data);
var $overlapped_widgets = this.get_widgets_overlapped(
this.player_grid_data);
var $overlapped_widgets = this.get_widgets_overlapped(this.player_grid_data);
var player_size_y = this.player_grid_data.size_y;
var player_size_x = this.player_grid_data.size_x;
@@ -2820,7 +2836,20 @@
//next iteration
return true;
}
if (wgd.size_x <= player_size_x && wgd.size_y <= player_size_y) {
if ($gr.options.collision.wait_for_mouseup && $gr.drag_api.is_dragging){
//skip the swap and just 'move' the place holder
swap = true;
$gr.placeholder_grid_data.col = to_col;
$gr.placeholder_grid_data.row = to_row;
$gr.cells_occupied_by_placeholder = $gr.get_cells_occupied(
$gr.placeholder_grid_data);
$gr.$preview_holder.attr({
'data-row': to_row,
'data-col': to_col
});
} else if (wgd.size_x <= player_size_x && wgd.size_y <= player_size_y) {
if (!$gr.is_swap_occupied(placeholder_cells.cols[0], wgd.row, wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0], wgd.row) && !$gr.is_in_queue(placeholder_cells.cols[0], wgd.row, $w)) {
swap = $gr.queue_widget(placeholder_cells.cols[0], wgd.row, $w);
}
@@ -2833,7 +2862,7 @@
else if (!$gr.is_swap_occupied(wgd.col, outside_row, wgd.size_x, wgd.size_y) && !$gr.is_player_in(wgd.col, outside_row) && !$gr.is_in_queue(wgd.col, outside_row, $w)) {
swap = $gr.queue_widget(wgd.col, outside_row, $w);
}
else if (!$gr.is_swap_occupied(placeholder_cells.cols[0], placeholder_cells.rows[0], wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0], placeholder_cells.rows[0]) && !$gr.is_in_queue(placeholder_cells.cols[0], placeholder_cells.rows[0], $w)) {
else if ($gr.options.collision.wait_for_mouseup || (!$gr.is_swap_occupied(placeholder_cells.cols[0], placeholder_cells.rows[0], wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0], placeholder_cells.rows[0]) && !$gr.is_in_queue(placeholder_cells.cols[0], placeholder_cells.rows[0], $w))) {
swap = $gr.queue_widget(placeholder_cells.cols[0], placeholder_cells.rows[0], $w);
} else {
//in one last attempt we check for any other empty spaces
@@ -2887,9 +2916,11 @@
/* if there is not widgets overlapping in the new player position,
* update the new placeholder position. */
if (!$overlapped_widgets.length) {
var pp = this.can_go_player_up(this.player_grid_data);
if (pp !== false) {
to_row = pp;
if (this.shift_widgets_up) {
var pp = this.can_go_player_up(this.player_grid_data);
if (pp !== false) {
to_row = pp;
}
}
if (this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)) {
this.set_placeholder(to_col, to_row);
@@ -3342,12 +3373,6 @@
*/
fn.set_placeholder = function (col, row) {
var phgd = $.extend({}, this.placeholder_grid_data);
var $nexts = this.widgets_below({
col: phgd.col,
row: phgd.row,
size_y: phgd.size_y,
size_x: phgd.size_x
});
// Prevents widgets go out of the grid
var right_col = (col + phgd.size_x - 1);
@@ -3369,30 +3394,40 @@
'data-col': col
});
if (moved_down || changed_column) {
$nexts.each($.proxy(function (i, widget) {
//Make sure widget is at it's topmost position
var $w = $(widget);
var wgd = $w.coords().grid;
if (this.options.shift_player_up) {
if (moved_down || changed_column) {
var can_go_widget_up = this.can_go_widget_up(wgd);
var $nexts = this.widgets_below({
col: phgd.col,
row: phgd.row,
size_y: phgd.size_y,
size_x: phgd.size_x
});
if (can_go_widget_up) {
this.move_widget_to($w, can_go_widget_up);
}
$nexts.each($.proxy(function (i, widget) {
//Make sure widget is at it's topmost position
var $w = $(widget);
var wgd = $w.coords().grid;
}, this));
}
var can_go_widget_up = this.can_go_widget_up(wgd);
var $widgets_under_ph = this.get_widgets_under_player(
this.cells_occupied_by_placeholder);
if (can_go_widget_up) {
this.move_widget_to($w, can_go_widget_up);
}
if ($widgets_under_ph.length) {
$widgets_under_ph.each($.proxy(function (i, widget) {
var $w = $(widget);
this.move_widget_down(
$w, row + phgd.size_y - $w.data('coords').grid.row);
}, this));
}, this));
}
var $widgets_under_ph = this.get_widgets_under_player(
this.cells_occupied_by_placeholder);
if ($widgets_under_ph.length) {
$widgets_under_ph.each($.proxy(function (i, widget) {
var $w = $(widget);
this.move_widget_down(
$w, row + phgd.size_y - $w.data('coords').grid.row);
}, this));
}
}
};
@@ -3627,7 +3662,7 @@
* @return {jQuery} Returns a jQuery collection of HTMLElements.
*/
fn.on_start_overlapping_column = function (col) {
this.set_player(col, false);
this.set_player(col, undefined , false);
};
@@ -3639,7 +3674,7 @@
* @return {jQuery} Returns a jQuery collection of HTMLElements.
*/
fn.on_start_overlapping_row = function (row) {
this.set_player(false, row);
this.set_player(undefined, row, false);
};
@@ -3677,7 +3712,6 @@
/*jshint -W083 */
for (var c = 0, cl = cols.length; c < cl; c++) {
this.for_each_widget_below(cols[c], row, function (tcol, trow) {
console.log('from_on_stop_overlapping_row');
self.move_widget_up(this, self.player_grid_data.size_y);
});
}
dist/jquery.gridster.min.css
Vendored
+1 -1
View File
@@ -1,2 +1,2 @@
/*! gridster.js - v0.6.8 - 2015-05-13 - * http://gridster.net/ - Copyright (c) 2015 ducksboard; Licensed MIT */
/*! gridster.js - v0.6.8 - 2015-05-18 - * http://gridster.net/ - Copyright (c) 2015 ducksboard; Licensed MIT */
.gridster{position:relative}.gridster>*{-webkit-transition:height .4s,width .4s;-moz-transition:height .4s,width .4s;-o-transition:height .4s,width .4s;-ms-transition:height .4s,width .4s;transition:height .4s,width .4s}.gridster .gs-w{z-index:2;position:absolute}.gridster.collapsed{height:auto!important}.gridster.collapsed .gs-w{position:static!important}.ready .gs-w:not(.preview-holder),.ready .resize-preview-holder{-webkit-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-moz-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-o-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;transition:opacity .3s,left .3s,top .3s,width .3s,height .3s}.gridster .preview-holder{z-index:1;position:absolute;background-color:#fff;border-color:#fff;opacity:.3}.gridster .player-revert{z-index:10!important;-webkit-transition:left .3s,top .3s!important;-moz-transition:left .3s,top .3s!important;-o-transition:left .3s,top .3s!important;transition:left .3s,top .3s!important}.gridster .dragging,.gridster .resizing{z-index:10!important;-webkit-transition:all 0s!important;-moz-transition:all 0s!important;-o-transition:all 0s!important;transition:all 0s!important}.gs-resize-handle{position:absolute;z-index:1}.gs-resize-handle-both{width:20px;height:20px;bottom:-8px;right:-8px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=);background-position:top left;background-repeat:no-repeat;cursor:se-resize;z-index:20}.gs-resize-handle-x{top:0;bottom:13px;right:-5px;width:10px;cursor:e-resize}.gs-resize-handle-y{left:0;right:13px;bottom:-5px;height:10px;cursor:s-resize}.gs-w:hover .gs-resize-handle,.resizing .gs-resize-handle{opacity:1}.gs-resize-handle,.gs-w.dragging .gs-resize-handle{opacity:0}.gs-resize-disabled .gs-resize-handle,[data-max-sizex="1"] .gs-resize-handle-x,[data-max-sizey="1"] .gs-resize-handle-y,[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle{display:none!important}
dist/jquery.gridster.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
dist/jquery.gridster.with-extras.js
Vendored
+87 -53
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.6.8 - 2015-05-13
/*! gridster.js - v0.6.8 - 2015-05-18
* http://gridster.net/
* Copyright (c) 2015 ducksboard; Licensed MIT */
@@ -934,6 +934,7 @@
responsive_breakpoint: false,
scroll_container: window,
shift_larger_widgets_down: true,
shift_widgets_up: true,
serialize_params: function ($w, wgd) {
return {
col: wgd.col,
@@ -942,7 +943,9 @@
size_y: wgd.size_y
};
},
collision: {},
collision: {
wait_for_mouseup: false
},
draggable: {
items: '.gs-w:not(.static)',
distance: 4,
@@ -997,9 +1000,17 @@
* for each widget in the serialization. Two arguments are passed:
* `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid
* coords object (`col`, `row`, `size_x`, `size_y`).
* @param {Boolean} [options.shift_larger_widgets_down] Determines if how widgets get pushes
* out of the way of the player. If set to false smaller widgets will not move larger
* widgets out of their way . Defaults to true.
* @param {Boolean} [options.shift_widgets_up] Determines if the player will automatically
* condense the grid and not allow a widget to have space above it. Defaults to true.
* @param {Object} [options.collision] An Object with all options for
* Collision class you want to overwrite. See Collision docs for
* more info.
* @param {Boolean} [options.collision.wait_for_mouseup] Default is false.
* If true then it will not move colliding widgets during drag, but only on
* mouseup.
* @param {Object} [options.draggable] An Object with all options for
* Draggable class you want to overwrite. See Draggable docs for more
* info.
@@ -2409,7 +2420,6 @@
this.on_overlapped_row_change(
this.on_start_overlapping_row, this.on_stop_overlapping_row);
if (this.helper && this.$player) {
this.$player.css({
'left': ui.position.left,
@@ -2449,29 +2459,36 @@
this.on_stop_overlapping_row
);
this.$player.addClass('player-revert').removeClass('player')
.attr({
'data-col': this.placeholder_grid_data.col,
'data-row': this.placeholder_grid_data.row
}).css({
'left': '',
'top': ''
});
this.$changed = this.$changed.add(this.$player);
this.cells_occupied_by_player = this.get_cells_occupied(
this.placeholder_grid_data);
this.set_cells_player_occupies(
this.placeholder_grid_data.col, this.placeholder_grid_data.row);
this.cells_occupied_by_player = this.get_cells_occupied(this.placeholder_grid_data);
this.$player.coords().grid.row = this.placeholder_grid_data.row;
this.$player.coords().grid.col = this.placeholder_grid_data.col;
var col = this.placeholder_grid_data.col;
var row = this.placeholder_grid_data.row;
var widgetsIncell = this.get_widgets_at_cell(col,row);
if (widgetsIncell.length > 0) {
this.move_widget_down(widgetsIncell, this.placeholder_grid_data.size_y);
}
this.set_cells_player_occupies(col, row);
this.$player.coords().grid.row = row;
this.$player.coords().grid.col = col;
if (this.options.draggable.stop) {
this.options.draggable.stop.call(this, event, ui);
}
this.$player.addClass('player-revert').removeClass('player')
.attr({
'data-col': col,
'data-row': row
}).css({
'left': '',
'top': ''
});
this.$preview_holder.remove();
this.$player = null;
@@ -2801,8 +2818,7 @@
this.cells_occupied_by_placeholder = this.get_cells_occupied(
this.placeholder_grid_data);
var $overlapped_widgets = this.get_widgets_overlapped(
this.player_grid_data);
var $overlapped_widgets = this.get_widgets_overlapped(this.player_grid_data);
var player_size_y = this.player_grid_data.size_y;
var player_size_x = this.player_grid_data.size_x;
@@ -2820,7 +2836,20 @@
//next iteration
return true;
}
if (wgd.size_x <= player_size_x && wgd.size_y <= player_size_y) {
if ($gr.options.collision.wait_for_mouseup && $gr.drag_api.is_dragging){
//skip the swap and just 'move' the place holder
swap = true;
$gr.placeholder_grid_data.col = to_col;
$gr.placeholder_grid_data.row = to_row;
$gr.cells_occupied_by_placeholder = $gr.get_cells_occupied(
$gr.placeholder_grid_data);
$gr.$preview_holder.attr({
'data-row': to_row,
'data-col': to_col
});
} else if (wgd.size_x <= player_size_x && wgd.size_y <= player_size_y) {
if (!$gr.is_swap_occupied(placeholder_cells.cols[0], wgd.row, wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0], wgd.row) && !$gr.is_in_queue(placeholder_cells.cols[0], wgd.row, $w)) {
swap = $gr.queue_widget(placeholder_cells.cols[0], wgd.row, $w);
}
@@ -2833,7 +2862,7 @@
else if (!$gr.is_swap_occupied(wgd.col, outside_row, wgd.size_x, wgd.size_y) && !$gr.is_player_in(wgd.col, outside_row) && !$gr.is_in_queue(wgd.col, outside_row, $w)) {
swap = $gr.queue_widget(wgd.col, outside_row, $w);
}
else if (!$gr.is_swap_occupied(placeholder_cells.cols[0], placeholder_cells.rows[0], wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0], placeholder_cells.rows[0]) && !$gr.is_in_queue(placeholder_cells.cols[0], placeholder_cells.rows[0], $w)) {
else if ($gr.options.collision.wait_for_mouseup || (!$gr.is_swap_occupied(placeholder_cells.cols[0], placeholder_cells.rows[0], wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0], placeholder_cells.rows[0]) && !$gr.is_in_queue(placeholder_cells.cols[0], placeholder_cells.rows[0], $w))) {
swap = $gr.queue_widget(placeholder_cells.cols[0], placeholder_cells.rows[0], $w);
} else {
//in one last attempt we check for any other empty spaces
@@ -2887,9 +2916,11 @@
/* if there is not widgets overlapping in the new player position,
* update the new placeholder position. */
if (!$overlapped_widgets.length) {
var pp = this.can_go_player_up(this.player_grid_data);
if (pp !== false) {
to_row = pp;
if (this.shift_widgets_up) {
var pp = this.can_go_player_up(this.player_grid_data);
if (pp !== false) {
to_row = pp;
}
}
if (this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)) {
this.set_placeholder(to_col, to_row);
@@ -3342,12 +3373,6 @@
*/
fn.set_placeholder = function (col, row) {
var phgd = $.extend({}, this.placeholder_grid_data);
var $nexts = this.widgets_below({
col: phgd.col,
row: phgd.row,
size_y: phgd.size_y,
size_x: phgd.size_x
});
// Prevents widgets go out of the grid
var right_col = (col + phgd.size_x - 1);
@@ -3369,30 +3394,40 @@
'data-col': col
});
if (moved_down || changed_column) {
$nexts.each($.proxy(function (i, widget) {
//Make sure widget is at it's topmost position
var $w = $(widget);
var wgd = $w.coords().grid;
if (this.options.shift_player_up) {
if (moved_down || changed_column) {
var can_go_widget_up = this.can_go_widget_up(wgd);
var $nexts = this.widgets_below({
col: phgd.col,
row: phgd.row,
size_y: phgd.size_y,
size_x: phgd.size_x
});
if (can_go_widget_up) {
this.move_widget_to($w, can_go_widget_up);
}
$nexts.each($.proxy(function (i, widget) {
//Make sure widget is at it's topmost position
var $w = $(widget);
var wgd = $w.coords().grid;
}, this));
}
var can_go_widget_up = this.can_go_widget_up(wgd);
var $widgets_under_ph = this.get_widgets_under_player(
this.cells_occupied_by_placeholder);
if (can_go_widget_up) {
this.move_widget_to($w, can_go_widget_up);
}
if ($widgets_under_ph.length) {
$widgets_under_ph.each($.proxy(function (i, widget) {
var $w = $(widget);
this.move_widget_down(
$w, row + phgd.size_y - $w.data('coords').grid.row);
}, this));
}, this));
}
var $widgets_under_ph = this.get_widgets_under_player(
this.cells_occupied_by_placeholder);
if ($widgets_under_ph.length) {
$widgets_under_ph.each($.proxy(function (i, widget) {
var $w = $(widget);
this.move_widget_down(
$w, row + phgd.size_y - $w.data('coords').grid.row);
}, this));
}
}
};
@@ -3627,7 +3662,7 @@
* @return {jQuery} Returns a jQuery collection of HTMLElements.
*/
fn.on_start_overlapping_column = function (col) {
this.set_player(col, false);
this.set_player(col, undefined , false);
};
@@ -3639,7 +3674,7 @@
* @return {jQuery} Returns a jQuery collection of HTMLElements.
*/
fn.on_start_overlapping_row = function (row) {
this.set_player(false, row);
this.set_player(undefined, row, false);
};
@@ -3677,7 +3712,6 @@
/*jshint -W083 */
for (var c = 0, cl = cols.length; c < cl; c++) {
this.for_each_widget_below(cols[c], row, function (tcol, trow) {
console.log('from_on_stop_overlapping_row');
self.move_widget_up(this, self.player_grid_data.size_y);
});
}
dist/jquery.gridster.with-extras.min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
src/jquery.gridster.js
+86 -52
View File
@@ -40,6 +40,7 @@
responsive_breakpoint: false,
scroll_container: window,
shift_larger_widgets_down: true,
shift_widgets_up: true,
serialize_params: function ($w, wgd) {
return {
col: wgd.col,
@@ -48,7 +49,9 @@
size_y: wgd.size_y
};
},
collision: {},
collision: {
wait_for_mouseup: false
},
draggable: {
items: '.gs-w:not(.static)',
distance: 4,
@@ -103,9 +106,17 @@
* for each widget in the serialization. Two arguments are passed:
* `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid
* coords object (`col`, `row`, `size_x`, `size_y`).
* @param {Boolean} [options.shift_larger_widgets_down] Determines if how widgets get pushes
* out of the way of the player. If set to false smaller widgets will not move larger
* widgets out of their way . Defaults to true.
* @param {Boolean} [options.shift_widgets_up] Determines if the player will automatically
* condense the grid and not allow a widget to have space above it. Defaults to true.
* @param {Object} [options.collision] An Object with all options for
* Collision class you want to overwrite. See Collision docs for
* more info.
* @param {Boolean} [options.collision.wait_for_mouseup] Default is false.
* If true then it will not move colliding widgets during drag, but only on
* mouseup.
* @param {Object} [options.draggable] An Object with all options for
* Draggable class you want to overwrite. See Draggable docs for more
* info.
@@ -1515,7 +1526,6 @@
this.on_overlapped_row_change(
this.on_start_overlapping_row, this.on_stop_overlapping_row);
if (this.helper && this.$player) {
this.$player.css({
'left': ui.position.left,
@@ -1555,29 +1565,36 @@
this.on_stop_overlapping_row
);
this.$player.addClass('player-revert').removeClass('player')
.attr({
'data-col': this.placeholder_grid_data.col,
'data-row': this.placeholder_grid_data.row
}).css({
'left': '',
'top': ''
});
this.$changed = this.$changed.add(this.$player);
this.cells_occupied_by_player = this.get_cells_occupied(
this.placeholder_grid_data);
this.set_cells_player_occupies(
this.placeholder_grid_data.col, this.placeholder_grid_data.row);
this.cells_occupied_by_player = this.get_cells_occupied(this.placeholder_grid_data);
this.$player.coords().grid.row = this.placeholder_grid_data.row;
this.$player.coords().grid.col = this.placeholder_grid_data.col;
var col = this.placeholder_grid_data.col;
var row = this.placeholder_grid_data.row;
var widgetsIncell = this.get_widgets_at_cell(col,row);
if (widgetsIncell.length > 0) {
this.move_widget_down(widgetsIncell, this.placeholder_grid_data.size_y);
}
this.set_cells_player_occupies(col, row);
this.$player.coords().grid.row = row;
this.$player.coords().grid.col = col;
if (this.options.draggable.stop) {
this.options.draggable.stop.call(this, event, ui);
}
this.$player.addClass('player-revert').removeClass('player')
.attr({
'data-col': col,
'data-row': row
}).css({
'left': '',
'top': ''
});
this.$preview_holder.remove();
this.$player = null;
@@ -1907,8 +1924,7 @@
this.cells_occupied_by_placeholder = this.get_cells_occupied(
this.placeholder_grid_data);
var $overlapped_widgets = this.get_widgets_overlapped(
this.player_grid_data);
var $overlapped_widgets = this.get_widgets_overlapped(this.player_grid_data);
var player_size_y = this.player_grid_data.size_y;
var player_size_x = this.player_grid_data.size_x;
@@ -1926,7 +1942,20 @@
//next iteration
return true;
}
if (wgd.size_x <= player_size_x && wgd.size_y <= player_size_y) {
if ($gr.options.collision.wait_for_mouseup && $gr.drag_api.is_dragging){
//skip the swap and just 'move' the place holder
swap = true;
$gr.placeholder_grid_data.col = to_col;
$gr.placeholder_grid_data.row = to_row;
$gr.cells_occupied_by_placeholder = $gr.get_cells_occupied(
$gr.placeholder_grid_data);
$gr.$preview_holder.attr({
'data-row': to_row,
'data-col': to_col
});
} else if (wgd.size_x <= player_size_x && wgd.size_y <= player_size_y) {
if (!$gr.is_swap_occupied(placeholder_cells.cols[0], wgd.row, wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0], wgd.row) && !$gr.is_in_queue(placeholder_cells.cols[0], wgd.row, $w)) {
swap = $gr.queue_widget(placeholder_cells.cols[0], wgd.row, $w);
}
@@ -1939,7 +1968,7 @@
else if (!$gr.is_swap_occupied(wgd.col, outside_row, wgd.size_x, wgd.size_y) && !$gr.is_player_in(wgd.col, outside_row) && !$gr.is_in_queue(wgd.col, outside_row, $w)) {
swap = $gr.queue_widget(wgd.col, outside_row, $w);
}
else if (!$gr.is_swap_occupied(placeholder_cells.cols[0], placeholder_cells.rows[0], wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0], placeholder_cells.rows[0]) && !$gr.is_in_queue(placeholder_cells.cols[0], placeholder_cells.rows[0], $w)) {
else if ($gr.options.collision.wait_for_mouseup || (!$gr.is_swap_occupied(placeholder_cells.cols[0], placeholder_cells.rows[0], wgd.size_x, wgd.size_y) && !$gr.is_player_in(placeholder_cells.cols[0], placeholder_cells.rows[0]) && !$gr.is_in_queue(placeholder_cells.cols[0], placeholder_cells.rows[0], $w))) {
swap = $gr.queue_widget(placeholder_cells.cols[0], placeholder_cells.rows[0], $w);
} else {
//in one last attempt we check for any other empty spaces
@@ -1993,9 +2022,11 @@
/* if there is not widgets overlapping in the new player position,
* update the new placeholder position. */
if (!$overlapped_widgets.length) {
var pp = this.can_go_player_up(this.player_grid_data);
if (pp !== false) {
to_row = pp;
if (this.shift_widgets_up) {
var pp = this.can_go_player_up(this.player_grid_data);
if (pp !== false) {
to_row = pp;
}
}
if (this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)) {
this.set_placeholder(to_col, to_row);
@@ -2448,12 +2479,6 @@
*/
fn.set_placeholder = function (col, row) {
var phgd = $.extend({}, this.placeholder_grid_data);
var $nexts = this.widgets_below({
col: phgd.col,
row: phgd.row,
size_y: phgd.size_y,
size_x: phgd.size_x
});
// Prevents widgets go out of the grid
var right_col = (col + phgd.size_x - 1);
@@ -2475,30 +2500,40 @@
'data-col': col
});
if (moved_down || changed_column) {
$nexts.each($.proxy(function (i, widget) {
//Make sure widget is at it's topmost position
var $w = $(widget);
var wgd = $w.coords().grid;
if (this.options.shift_player_up) {
if (moved_down || changed_column) {
var can_go_widget_up = this.can_go_widget_up(wgd);
var $nexts = this.widgets_below({
col: phgd.col,
row: phgd.row,
size_y: phgd.size_y,
size_x: phgd.size_x
});
if (can_go_widget_up) {
this.move_widget_to($w, can_go_widget_up);
}
$nexts.each($.proxy(function (i, widget) {
//Make sure widget is at it's topmost position
var $w = $(widget);
var wgd = $w.coords().grid;
}, this));
}
var can_go_widget_up = this.can_go_widget_up(wgd);
var $widgets_under_ph = this.get_widgets_under_player(
this.cells_occupied_by_placeholder);
if (can_go_widget_up) {
this.move_widget_to($w, can_go_widget_up);
}
if ($widgets_under_ph.length) {
$widgets_under_ph.each($.proxy(function (i, widget) {
var $w = $(widget);
this.move_widget_down(
$w, row + phgd.size_y - $w.data('coords').grid.row);
}, this));
}, this));
}
var $widgets_under_ph = this.get_widgets_under_player(
this.cells_occupied_by_placeholder);
if ($widgets_under_ph.length) {
$widgets_under_ph.each($.proxy(function (i, widget) {
var $w = $(widget);
this.move_widget_down(
$w, row + phgd.size_y - $w.data('coords').grid.row);
}, this));
}
}
};
@@ -2733,7 +2768,7 @@
* @return {jQuery} Returns a jQuery collection of HTMLElements.
*/
fn.on_start_overlapping_column = function (col) {
this.set_player(col, false);
this.set_player(col, undefined , false);
};
@@ -2745,7 +2780,7 @@
* @return {jQuery} Returns a jQuery collection of HTMLElements.
*/
fn.on_start_overlapping_row = function (row) {
this.set_player(false, row);
this.set_player(undefined, row, false);
};
@@ -2783,7 +2818,6 @@
/*jshint -W083 */
for (var c = 0, cl = cols.length; c < cl; c++) {
this.for_each_widget_below(cols[c], row, function (tcol, trow) {
console.log('from_on_stop_overlapping_row');
self.move_widget_up(this, self.player_grid_data.size_y);
});
}