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

#3 Adds ability to automatically center widgets in the grid.

Browse Source
This commit is contained in:
floyd_hawkes
2015-03-19 10:43:15 -04:00
parent fc75ce5d46
commit 8a5a723a2d
7 changed files with 293 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/jquery.gridster.css
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.6.3 - 2015-03-06
/*! gridster.js - v0.6.3 - 2015-03-19
* http://gridster.net/
* Copyright (c) 2015 decksterteam; Licensed */
dist/jquery.gridster.js
Vendored
+96 -1
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.6.3 - 2015-03-06
/*! gridster.js - v0.6.3 - 2015-03-19
* http://gridster.net/
* Copyright (c) 2015 decksterteam; Licensed */
@@ -879,6 +879,7 @@
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
auto_init: true,
gulcenter_widgets: false,
responsive_breakpoint: false,
serialize_params: function($w, wgd) {
return {
@@ -989,6 +990,9 @@
this.min_widget_width = this.options.widget_base_dimensions[0];
this.min_widget_height = this.options.widget_base_dimensions[1];
this.min_col_count = this.options.min_cols;
this.prev_col_count = this.min_col_count;
if(this.is_responsive()) {
this.min_widget_width = this.get_responsive_col_width();
}
@@ -1459,6 +1463,87 @@
return $widget;
};
/**
* Centers widgets in grid
*
* @method center_widgets
*/
fn.center_widgets = debounce(function () {
var window_width = $(window).width();
var col_size = this.options.widget_base_dimensions[0] + (2 * this.options.widget_margins[0]);
var col_count = Math.floor(Math.max(Math.floor(window_width / col_size), this.min_col_count) / 2) * 2;
this.options.min_cols = col_count;
this.options.max_cols = col_count;
this.options.extra_cols = 0;
this.options.max_size_x = col_count;
this.set_dom_grid_width(col_count);
var col_dif = (col_count - this.prev_col_count) / 2;
if (col_dif < 0) {
if (this.get_min_col() > col_dif * -1) {
this.shift_cols(col_dif);
} else {
this.resize_widget_dimensions(this.options);
}
setTimeout($.proxy(function () {
this.resize_widget_dimensions(this.options);
}, this), 0);
} else if (col_dif > 0) {
this.resize_widget_dimensions(this.options);
setTimeout($.proxy(function () {
this.shift_cols(col_dif);
}, this), 0);
} else {
this.resize_widget_dimensions(this.options);
setTimeout($.proxy(function () {
this.resize_widget_dimensions(this.options);
}, this), 0);
}
this.prev_col_count = col_count;
return this;
}, 200);
fn.get_min_col = function () {
var min_col = this.min_col_count;
this.$widgets.each($.proxy(function(i, widget) {
var $widget = $(widget);
var value = parseInt($widget.attr("data-col"));
min_col = Math.min(min_col, value);
}, this));
return min_col;
};
fn.shift_cols = function (col_dif) {
this.$widgets.each($.proxy(function(i, widget) {
var $widget = $(widget);
var wgd = $widget.coords().grid;
var value = parseInt($widget.attr("data-col"));
var new_grid_data = {
col: Math.round(value + col_dif),
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y
};
setTimeout($.proxy(function () {
this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);
}, this), 0);
}, this));
};
/**
* Mutate widget dimensions and position in the grid map.
*
@@ -1840,6 +1925,12 @@
this.options.resize.enabled && this.add_resize_handle($el);
if (this.options.center_widgets) {
setTimeout($.proxy(function () {
this.center_widgets();
}, this), 0);
}
return posChanged;
};
@@ -4108,6 +4199,10 @@
this.resize_responsive_layout();
}
if (this.options.center_widgets) {
this.center_widgets();
}
return this;
};
dist/jquery.gridster.min.css
Vendored
+1 -1
View File
@@ -1,2 +1,2 @@
/*! gridster.js - v0.6.3 - 2015-03-06 - * http://gridster.net/ - Copyright (c) 2015 decksterteam; Licensed */
/*! gridster.js - v0.6.3 - 2015-03-19 - * http://gridster.net/ - Copyright (c) 2015 decksterteam; Licensed */
.gridster{position:relative}.gridster>*{margin:0 auto;-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){-webkit-transition:opacity .3s,left .3s,top .3s;-moz-transition:opacity .3s,left .3s,top .3s;-o-transition:opacity .3s,left .3s,top .3s;transition:opacity .3s,left .3s,top .3s}.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{display:none!important}[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
+96 -1
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.6.3 - 2015-03-06
/*! gridster.js - v0.6.3 - 2015-03-19
* http://gridster.net/
* Copyright (c) 2015 decksterteam; Licensed */
@@ -879,6 +879,7 @@
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
auto_init: true,
gulcenter_widgets: false,
responsive_breakpoint: false,
serialize_params: function($w, wgd) {
return {
@@ -989,6 +990,9 @@
this.min_widget_width = this.options.widget_base_dimensions[0];
this.min_widget_height = this.options.widget_base_dimensions[1];
this.min_col_count = this.options.min_cols;
this.prev_col_count = this.min_col_count;
if(this.is_responsive()) {
this.min_widget_width = this.get_responsive_col_width();
}
@@ -1459,6 +1463,87 @@
return $widget;
};
/**
* Centers widgets in grid
*
* @method center_widgets
*/
fn.center_widgets = debounce(function () {
var window_width = $(window).width();
var col_size = this.options.widget_base_dimensions[0] + (2 * this.options.widget_margins[0]);
var col_count = Math.floor(Math.max(Math.floor(window_width / col_size), this.min_col_count) / 2) * 2;
this.options.min_cols = col_count;
this.options.max_cols = col_count;
this.options.extra_cols = 0;
this.options.max_size_x = col_count;
this.set_dom_grid_width(col_count);
var col_dif = (col_count - this.prev_col_count) / 2;
if (col_dif < 0) {
if (this.get_min_col() > col_dif * -1) {
this.shift_cols(col_dif);
} else {
this.resize_widget_dimensions(this.options);
}
setTimeout($.proxy(function () {
this.resize_widget_dimensions(this.options);
}, this), 0);
} else if (col_dif > 0) {
this.resize_widget_dimensions(this.options);
setTimeout($.proxy(function () {
this.shift_cols(col_dif);
}, this), 0);
} else {
this.resize_widget_dimensions(this.options);
setTimeout($.proxy(function () {
this.resize_widget_dimensions(this.options);
}, this), 0);
}
this.prev_col_count = col_count;
return this;
}, 200);
fn.get_min_col = function () {
var min_col = this.min_col_count;
this.$widgets.each($.proxy(function(i, widget) {
var $widget = $(widget);
var value = parseInt($widget.attr("data-col"));
min_col = Math.min(min_col, value);
}, this));
return min_col;
};
fn.shift_cols = function (col_dif) {
this.$widgets.each($.proxy(function(i, widget) {
var $widget = $(widget);
var wgd = $widget.coords().grid;
var value = parseInt($widget.attr("data-col"));
var new_grid_data = {
col: Math.round(value + col_dif),
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y
};
setTimeout($.proxy(function () {
this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);
}, this), 0);
}, this));
};
/**
* Mutate widget dimensions and position in the grid map.
*
@@ -1840,6 +1925,12 @@
this.options.resize.enabled && this.add_resize_handle($el);
if (this.options.center_widgets) {
setTimeout($.proxy(function () {
this.center_widgets();
}, this), 0);
}
return posChanged;
};
@@ -4108,6 +4199,10 @@
this.resize_responsive_layout();
}
if (this.options.center_widgets) {
this.center_widgets();
}
return this;
};
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
+95
View File
@@ -32,6 +32,7 @@
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
auto_init: true,
gulcenter_widgets: false,
responsive_breakpoint: false,
serialize_params: function($w, wgd) {
return {
@@ -142,6 +143,9 @@
this.min_widget_width = this.options.widget_base_dimensions[0];
this.min_widget_height = this.options.widget_base_dimensions[1];
this.min_col_count = this.options.min_cols;
this.prev_col_count = this.min_col_count;
if(this.is_responsive()) {
this.min_widget_width = this.get_responsive_col_width();
}
@@ -612,6 +616,87 @@
return $widget;
};
/**
* Centers widgets in grid
*
* @method center_widgets
*/
fn.center_widgets = debounce(function () {
var window_width = $(window).width();
var col_size = this.options.widget_base_dimensions[0] + (2 * this.options.widget_margins[0]);
var col_count = Math.floor(Math.max(Math.floor(window_width / col_size), this.min_col_count) / 2) * 2;
this.options.min_cols = col_count;
this.options.max_cols = col_count;
this.options.extra_cols = 0;
this.options.max_size_x = col_count;
this.set_dom_grid_width(col_count);
var col_dif = (col_count - this.prev_col_count) / 2;
if (col_dif < 0) {
if (this.get_min_col() > col_dif * -1) {
this.shift_cols(col_dif);
} else {
this.resize_widget_dimensions(this.options);
}
setTimeout($.proxy(function () {
this.resize_widget_dimensions(this.options);
}, this), 0);
} else if (col_dif > 0) {
this.resize_widget_dimensions(this.options);
setTimeout($.proxy(function () {
this.shift_cols(col_dif);
}, this), 0);
} else {
this.resize_widget_dimensions(this.options);
setTimeout($.proxy(function () {
this.resize_widget_dimensions(this.options);
}, this), 0);
}
this.prev_col_count = col_count;
return this;
}, 200);
fn.get_min_col = function () {
var min_col = this.min_col_count;
this.$widgets.each($.proxy(function(i, widget) {
var $widget = $(widget);
var value = parseInt($widget.attr("data-col"));
min_col = Math.min(min_col, value);
}, this));
return min_col;
};
fn.shift_cols = function (col_dif) {
this.$widgets.each($.proxy(function(i, widget) {
var $widget = $(widget);
var wgd = $widget.coords().grid;
var value = parseInt($widget.attr("data-col"));
var new_grid_data = {
col: Math.round(value + col_dif),
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y
};
setTimeout($.proxy(function () {
this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);
}, this), 0);
}, this));
};
/**
* Mutate widget dimensions and position in the grid map.
*
@@ -993,6 +1078,12 @@
this.options.resize.enabled && this.add_resize_handle($el);
if (this.options.center_widgets) {
setTimeout($.proxy(function () {
this.center_widgets();
}, this), 0);
}
return posChanged;
};
@@ -3261,6 +3352,10 @@
this.resize_responsive_layout();
}
if (this.options.center_widgets) {
this.center_widgets();
}
return this;
};