mirror/librenms-librenms
1
0
Fork 0
mirror of https://github.com/librenms/librenms.git synced 2024-10-07 16:52:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improving the way that rows are calculated. Related to #30.

Browse Source 
Until now, the number of rows for the faux grid (this.cols) was calculated taking the highest
value among min_rows option, the highest widget, and the number of rows
that fits on the wrapper height (based on widget_base_dimensions, widget_margins
and extra_rows options).

In addition to this, styles for data-row attributes ara generated based on
this.cols (above) plus a constant value of 10. This was done to reduce
the number of cells by which iterate when dragging, but it's not very logical...

So, now the number of rows is calculated by adding the height of all widgets.
In this way we ensure that there is always available cells in the grid.
Also the same number of rows are generated for both the faux grid and
the DOM grid (css styles).
This commit is contained in:
vieron
2012-08-18 19:34:47 +02:00
parent 3ba70b7453
commit 1d65da9260
1 changed files with 67 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/jquery.gridster.js
+67 -29
View File
@@ -100,14 +100,14 @@
var fn = Gridster.prototype;
fn.init = function() {
this.generate_grid_and_stylesheet();
this.get_widgets_from_DOM();
this.set_dom_grid_height();
this.$wrapper.addClass('ready');
this.draggable();
this.generate_grid_and_stylesheet();
this.get_widgets_from_DOM();
this.set_dom_grid_height();
this.$wrapper.addClass('ready');
this.draggable();
$(window).bind(
'resize', throttle($.proxy(this.recalculate_faux_grid, this), 200));
$(window).bind(
'resize', throttle($.proxy(this.recalculate_faux_grid, this), 200));
};
@@ -160,6 +160,12 @@
this.register_widget($w);
this.add_faux_rows(next_pos.size_y);
if (this.options.autogenerate_stylesheet) {
this.generate_stylesheet();
}
this.set_dom_grid_height();
return $w.fadeIn();
@@ -1986,9 +1992,10 @@
*/
fn.generate_stylesheet = function(opts) {
var styles = '';
var extra_cells = 10;
var max_size_y = this.options.max_size_y;
var max_size_x = this.options.max_size_x;
var max_rows = 0;
var max_cols = 0;
var i;
var rules;
@@ -2005,8 +2012,8 @@
opts.min_widget_height = (opts.widget_margins[1] * 2) +
opts.widget_base_dimensions[1];
var serialized_opts = $.param(opts);
// don't duplicate stylesheets for the same configuration
var serialized_opts = $.param(opts);
if ($.inArray(serialized_opts, Gridster.generated_stylesheets) >= 0) {
return false;
}
@@ -2014,7 +2021,7 @@
Gridster.generated_stylesheets.push(serialized_opts);
/* generate CSS styles for cols */
for (i = opts.cols + extra_cells; i >= 0; i--) {
for (i = opts.cols; i >= 0; i--) {
styles += (opts.namespace + ' [data-col="'+ (i + 1) + '"] { left:' +
((i * opts.widget_base_dimensions[0]) +
(i * opts.widget_margins[0]) +
@@ -2022,7 +2029,7 @@
}
/* generate CSS styles for rows */
for (i = opts.rows + extra_cells; i >= 0; i--) {
for (i = opts.rows; i >= 0; i--) {
styles += (opts.namespace + ' [data-row="' + (i + 1) + '"] { top:' +
((i * opts.widget_base_dimensions[1]) +
(i * opts.widget_margins[1]) +
@@ -2085,7 +2092,23 @@
for (col = cols; col > 0; col--) {
this.gridmap[col] = [];
for (row = rows; row > 0; row--) {
var coords = $({
this.add_faux_cell(row, col);
}
}
return this;
};
/**
* Add cell to the faux grid.
*
* @method add_faux_rows
* @param {Number} row The row for the new faux cell.
* @param {Number} col The col for the new faux cell.
* @return {Object} Returns the instance of the Gridster class.
*/
fn.add_faux_cell = function(row, col) {
var coords = $({
left: this.baseX + ((col - 1) * this.min_widget_width),
top: this.baseY + (row -1) * this.min_widget_height,
width: this.min_widget_width,
@@ -2096,10 +2119,31 @@
original_row: row
}).coords();
this.gridmap[col][row] = false;
this.faux_grid.push(coords);
}
}
this.gridmap[col][row] = false;
this.faux_grid.push(coords);
return this;
};
/**
* Add rows to the faux grid.
*
* @method add_faux_rows
* @param {Number} rows The number of rows you want to add to the faux grid.
* @return {Object} Returns the instance of the Gridster class.
*/
fn.add_faux_rows = function(rows) {
var actual_rows = this.rows;
var max_rows = actual_rows + (rows || 1);
for (var r = max_rows; r > actual_rows; r--) {
for (var c = this.cols; c >= 1; c--) {
this.add_faux_cell(r, c);
};
};
this.rows = max_rows;
return this;
};
@@ -2155,8 +2199,6 @@
var cols = Math.floor(aw / this.min_widget_width) +
this.options.extra_cols;
var rows = Math.floor(ah / this.min_widget_height) +
this.options.extra_rows;
var actual_cols = this.$widgets.map(function() {
return $(this).attr('data-col');
@@ -2165,18 +2207,16 @@
//needed to pass tests with phantomjs
actual_cols.length || (actual_cols = [0]);
var actual_rows = this.$widgets.map(function() {
return $(this).attr('data-row');
});
actual_rows = Array.prototype.slice.call(actual_rows, 0);
//needed to pass tests with phantomjs
actual_rows.length || (actual_rows = [0]);
var min_cols = Math.max.apply(Math, actual_cols);
var min_rows = Math.max.apply(Math, actual_rows);
// get all rows that could be occupied by the current widgets
var max_rows = this.options.extra_rows;
this.$widgets.each(function(i, w){
max_rows += (+$(w).attr('data-sizey'));
});
this.cols = Math.max(min_cols, cols, this.options.min_cols);
this.rows = Math.max(min_rows, rows, this.options.min_rows);
this.rows = Math.max(max_rows, this.options.min_rows);
this.baseX = ($(window).width() - aw) / 2;
this.baseY = this.$wrapper.offset().top;
@@ -2185,8 +2225,6 @@
this.generate_stylesheet();
}
/* more faux rows that needed are created so that there are cells
* where drag beyond the limits */
return this.generate_faux_grid(this.rows, this.cols);
};