mirror of
https://github.com/stylersnico/librenms.git
synced 2026-08-02 00:32:09 +02:00
Add new demo page and allow two new features based on Issue #6:
- delay moving components until drag is complete - allow exact position of grid components (do not move up)
This commit is contained in:
committed by
David Morse
parent
4d946ead88
commit
0a7ae2ee99
+1
-1
@@ -7,7 +7,7 @@
|
|||||||
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
|
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
|
||||||
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.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="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">
|
<script type="text/javascript">
|
||||||
var gridster = "";
|
var gridster = "";
|
||||||
|
|||||||
@@ -31,6 +31,7 @@
|
|||||||
<li><a href="dynamic-grid-width.html">Dynamic grid width</a></li>
|
<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="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="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>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,51 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Demo » sticky position widgets » 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>
|
||||||
Vendored
+1
-1
@@ -1,4 +1,4 @@
|
|||||||
/*! gridster.js - v0.6.8 - 2015-05-13
|
/*! gridster.js - v0.6.8 - 2015-05-18
|
||||||
* http://gridster.net/
|
* http://gridster.net/
|
||||||
* Copyright (c) 2015 ducksboard; Licensed MIT */
|
* Copyright (c) 2015 ducksboard; Licensed MIT */
|
||||||
|
|
||||||
|
|||||||
Vendored
+87
-53
@@ -1,4 +1,4 @@
|
|||||||
/*! gridster.js - v0.6.8 - 2015-05-13
|
/*! gridster.js - v0.6.8 - 2015-05-18
|
||||||
* http://gridster.net/
|
* http://gridster.net/
|
||||||
* Copyright (c) 2015 ducksboard; Licensed MIT */
|
* Copyright (c) 2015 ducksboard; Licensed MIT */
|
||||||
|
|
||||||
@@ -934,6 +934,7 @@
|
|||||||
responsive_breakpoint: false,
|
responsive_breakpoint: false,
|
||||||
scroll_container: window,
|
scroll_container: window,
|
||||||
shift_larger_widgets_down: true,
|
shift_larger_widgets_down: true,
|
||||||
|
shift_widgets_up: true,
|
||||||
serialize_params: function ($w, wgd) {
|
serialize_params: function ($w, wgd) {
|
||||||
return {
|
return {
|
||||||
col: wgd.col,
|
col: wgd.col,
|
||||||
@@ -942,7 +943,9 @@
|
|||||||
size_y: wgd.size_y
|
size_y: wgd.size_y
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
collision: {},
|
collision: {
|
||||||
|
wait_for_mouseup: false
|
||||||
|
},
|
||||||
draggable: {
|
draggable: {
|
||||||
items: '.gs-w:not(.static)',
|
items: '.gs-w:not(.static)',
|
||||||
distance: 4,
|
distance: 4,
|
||||||
@@ -997,9 +1000,17 @@
|
|||||||
* for each widget in the serialization. Two arguments are passed:
|
* for each widget in the serialization. Two arguments are passed:
|
||||||
* `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid
|
* `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid
|
||||||
* coords object (`col`, `row`, `size_x`, `size_y`).
|
* 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
|
* @param {Object} [options.collision] An Object with all options for
|
||||||
* Collision class you want to overwrite. See Collision docs for
|
* Collision class you want to overwrite. See Collision docs for
|
||||||
* more info.
|
* 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
|
* @param {Object} [options.draggable] An Object with all options for
|
||||||
* Draggable class you want to overwrite. See Draggable docs for more
|
* Draggable class you want to overwrite. See Draggable docs for more
|
||||||
* info.
|
* info.
|
||||||
@@ -2409,7 +2420,6 @@
|
|||||||
this.on_overlapped_row_change(
|
this.on_overlapped_row_change(
|
||||||
this.on_start_overlapping_row, this.on_stop_overlapping_row);
|
this.on_start_overlapping_row, this.on_stop_overlapping_row);
|
||||||
|
|
||||||
|
|
||||||
if (this.helper && this.$player) {
|
if (this.helper && this.$player) {
|
||||||
this.$player.css({
|
this.$player.css({
|
||||||
'left': ui.position.left,
|
'left': ui.position.left,
|
||||||
@@ -2449,29 +2459,36 @@
|
|||||||
this.on_stop_overlapping_row
|
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.$changed = this.$changed.add(this.$player);
|
||||||
|
|
||||||
this.cells_occupied_by_player = this.get_cells_occupied(
|
this.cells_occupied_by_player = this.get_cells_occupied(this.placeholder_grid_data);
|
||||||
this.placeholder_grid_data);
|
|
||||||
this.set_cells_player_occupies(
|
|
||||||
this.placeholder_grid_data.col, this.placeholder_grid_data.row);
|
|
||||||
|
|
||||||
this.$player.coords().grid.row = this.placeholder_grid_data.row;
|
var col = this.placeholder_grid_data.col;
|
||||||
this.$player.coords().grid.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) {
|
if (this.options.draggable.stop) {
|
||||||
this.options.draggable.stop.call(this, event, ui);
|
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.$preview_holder.remove();
|
||||||
|
|
||||||
this.$player = null;
|
this.$player = null;
|
||||||
@@ -2801,8 +2818,7 @@
|
|||||||
this.cells_occupied_by_placeholder = this.get_cells_occupied(
|
this.cells_occupied_by_placeholder = this.get_cells_occupied(
|
||||||
this.placeholder_grid_data);
|
this.placeholder_grid_data);
|
||||||
|
|
||||||
var $overlapped_widgets = this.get_widgets_overlapped(
|
var $overlapped_widgets = this.get_widgets_overlapped(this.player_grid_data);
|
||||||
this.player_grid_data);
|
|
||||||
|
|
||||||
var player_size_y = this.player_grid_data.size_y;
|
var player_size_y = this.player_grid_data.size_y;
|
||||||
var player_size_x = this.player_grid_data.size_x;
|
var player_size_x = this.player_grid_data.size_x;
|
||||||
@@ -2820,7 +2836,20 @@
|
|||||||
//next iteration
|
//next iteration
|
||||||
return true;
|
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)) {
|
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);
|
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)) {
|
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);
|
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);
|
swap = $gr.queue_widget(placeholder_cells.cols[0], placeholder_cells.rows[0], $w);
|
||||||
} else {
|
} else {
|
||||||
//in one last attempt we check for any other empty spaces
|
//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,
|
/* if there is not widgets overlapping in the new player position,
|
||||||
* update the new placeholder position. */
|
* update the new placeholder position. */
|
||||||
if (!$overlapped_widgets.length) {
|
if (!$overlapped_widgets.length) {
|
||||||
var pp = this.can_go_player_up(this.player_grid_data);
|
if (this.shift_widgets_up) {
|
||||||
if (pp !== false) {
|
var pp = this.can_go_player_up(this.player_grid_data);
|
||||||
to_row = pp;
|
if (pp !== false) {
|
||||||
|
to_row = pp;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)) {
|
if (this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)) {
|
||||||
this.set_placeholder(to_col, to_row);
|
this.set_placeholder(to_col, to_row);
|
||||||
@@ -3342,12 +3373,6 @@
|
|||||||
*/
|
*/
|
||||||
fn.set_placeholder = function (col, row) {
|
fn.set_placeholder = function (col, row) {
|
||||||
var phgd = $.extend({}, this.placeholder_grid_data);
|
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
|
// Prevents widgets go out of the grid
|
||||||
var right_col = (col + phgd.size_x - 1);
|
var right_col = (col + phgd.size_x - 1);
|
||||||
@@ -3369,30 +3394,40 @@
|
|||||||
'data-col': col
|
'data-col': col
|
||||||
});
|
});
|
||||||
|
|
||||||
if (moved_down || changed_column) {
|
if (this.options.shift_player_up) {
|
||||||
$nexts.each($.proxy(function (i, widget) {
|
if (moved_down || changed_column) {
|
||||||
//Make sure widget is at it's topmost position
|
|
||||||
var $w = $(widget);
|
|
||||||
var wgd = $w.coords().grid;
|
|
||||||
|
|
||||||
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) {
|
$nexts.each($.proxy(function (i, widget) {
|
||||||
this.move_widget_to($w, can_go_widget_up);
|
//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(
|
if (can_go_widget_up) {
|
||||||
this.cells_occupied_by_placeholder);
|
this.move_widget_to($w, can_go_widget_up);
|
||||||
|
}
|
||||||
|
|
||||||
if ($widgets_under_ph.length) {
|
}, this));
|
||||||
$widgets_under_ph.each($.proxy(function (i, widget) {
|
}
|
||||||
var $w = $(widget);
|
|
||||||
this.move_widget_down(
|
var $widgets_under_ph = this.get_widgets_under_player(
|
||||||
$w, row + phgd.size_y - $w.data('coords').grid.row);
|
this.cells_occupied_by_placeholder);
|
||||||
}, this));
|
|
||||||
|
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.
|
* @return {jQuery} Returns a jQuery collection of HTMLElements.
|
||||||
*/
|
*/
|
||||||
fn.on_start_overlapping_column = function (col) {
|
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.
|
* @return {jQuery} Returns a jQuery collection of HTMLElements.
|
||||||
*/
|
*/
|
||||||
fn.on_start_overlapping_row = function (row) {
|
fn.on_start_overlapping_row = function (row) {
|
||||||
this.set_player(false, row);
|
this.set_player(undefined, row, false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@@ -3677,7 +3712,6 @@
|
|||||||
/*jshint -W083 */
|
/*jshint -W083 */
|
||||||
for (var c = 0, cl = cols.length; c < cl; c++) {
|
for (var c = 0, cl = cols.length; c < cl; c++) {
|
||||||
this.for_each_widget_below(cols[c], row, function (tcol, trow) {
|
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);
|
self.move_widget_up(this, self.player_grid_data.size_y);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Vendored
+1
-1
@@ -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}
|
.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}
|
||||||
Vendored
+2
-2
File diff suppressed because one or more lines are too long
Vendored
+87
-53
@@ -1,4 +1,4 @@
|
|||||||
/*! gridster.js - v0.6.8 - 2015-05-13
|
/*! gridster.js - v0.6.8 - 2015-05-18
|
||||||
* http://gridster.net/
|
* http://gridster.net/
|
||||||
* Copyright (c) 2015 ducksboard; Licensed MIT */
|
* Copyright (c) 2015 ducksboard; Licensed MIT */
|
||||||
|
|
||||||
@@ -934,6 +934,7 @@
|
|||||||
responsive_breakpoint: false,
|
responsive_breakpoint: false,
|
||||||
scroll_container: window,
|
scroll_container: window,
|
||||||
shift_larger_widgets_down: true,
|
shift_larger_widgets_down: true,
|
||||||
|
shift_widgets_up: true,
|
||||||
serialize_params: function ($w, wgd) {
|
serialize_params: function ($w, wgd) {
|
||||||
return {
|
return {
|
||||||
col: wgd.col,
|
col: wgd.col,
|
||||||
@@ -942,7 +943,9 @@
|
|||||||
size_y: wgd.size_y
|
size_y: wgd.size_y
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
collision: {},
|
collision: {
|
||||||
|
wait_for_mouseup: false
|
||||||
|
},
|
||||||
draggable: {
|
draggable: {
|
||||||
items: '.gs-w:not(.static)',
|
items: '.gs-w:not(.static)',
|
||||||
distance: 4,
|
distance: 4,
|
||||||
@@ -997,9 +1000,17 @@
|
|||||||
* for each widget in the serialization. Two arguments are passed:
|
* for each widget in the serialization. Two arguments are passed:
|
||||||
* `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid
|
* `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid
|
||||||
* coords object (`col`, `row`, `size_x`, `size_y`).
|
* 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
|
* @param {Object} [options.collision] An Object with all options for
|
||||||
* Collision class you want to overwrite. See Collision docs for
|
* Collision class you want to overwrite. See Collision docs for
|
||||||
* more info.
|
* 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
|
* @param {Object} [options.draggable] An Object with all options for
|
||||||
* Draggable class you want to overwrite. See Draggable docs for more
|
* Draggable class you want to overwrite. See Draggable docs for more
|
||||||
* info.
|
* info.
|
||||||
@@ -2409,7 +2420,6 @@
|
|||||||
this.on_overlapped_row_change(
|
this.on_overlapped_row_change(
|
||||||
this.on_start_overlapping_row, this.on_stop_overlapping_row);
|
this.on_start_overlapping_row, this.on_stop_overlapping_row);
|
||||||
|
|
||||||
|
|
||||||
if (this.helper && this.$player) {
|
if (this.helper && this.$player) {
|
||||||
this.$player.css({
|
this.$player.css({
|
||||||
'left': ui.position.left,
|
'left': ui.position.left,
|
||||||
@@ -2449,29 +2459,36 @@
|
|||||||
this.on_stop_overlapping_row
|
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.$changed = this.$changed.add(this.$player);
|
||||||
|
|
||||||
this.cells_occupied_by_player = this.get_cells_occupied(
|
this.cells_occupied_by_player = this.get_cells_occupied(this.placeholder_grid_data);
|
||||||
this.placeholder_grid_data);
|
|
||||||
this.set_cells_player_occupies(
|
|
||||||
this.placeholder_grid_data.col, this.placeholder_grid_data.row);
|
|
||||||
|
|
||||||
this.$player.coords().grid.row = this.placeholder_grid_data.row;
|
var col = this.placeholder_grid_data.col;
|
||||||
this.$player.coords().grid.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) {
|
if (this.options.draggable.stop) {
|
||||||
this.options.draggable.stop.call(this, event, ui);
|
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.$preview_holder.remove();
|
||||||
|
|
||||||
this.$player = null;
|
this.$player = null;
|
||||||
@@ -2801,8 +2818,7 @@
|
|||||||
this.cells_occupied_by_placeholder = this.get_cells_occupied(
|
this.cells_occupied_by_placeholder = this.get_cells_occupied(
|
||||||
this.placeholder_grid_data);
|
this.placeholder_grid_data);
|
||||||
|
|
||||||
var $overlapped_widgets = this.get_widgets_overlapped(
|
var $overlapped_widgets = this.get_widgets_overlapped(this.player_grid_data);
|
||||||
this.player_grid_data);
|
|
||||||
|
|
||||||
var player_size_y = this.player_grid_data.size_y;
|
var player_size_y = this.player_grid_data.size_y;
|
||||||
var player_size_x = this.player_grid_data.size_x;
|
var player_size_x = this.player_grid_data.size_x;
|
||||||
@@ -2820,7 +2836,20 @@
|
|||||||
//next iteration
|
//next iteration
|
||||||
return true;
|
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)) {
|
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);
|
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)) {
|
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);
|
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);
|
swap = $gr.queue_widget(placeholder_cells.cols[0], placeholder_cells.rows[0], $w);
|
||||||
} else {
|
} else {
|
||||||
//in one last attempt we check for any other empty spaces
|
//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,
|
/* if there is not widgets overlapping in the new player position,
|
||||||
* update the new placeholder position. */
|
* update the new placeholder position. */
|
||||||
if (!$overlapped_widgets.length) {
|
if (!$overlapped_widgets.length) {
|
||||||
var pp = this.can_go_player_up(this.player_grid_data);
|
if (this.shift_widgets_up) {
|
||||||
if (pp !== false) {
|
var pp = this.can_go_player_up(this.player_grid_data);
|
||||||
to_row = pp;
|
if (pp !== false) {
|
||||||
|
to_row = pp;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)) {
|
if (this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)) {
|
||||||
this.set_placeholder(to_col, to_row);
|
this.set_placeholder(to_col, to_row);
|
||||||
@@ -3342,12 +3373,6 @@
|
|||||||
*/
|
*/
|
||||||
fn.set_placeholder = function (col, row) {
|
fn.set_placeholder = function (col, row) {
|
||||||
var phgd = $.extend({}, this.placeholder_grid_data);
|
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
|
// Prevents widgets go out of the grid
|
||||||
var right_col = (col + phgd.size_x - 1);
|
var right_col = (col + phgd.size_x - 1);
|
||||||
@@ -3369,30 +3394,40 @@
|
|||||||
'data-col': col
|
'data-col': col
|
||||||
});
|
});
|
||||||
|
|
||||||
if (moved_down || changed_column) {
|
if (this.options.shift_player_up) {
|
||||||
$nexts.each($.proxy(function (i, widget) {
|
if (moved_down || changed_column) {
|
||||||
//Make sure widget is at it's topmost position
|
|
||||||
var $w = $(widget);
|
|
||||||
var wgd = $w.coords().grid;
|
|
||||||
|
|
||||||
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) {
|
$nexts.each($.proxy(function (i, widget) {
|
||||||
this.move_widget_to($w, can_go_widget_up);
|
//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(
|
if (can_go_widget_up) {
|
||||||
this.cells_occupied_by_placeholder);
|
this.move_widget_to($w, can_go_widget_up);
|
||||||
|
}
|
||||||
|
|
||||||
if ($widgets_under_ph.length) {
|
}, this));
|
||||||
$widgets_under_ph.each($.proxy(function (i, widget) {
|
}
|
||||||
var $w = $(widget);
|
|
||||||
this.move_widget_down(
|
var $widgets_under_ph = this.get_widgets_under_player(
|
||||||
$w, row + phgd.size_y - $w.data('coords').grid.row);
|
this.cells_occupied_by_placeholder);
|
||||||
}, this));
|
|
||||||
|
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.
|
* @return {jQuery} Returns a jQuery collection of HTMLElements.
|
||||||
*/
|
*/
|
||||||
fn.on_start_overlapping_column = function (col) {
|
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.
|
* @return {jQuery} Returns a jQuery collection of HTMLElements.
|
||||||
*/
|
*/
|
||||||
fn.on_start_overlapping_row = function (row) {
|
fn.on_start_overlapping_row = function (row) {
|
||||||
this.set_player(false, row);
|
this.set_player(undefined, row, false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@@ -3677,7 +3712,6 @@
|
|||||||
/*jshint -W083 */
|
/*jshint -W083 */
|
||||||
for (var c = 0, cl = cols.length; c < cl; c++) {
|
for (var c = 0, cl = cols.length; c < cl; c++) {
|
||||||
this.for_each_widget_below(cols[c], row, function (tcol, trow) {
|
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);
|
self.move_widget_up(this, self.player_grid_data.size_y);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
+2
-2
File diff suppressed because one or more lines are too long
+86
-52
@@ -40,6 +40,7 @@
|
|||||||
responsive_breakpoint: false,
|
responsive_breakpoint: false,
|
||||||
scroll_container: window,
|
scroll_container: window,
|
||||||
shift_larger_widgets_down: true,
|
shift_larger_widgets_down: true,
|
||||||
|
shift_widgets_up: true,
|
||||||
serialize_params: function ($w, wgd) {
|
serialize_params: function ($w, wgd) {
|
||||||
return {
|
return {
|
||||||
col: wgd.col,
|
col: wgd.col,
|
||||||
@@ -48,7 +49,9 @@
|
|||||||
size_y: wgd.size_y
|
size_y: wgd.size_y
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
collision: {},
|
collision: {
|
||||||
|
wait_for_mouseup: false
|
||||||
|
},
|
||||||
draggable: {
|
draggable: {
|
||||||
items: '.gs-w:not(.static)',
|
items: '.gs-w:not(.static)',
|
||||||
distance: 4,
|
distance: 4,
|
||||||
@@ -103,9 +106,17 @@
|
|||||||
* for each widget in the serialization. Two arguments are passed:
|
* for each widget in the serialization. Two arguments are passed:
|
||||||
* `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid
|
* `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid
|
||||||
* coords object (`col`, `row`, `size_x`, `size_y`).
|
* 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
|
* @param {Object} [options.collision] An Object with all options for
|
||||||
* Collision class you want to overwrite. See Collision docs for
|
* Collision class you want to overwrite. See Collision docs for
|
||||||
* more info.
|
* 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
|
* @param {Object} [options.draggable] An Object with all options for
|
||||||
* Draggable class you want to overwrite. See Draggable docs for more
|
* Draggable class you want to overwrite. See Draggable docs for more
|
||||||
* info.
|
* info.
|
||||||
@@ -1515,7 +1526,6 @@
|
|||||||
this.on_overlapped_row_change(
|
this.on_overlapped_row_change(
|
||||||
this.on_start_overlapping_row, this.on_stop_overlapping_row);
|
this.on_start_overlapping_row, this.on_stop_overlapping_row);
|
||||||
|
|
||||||
|
|
||||||
if (this.helper && this.$player) {
|
if (this.helper && this.$player) {
|
||||||
this.$player.css({
|
this.$player.css({
|
||||||
'left': ui.position.left,
|
'left': ui.position.left,
|
||||||
@@ -1555,29 +1565,36 @@
|
|||||||
this.on_stop_overlapping_row
|
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.$changed = this.$changed.add(this.$player);
|
||||||
|
|
||||||
this.cells_occupied_by_player = this.get_cells_occupied(
|
this.cells_occupied_by_player = this.get_cells_occupied(this.placeholder_grid_data);
|
||||||
this.placeholder_grid_data);
|
|
||||||
this.set_cells_player_occupies(
|
|
||||||
this.placeholder_grid_data.col, this.placeholder_grid_data.row);
|
|
||||||
|
|
||||||
this.$player.coords().grid.row = this.placeholder_grid_data.row;
|
var col = this.placeholder_grid_data.col;
|
||||||
this.$player.coords().grid.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) {
|
if (this.options.draggable.stop) {
|
||||||
this.options.draggable.stop.call(this, event, ui);
|
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.$preview_holder.remove();
|
||||||
|
|
||||||
this.$player = null;
|
this.$player = null;
|
||||||
@@ -1907,8 +1924,7 @@
|
|||||||
this.cells_occupied_by_placeholder = this.get_cells_occupied(
|
this.cells_occupied_by_placeholder = this.get_cells_occupied(
|
||||||
this.placeholder_grid_data);
|
this.placeholder_grid_data);
|
||||||
|
|
||||||
var $overlapped_widgets = this.get_widgets_overlapped(
|
var $overlapped_widgets = this.get_widgets_overlapped(this.player_grid_data);
|
||||||
this.player_grid_data);
|
|
||||||
|
|
||||||
var player_size_y = this.player_grid_data.size_y;
|
var player_size_y = this.player_grid_data.size_y;
|
||||||
var player_size_x = this.player_grid_data.size_x;
|
var player_size_x = this.player_grid_data.size_x;
|
||||||
@@ -1926,7 +1942,20 @@
|
|||||||
//next iteration
|
//next iteration
|
||||||
return true;
|
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)) {
|
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);
|
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)) {
|
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);
|
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);
|
swap = $gr.queue_widget(placeholder_cells.cols[0], placeholder_cells.rows[0], $w);
|
||||||
} else {
|
} else {
|
||||||
//in one last attempt we check for any other empty spaces
|
//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,
|
/* if there is not widgets overlapping in the new player position,
|
||||||
* update the new placeholder position. */
|
* update the new placeholder position. */
|
||||||
if (!$overlapped_widgets.length) {
|
if (!$overlapped_widgets.length) {
|
||||||
var pp = this.can_go_player_up(this.player_grid_data);
|
if (this.shift_widgets_up) {
|
||||||
if (pp !== false) {
|
var pp = this.can_go_player_up(this.player_grid_data);
|
||||||
to_row = pp;
|
if (pp !== false) {
|
||||||
|
to_row = pp;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)) {
|
if (this.can_placeholder_be_set(to_col, to_row, player_size_x, player_size_y)) {
|
||||||
this.set_placeholder(to_col, to_row);
|
this.set_placeholder(to_col, to_row);
|
||||||
@@ -2448,12 +2479,6 @@
|
|||||||
*/
|
*/
|
||||||
fn.set_placeholder = function (col, row) {
|
fn.set_placeholder = function (col, row) {
|
||||||
var phgd = $.extend({}, this.placeholder_grid_data);
|
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
|
// Prevents widgets go out of the grid
|
||||||
var right_col = (col + phgd.size_x - 1);
|
var right_col = (col + phgd.size_x - 1);
|
||||||
@@ -2475,30 +2500,40 @@
|
|||||||
'data-col': col
|
'data-col': col
|
||||||
});
|
});
|
||||||
|
|
||||||
if (moved_down || changed_column) {
|
if (this.options.shift_player_up) {
|
||||||
$nexts.each($.proxy(function (i, widget) {
|
if (moved_down || changed_column) {
|
||||||
//Make sure widget is at it's topmost position
|
|
||||||
var $w = $(widget);
|
|
||||||
var wgd = $w.coords().grid;
|
|
||||||
|
|
||||||
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) {
|
$nexts.each($.proxy(function (i, widget) {
|
||||||
this.move_widget_to($w, can_go_widget_up);
|
//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(
|
if (can_go_widget_up) {
|
||||||
this.cells_occupied_by_placeholder);
|
this.move_widget_to($w, can_go_widget_up);
|
||||||
|
}
|
||||||
|
|
||||||
if ($widgets_under_ph.length) {
|
}, this));
|
||||||
$widgets_under_ph.each($.proxy(function (i, widget) {
|
}
|
||||||
var $w = $(widget);
|
|
||||||
this.move_widget_down(
|
var $widgets_under_ph = this.get_widgets_under_player(
|
||||||
$w, row + phgd.size_y - $w.data('coords').grid.row);
|
this.cells_occupied_by_placeholder);
|
||||||
}, this));
|
|
||||||
|
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.
|
* @return {jQuery} Returns a jQuery collection of HTMLElements.
|
||||||
*/
|
*/
|
||||||
fn.on_start_overlapping_column = function (col) {
|
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.
|
* @return {jQuery} Returns a jQuery collection of HTMLElements.
|
||||||
*/
|
*/
|
||||||
fn.on_start_overlapping_row = function (row) {
|
fn.on_start_overlapping_row = function (row) {
|
||||||
this.set_player(false, row);
|
this.set_player(undefined, row, false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@@ -2783,7 +2818,6 @@
|
|||||||
/*jshint -W083 */
|
/*jshint -W083 */
|
||||||
for (var c = 0, cl = cols.length; c < cl; c++) {
|
for (var c = 0, cl = cols.length; c < cl; c++) {
|
||||||
this.for_each_widget_below(cols[c], row, function (tcol, trow) {
|
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);
|
self.move_widget_up(this, self.player_grid_data.size_y);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user