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

wip: resize widget feature

Browse Source
This commit is contained in:
vieron
2012-08-18 22:10:12 +02:00
parent 04301f48c9
commit 32ea0da04b
5 changed files with 201 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/jquery.gridster.css
Vendored
+7
View File
@@ -27,6 +27,13 @@
transition: opacity .3s, left .3s, top .3s;
}
.ready .gs_w:not(.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;
dist/jquery.gridster.js
Vendored
+93 -7
View File
@@ -826,7 +826,8 @@
* Add a new widget to the grid.
*
* @method add_widget
* @param {String} html The string representing the HTML of the widget.
* @param {String|HTMLElement} html The string representing the HTML of the widget
* or the HTMLElement.
* @param {Number} size_x The nº of rows the widget occupies horizontally.
* @param {Number} size_y The nº of columns the widget occupies vertically.
* @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing.
@@ -858,6 +859,92 @@
};
/**
* Change the size of a widget.
*
* @method resize_widget
* @param {HTMLElement} $widget The jQuery wrapped HTMLElement
* representing the widget.
* @param {Number} size_x The number of columns that will occupy the widget.
* @param {Number} size_y The number of rows that will occupy the widget.
* @return {HTMLElement} Returns $widget.
*/
fn.resize_widget = function($widget, size_x, size_y) {
var wgd = $widget.coords().grid;
size_x || (size_x = wgd.size_x);
size_y || (size_y = wgd.size_y);
if (size_x > this.cols) {
size_x = this.cols;
};
var old_size_x = wgd.size_x;
var old_size_y = wgd.size_y;
var old_col = wgd.col;
var wider = size_x > old_size_x;
var taller = size_y > old_size_y;
var $nexts = this.widgets_below({
col: wgd.col,
row: wgd.row,
size_x: size_x,
size_y: size_y
});
wgd.size_x = size_x;
wgd.size_y = size_y;
if (wgd.col+wgd.size_x > this.cols) {
var diff = wgd.col+wgd.size_x-this.cols;
var c = wgd.col - diff;
wgd.col = c > 1 ? c : 1;
};
this.$player = this.$preview_holder = $widget;
this.player_grid_data = {
col: wgd.col,
row: wgd.row,
size_x: size_x,
size_y: size_y,
el: $widget
}
this.placeholder_grid_data = $.extend({}, this.player_grid_data);
$widget.attr({
'data-sizex': size_x,
'data-sizey': size_y
})
this.set_player(wgd.col, wgd.row, true);
this.placeholder_grid_data = this.player_grid_data = {};
this.remove_from_gridmap({
col: old_col,
row: wgd.row,
size_x: old_size_x,
size_y: old_size_y
});
this.add_to_gridmap({
col: wgd.col,
row: wgd.row,
size_x: size_x,
size_y: size_y
}, $widget);
// if (!taller || !wider) {
$nexts.each($.proxy(function(i, widget) {
this.move_widget_up(
$(widget), old_size_y - size_y);
}, this));
// };
this.set_dom_grid_height();
return $widget;
}
/**
* Get the most left column below to add a new widget.
*
@@ -1079,7 +1166,6 @@
var self = this;
var draggable_options = $.extend(true, {}, this.options.draggable, {
offset_left: this.options.widget_margins[0],
items: '.gs_w',
start: function(event, ui) {
self.$widgets.filter('.player-revert')
.removeClass('player-revert');
@@ -1342,11 +1428,12 @@
* @method set_player
* @return {Class} Returns the instance of the Gridster Class.
*/
fn.set_player = function(col, row) {
this.empty_cells_player_occupies();
fn.set_player = function(col, row, no_player) {
var self = this;
var cell = self.colliders_data[0].el.data;
if (!no_player) {
this.empty_cells_player_occupies();
};
var cell = !no_player ? self.colliders_data[0].el.data : {col: col};
var to_col = cell.col;
var to_row = row || cell.row;
@@ -1962,7 +2049,6 @@
// if there is a widget in the player position
if (!this.gridmap[col]) { return true; } //next iteration
var $w = this.gridmap[col][row];
if (this.is_occupied(col, row) && !this.is_player($w) &&
$.inArray($w, used) === -1
) {
dist/jquery.gridster.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/jquery.gridster.css
+7
View File
@@ -23,6 +23,13 @@
transition: opacity .3s, left .3s, top .3s;
}
.ready .gs_w:not(.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;
src/jquery.gridster.js
+93 -7
View File
@@ -140,7 +140,8 @@
* Add a new widget to the grid.
*
* @method add_widget
* @param {String} html The string representing the HTML of the widget.
* @param {String|HTMLElement} html The string representing the HTML of the widget
* or the HTMLElement.
* @param {Number} size_x The nº of rows the widget occupies horizontally.
* @param {Number} size_y The nº of columns the widget occupies vertically.
* @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing.
@@ -172,6 +173,92 @@
};
/**
* Change the size of a widget.
*
* @method resize_widget
* @param {HTMLElement} $widget The jQuery wrapped HTMLElement
* representing the widget.
* @param {Number} size_x The number of columns that will occupy the widget.
* @param {Number} size_y The number of rows that will occupy the widget.
* @return {HTMLElement} Returns $widget.
*/
fn.resize_widget = function($widget, size_x, size_y) {
var wgd = $widget.coords().grid;
size_x || (size_x = wgd.size_x);
size_y || (size_y = wgd.size_y);
if (size_x > this.cols) {
size_x = this.cols;
};
var old_size_x = wgd.size_x;
var old_size_y = wgd.size_y;
var old_col = wgd.col;
var wider = size_x > old_size_x;
var taller = size_y > old_size_y;
var $nexts = this.widgets_below({
col: wgd.col,
row: wgd.row,
size_x: size_x,
size_y: size_y
});
wgd.size_x = size_x;
wgd.size_y = size_y;
if (wgd.col+wgd.size_x > this.cols) {
var diff = wgd.col+wgd.size_x-this.cols;
var c = wgd.col - diff;
wgd.col = c > 1 ? c : 1;
};
this.$player = this.$preview_holder = $widget;
this.player_grid_data = {
col: wgd.col,
row: wgd.row,
size_x: size_x,
size_y: size_y,
el: $widget
}
this.placeholder_grid_data = $.extend({}, this.player_grid_data);
$widget.attr({
'data-sizex': size_x,
'data-sizey': size_y
})
this.set_player(wgd.col, wgd.row, true);
this.placeholder_grid_data = this.player_grid_data = {};
this.remove_from_gridmap({
col: old_col,
row: wgd.row,
size_x: old_size_x,
size_y: old_size_y
});
this.add_to_gridmap({
col: wgd.col,
row: wgd.row,
size_x: size_x,
size_y: size_y
}, $widget);
// if (!taller || !wider) {
$nexts.each($.proxy(function(i, widget) {
this.move_widget_up(
$(widget), old_size_y - size_y);
}, this));
// };
this.set_dom_grid_height();
return $widget;
}
/**
* Get the most left column below to add a new widget.
*
@@ -393,7 +480,6 @@
var self = this;
var draggable_options = $.extend(true, {}, this.options.draggable, {
offset_left: this.options.widget_margins[0],
items: '.gs_w',
start: function(event, ui) {
self.$widgets.filter('.player-revert')
.removeClass('player-revert');
@@ -656,11 +742,12 @@
* @method set_player
* @return {Class} Returns the instance of the Gridster Class.
*/
fn.set_player = function(col, row) {
this.empty_cells_player_occupies();
fn.set_player = function(col, row, no_player) {
var self = this;
var cell = self.colliders_data[0].el.data;
if (!no_player) {
this.empty_cells_player_occupies();
};
var cell = !no_player ? self.colliders_data[0].el.data : {col: col};
var to_col = cell.col;
var to_row = row || cell.row;
@@ -1276,7 +1363,6 @@
// if there is a widget in the player position
if (!this.gridmap[col]) { return true; } //next iteration
var $w = this.gridmap[col][row];
if (this.is_occupied(col, row) && !this.is_player($w) &&
$.inArray($w, used) === -1
) {