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

fix(gridster): changed the way widgets were getting positioned so that margins are actually the same size that the user specified all the way around the grid

Browse Source 
feat(gridster): added responsive nature to grid
This commit is contained in:
floyd_hawkes
2015-02-18 13:34:20 -05:00
parent 314037471f
commit a391304357
11 changed files with 724 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1 -1
View File
@@ -4,4 +4,4 @@ gh-pages/
demo/
.idea
.DS_Store
.idea
*.iml
Gruntfile.js
+1 -1
View File
@@ -70,7 +70,7 @@ module.exports = function(grunt) {
dist_demo: {
files: {
'gh-pages/dist/jquery.<%= pkg.name %>.min.js': ['<%= concat.dist_js.dest %>'],
'gh-pages/dist/jquery.<%= pkg.name %>.min.js': ['<%= concat.dist_js.dest %>']
}
},
dist/jquery.gridster.css
Vendored
+6 -2
View File
@@ -1,6 +1,6 @@
/*! gridster.js - v0.5.6 - 2014-09-25
/*! gridster.js - v1.1.0 - 2015-02-18
* http://gridster.net/
* Copyright (c) 2014 ducksboard; Licensed MIT */
* Copyright (c) 2015 decksterteam; Licensed */
.gridster {
position:relative;
@@ -20,6 +20,10 @@
position: absolute;
}
.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;
dist/jquery.gridster.js
Vendored
+235 -50
View File
@@ -1,6 +1,6 @@
/*! gridster.js - v0.5.6 - 2014-09-25
/*! gridster.js - v1.1.0 - 2015-02-18
* http://gridster.net/
* Copyright (c) 2014 ducksboard; Licensed MIT */
* Copyright (c) 2015 decksterteam; Licensed */
;(function(root, factory) {
@@ -879,6 +879,7 @@
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
auto_init: true,
responsive_breakpoint: false,
serialize_params: function($w, wgd) {
return {
col: wgd.col,
@@ -985,11 +986,12 @@
this.options.widget_selector).addClass('gs-w');
this.widgets = [];
this.$changed = $([]);
this.wrapper_width = this.$wrapper.width();
this.min_widget_width = (this.options.widget_margins[0] * 2) +
this.options.widget_base_dimensions[0];
this.min_widget_height = (this.options.widget_margins[1] * 2) +
this.options.widget_base_dimensions[1];
this.min_widget_width = this.options.widget_base_dimensions[0];
this.min_widget_height = this.options.widget_base_dimensions[1];
if(this.is_responsive()) {
this.min_widget_width = this.get_responsive_col_width();
}
this.generated_stylesheets = [];
this.$style_tags = $([]);
@@ -1202,7 +1204,6 @@
this.register_widget($w);
this.add_faux_rows(pos.size_y);
//this.add_faux_cols(pos.size_x);
if (max_size) {
this.set_widget_max_size($w, max_size);
@@ -1339,6 +1340,86 @@
return $widget;
};
/**
* Expand the widget. Width is set to the current grid width.
*
* @method expand_widget
* @param {HTMLElement} $widget The jQuery wrapped HTMLElement
* representing the widget.
* @param {Number} size_y The number of rows that will occupy the widget.
* @param {Function} [callback] Function executed when the widget is removed.
* @return {HTMLElement} Returns $widget.
*/
fn.expand_widget = function($widget, size_y, callback) {
var wgd = $widget.coords().grid;
var max_size_x = Math.floor(($(window).width() - this.options.widget_margins[0] * 2) /
(this.min_widget_width + this.options.widget_margins[0] * 2));
var size_x = Math.min(max_size_x, this.cols);
size_y || (size_y = wgd.size_y);
var old_size_y = wgd.size_y;
$widget.attr('pre_expand_col', wgd.col);
$widget.attr('pre_expand_sizex', wgd.size_x);
$widget.attr('pre_expand_sizey', wgd.size_y);
var new_col = 1;
if (size_y > old_size_y) {
this.add_faux_rows(Math.max(size_y - old_size_y, 0));
}
var new_grid_data = {
col: new_col,
row: wgd.row,
size_x: size_x,
size_y: size_y
};
this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);
this.set_dom_grid_height();
this.set_dom_grid_width();
if (callback) {
callback.call(this, new_grid_data.size_x, new_grid_data.size_y);
}
return $widget;
};
/**
* Collapse the widget to it's pre-expanded size
*
* @method expand_widget
* @param {HTMLElement} $widget The jQuery wrapped HTMLElement
* representing the widget.
* @param {Function} [callback] Function executed when the widget is removed.
* @return {HTMLElement} Returns $widget.
*/
fn.collapse_widget = function($widget, callback) {
var wgd = $widget.coords().grid;
var size_x = parseInt($widget.attr('pre_expand_sizex'));
var size_y = parseInt($widget.attr('pre_expand_sizey'));
var new_col = parseInt($widget.attr('pre_expand_col'));
var new_grid_data = {
col: new_col,
row: wgd.row,
size_x: size_x,
size_y: size_y
};
this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);
this.set_dom_grid_height();
this.set_dom_grid_width();
if (callback) {
callback.call(this, new_grid_data.size_x, new_grid_data.size_y);
}
return $widget;
};
/**
* Mutate widget dimensions and position in the grid map.
@@ -1351,7 +1432,6 @@
* @return {HTMLElement} Returns instance of gridster Class.
*/
fn.mutate_widget_in_gridmap = function($widget, wgd, new_wgd) {
var old_size_x = wgd.size_x;
var old_size_y = wgd.size_y;
var old_cells_occupied = this.get_cells_occupied(wgd);
@@ -1411,10 +1491,10 @@
//update coords instance attributes
$widget.data('coords').update({
width: (new_wgd.size_x * this.options.widget_base_dimensions[0] +
((new_wgd.size_x - 1) * this.options.widget_margins[0]) * 2),
width: (new_wgd.size_x * (this.is_responsive() ? this.get_responsive_col_width() : this.options.widget_base_dimensions[0]) +
((new_wgd.size_x - 1) * this.options.widget_margins[0])),
height: (new_wgd.size_y * this.options.widget_base_dimensions[1] +
((new_wgd.size_y - 1) * this.options.widget_margins[1]) * 2)
((new_wgd.size_y - 1) * this.options.widget_margins[1]))
});
$widget.attr({
@@ -1427,7 +1507,7 @@
if (empty_cols.length) {
var cols_to_remove_holes = [
empty_cols[0], new_wgd.row,
empty_cols.length,
empty_cols[empty_cols.length - 1] - empty_cols[0] + 1,
Math.min(old_size_y, new_wgd.size_y),
$widget
];
@@ -1747,6 +1827,45 @@
};
/**
* Update the width and height for a widgets coordinate data.
*
* @param {HTMLElement} $widget The widget to update.
* @param width The new width for this widget.
* @param height The new height for this widget.
* @method update_widget_dimensions
* @return {Class} Returns the instance of the Gridster Class.
*/
fn.update_widget_dimensions = function($widget, width, height) {
$widget.data('coords').update({
width: width,
height: height
});
return this;
};
/**
* Update dimensions for all widgets in the grid.
*
* @method update_widgets_dimensions
* @return {Class} Returns the instance of the Gridster Class.
*/
fn.update_widgets_dimensions = function() {
$.each(this.$widgets, $.proxy(function(idx, widget) {
var wgd = $(widget).coords().grid;
var width = (wgd.size_x * (this.is_responsive() ? this.get_responsive_col_width() : this.options.widget_base_dimensions[0]) +
((wgd.size_x - 1) * this.options.widget_margins[0]));
var height = (wgd.size_y * this.options.widget_base_dimensions[1] +
((wgd.size_y - 1) * this.options.widget_margins[1]));
this.update_widget_dimensions($(widget), width, height);
}, this));
return this;
};
/**
* Remove a widget from the mapped array of positions.
*
@@ -1794,7 +1913,7 @@
var draggable_options = $.extend(true, {}, this.options.draggable, {
offset_left: this.options.widget_margins[0],
offset_top: this.options.widget_margins[1],
container_width: this.cols * this.min_widget_width,
container_width: (this.cols * this.min_widget_width) + ((this.cols + 1) * this.options.widget_margins[0]),
limit: true,
start: function(event, ui) {
self.$widgets.filter('.player-revert')
@@ -2096,10 +2215,12 @@
bottom: ui.$player.is('.' + this.resize_handle_class + '-y')
};
this.$resized_widget.css({
if(!this.is_responsive()) {
this.$resized_widget.css({
'min-width': this.options.widget_base_dimensions[0],
'min-height': this.options.widget_base_dimensions[1]
});
});
}
var nodeName = this.$resized_widget.get(0).tagName;
this.$resize_preview_holder = $('<' + nodeName + ' />', {
@@ -2170,7 +2291,7 @@
fn.on_resize = function(event, ui) {
var rel_x = (ui.pointer.diff_left);
var rel_y = (ui.pointer.diff_top);
var wbd_x = this.options.widget_base_dimensions[0];
var wbd_x = this.is_responsive() ? this.get_responsive_col_width() : this.options.widget_base_dimensions[0];
var wbd_y = this.options.widget_base_dimensions[1];
var margin_x = this.options.widget_margins[0];
var margin_y = this.options.widget_margins[1];
@@ -2180,8 +2301,6 @@
var min_size_y = this.resize_min_size_y;
var autogrow = this.options.autogrow_cols;
var width;
var max_width = Infinity;
var max_height = Infinity;
var inc_units_x = Math.ceil((rel_x / (wbd_x + margin_x * 2)) - 0.2);
var inc_units_y = Math.ceil((rel_y / (wbd_y + margin_y * 2)) - 0.2);
@@ -2191,17 +2310,17 @@
var max_cols = (this.container_width / this.min_widget_width) -
this.resize_initial_col + 1;
var limit_width = ((max_cols * this.min_widget_width) - margin_x * 2);
var limit_width = (max_cols * this.min_widget_width) + (this.is_responsive() ? (max_cols - 1) * margin_x : -(margin_x * 2));
size_x = Math.max(Math.min(size_x, max_size_x), min_size_x);
size_x = Math.min(max_cols, size_x);
width = (max_size_x * wbd_x) + ((size_x - 1) * margin_x * 2);
width = (max_size_x * wbd_x) + ((size_x - 1) * margin_x );
max_width = Math.min(width, limit_width);
min_width = (min_size_x * wbd_x) + ((size_x - 1) * margin_x * 2);
min_width = (min_size_x * wbd_x) + ((size_x - 1) * margin_x);
size_y = Math.max(Math.min(size_y, max_size_y), min_size_y);
max_height = (max_size_y * wbd_y) + ((size_y - 1) * margin_y * 2);
min_height = (min_size_y * wbd_y) + ((size_y - 1) * margin_y * 2);
max_height = (max_size_y * wbd_y) + ((size_y - 1) * margin_y);
min_height = (min_size_y * wbd_y) + ((size_y - 1) * margin_y);
if (this.resize_dir.right) {
size_y = this.resize_initial_sizey;
@@ -3598,7 +3717,7 @@
fn.set_dom_grid_height = function(height) {
if (typeof height === 'undefined') {
var r = this.get_highest_occupied_cell().row;
height = r * this.min_widget_height;
height = ((r + 1) * this.options.widget_margins[1]) + (r * this.min_widget_height);
}
this.container_height = height;
@@ -3621,12 +3740,76 @@
this.cols);
cols = Math.min(max_cols, Math.max(cols, this.options.min_cols));
this.container_width = cols * this.min_widget_width;
this.container_width = ((cols + 1) * this.options.widget_margins[0]) + (cols * this.min_widget_width);
this.$el.css('width', this.container_width);
if(this.is_responsive()) {
this.$el.css({'min-width': '100%', 'max-width': '100%'});
return this;
}
return this;
};
/**
* Checks if this grid is responsive.
* autogenerate_stylesheet be true, the widget base width should be auto, and there must be a max_cols set.
* @returns {Boolean}
*/
fn.is_responsive = function() {
return this.options.autogenerate_stylesheet && this.options.widget_base_dimensions[0] === 'auto' && this.options.max_cols !== Infinity;
};
/**
*
* @returns {number}
*/
fn.get_responsive_col_width = function() {
var cols = this.cols || this.options.max_cols;
return (this.$el.width() - ((cols + 1) * this.options.widget_margins[0])) / cols;
};
fn.resize_responsive_layout = function() {
this.min_widget_width = this.get_responsive_col_width();
this.generate_grid_and_stylesheet();
this.update_widgets_dimensions();
this.drag_api.set_limits((this.cols * this.min_widget_width) + ((this.cols) * this.options.widget_margins[0]));
};
fn.toggle_collapsed_grid = function(collapse, opts) {
if(collapse) {
this.$widgets.css({
'margin-top' : opts.widget_margins[0],
'margin-bottom' : opts.widget_margins[0],
'min-height': opts.widget_base_dimensions[1]
});
this.$el.addClass('collapsed');
if(this.options.resize.enabled && this.resize_api) {
this.disable_resize();
}
if(this.drag_api) {
this.disable();
}
} else {
this.$widgets.css({
'margin-top' : 'auto',
'margin-bottom' : 'auto',
'min-height': 'auto'
});
this.$el.removeClass('collapsed');
if(this.options.resize.enabled && this.resize_api) {
this.enable_resize();
}
if(this.drag_api) {
this.enable();
}
}
}
/**
* It generates the neccessary styles to position the widgets.
*
@@ -3638,10 +3821,8 @@
fn.generate_stylesheet = function(opts) {
var styles = '';
var max_size_x = this.options.max_size_x || this.cols;
var max_rows = 0;
var max_cols = 0;
var i;
var rules;
var full_width = this.is_responsive() && this.options.responsive_breakpoint && ($(window).width() < this.options.responsive_breakpoint);
opts || (opts = {});
opts.cols || (opts.cols = this.cols);
@@ -3649,12 +3830,16 @@
opts.namespace || (opts.namespace = this.options.namespace);
opts.widget_base_dimensions ||
(opts.widget_base_dimensions = this.options.widget_base_dimensions);
opts.widget_margins ||
(opts.widget_margins = this.options.widget_margins);
opts.min_widget_width = (opts.widget_margins[0] * 2) +
opts.widget_base_dimensions[0];
opts.min_widget_height = (opts.widget_margins[1] * 2) +
opts.widget_base_dimensions[1];
if(this.is_responsive()) {
opts.widget_base_dimensions = [this.get_responsive_col_width(), opts.widget_base_dimensions[1]];
}
opts.widget_margins || (opts.widget_margins = this.options.widget_margins);
this.toggle_collapsed_grid(full_width, opts);
// don't duplicate stylesheets for the same configuration
var serialized_opts = $.param(opts);
@@ -3666,31 +3851,27 @@
Gridster.generated_stylesheets.push(serialized_opts);
/* generate CSS styles for cols */
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]) +
((i + 1) * opts.widget_margins[0])) + 'px; }\n');
for(i = 1; i <= opts.cols + 1; i++) {
styles += (opts.namespace + ' [data-col="' + i + '"] { left:' +
(full_width ? this.options.widget_margins[0] : ((i * opts.widget_margins[0]) + ((i - 1) * opts.widget_base_dimensions[0])))
+ 'px; }\n');
}
/* generate CSS styles for rows */
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]) +
((i + 1) * opts.widget_margins[1]) ) + 'px; }\n');
for(i = 1; i <= opts.rows + 1; i++) {
styles += (opts.namespace + ' [data-row="' + i + '"] { top:' +
((i * opts.widget_margins[1]) + ((i - 1) * opts.widget_base_dimensions[1]))
+ 'px; }\n');
}
for (var y = 1; y <= opts.rows; y++) {
styles += (opts.namespace + ' [data-sizey="' + y + '"] { height:' +
(y * opts.widget_base_dimensions[1] +
(y - 1) * (opts.widget_margins[1] * 2)) + 'px; }\n');
styles += (opts.namespace + ' [data-sizey="' + y + '"] { height:' +
(full_width ? 'auto' : ((y * opts.widget_base_dimensions[1]) + ((y - 1) * opts.widget_margins[1]))) + 'px; }\n');
}
for (var x = 1; x <= max_size_x; x++) {
styles += (opts.namespace + ' [data-sizex="' + x + '"] { width:' +
(x * opts.widget_base_dimensions[0] +
(x - 1) * (opts.widget_margins[0] * 2)) + 'px; }\n');
(full_width ? ($(window).width() - this.options.widget_margins[0] * 2) : ((x * opts.widget_base_dimensions[0]) + ((x - 1) * opts.widget_margins[0]))) + 'px; }\n');
}
this.remove_style_tags();
@@ -3871,6 +4052,10 @@
});
}, this));
if (this.is_responsive()) {
this.resize_responsive_layout();
}
return this;
};
dist/jquery.gridster.min.css
Vendored
+2 -2
View File
@@ -1,2 +1,2 @@
/*! gridster.js - v0.5.6 - 2014-09-25 - * http://gridster.net/ - Copyright (c) 2014 ducksboard; Licensed MIT */
.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}.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}
/*! gridster.js - v1.1.0 - 2015-02-18 - * 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 .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
+235 -50
View File
@@ -1,6 +1,6 @@
/*! gridster.js - v0.5.6 - 2014-09-25
/*! gridster.js - v1.1.0 - 2015-02-18
* http://gridster.net/
* Copyright (c) 2014 ducksboard; Licensed MIT */
* Copyright (c) 2015 decksterteam; Licensed */
;(function(root, factory) {
@@ -879,6 +879,7 @@
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
auto_init: true,
responsive_breakpoint: false,
serialize_params: function($w, wgd) {
return {
col: wgd.col,
@@ -985,11 +986,12 @@
this.options.widget_selector).addClass('gs-w');
this.widgets = [];
this.$changed = $([]);
this.wrapper_width = this.$wrapper.width();
this.min_widget_width = (this.options.widget_margins[0] * 2) +
this.options.widget_base_dimensions[0];
this.min_widget_height = (this.options.widget_margins[1] * 2) +
this.options.widget_base_dimensions[1];
this.min_widget_width = this.options.widget_base_dimensions[0];
this.min_widget_height = this.options.widget_base_dimensions[1];
if(this.is_responsive()) {
this.min_widget_width = this.get_responsive_col_width();
}
this.generated_stylesheets = [];
this.$style_tags = $([]);
@@ -1202,7 +1204,6 @@
this.register_widget($w);
this.add_faux_rows(pos.size_y);
//this.add_faux_cols(pos.size_x);
if (max_size) {
this.set_widget_max_size($w, max_size);
@@ -1339,6 +1340,86 @@
return $widget;
};
/**
* Expand the widget. Width is set to the current grid width.
*
* @method expand_widget
* @param {HTMLElement} $widget The jQuery wrapped HTMLElement
* representing the widget.
* @param {Number} size_y The number of rows that will occupy the widget.
* @param {Function} [callback] Function executed when the widget is removed.
* @return {HTMLElement} Returns $widget.
*/
fn.expand_widget = function($widget, size_y, callback) {
var wgd = $widget.coords().grid;
var max_size_x = Math.floor(($(window).width() - this.options.widget_margins[0] * 2) /
(this.min_widget_width + this.options.widget_margins[0] * 2));
var size_x = Math.min(max_size_x, this.cols);
size_y || (size_y = wgd.size_y);
var old_size_y = wgd.size_y;
$widget.attr('pre_expand_col', wgd.col);
$widget.attr('pre_expand_sizex', wgd.size_x);
$widget.attr('pre_expand_sizey', wgd.size_y);
var new_col = 1;
if (size_y > old_size_y) {
this.add_faux_rows(Math.max(size_y - old_size_y, 0));
}
var new_grid_data = {
col: new_col,
row: wgd.row,
size_x: size_x,
size_y: size_y
};
this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);
this.set_dom_grid_height();
this.set_dom_grid_width();
if (callback) {
callback.call(this, new_grid_data.size_x, new_grid_data.size_y);
}
return $widget;
};
/**
* Collapse the widget to it's pre-expanded size
*
* @method expand_widget
* @param {HTMLElement} $widget The jQuery wrapped HTMLElement
* representing the widget.
* @param {Function} [callback] Function executed when the widget is removed.
* @return {HTMLElement} Returns $widget.
*/
fn.collapse_widget = function($widget, callback) {
var wgd = $widget.coords().grid;
var size_x = parseInt($widget.attr('pre_expand_sizex'));
var size_y = parseInt($widget.attr('pre_expand_sizey'));
var new_col = parseInt($widget.attr('pre_expand_col'));
var new_grid_data = {
col: new_col,
row: wgd.row,
size_x: size_x,
size_y: size_y
};
this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);
this.set_dom_grid_height();
this.set_dom_grid_width();
if (callback) {
callback.call(this, new_grid_data.size_x, new_grid_data.size_y);
}
return $widget;
};
/**
* Mutate widget dimensions and position in the grid map.
@@ -1351,7 +1432,6 @@
* @return {HTMLElement} Returns instance of gridster Class.
*/
fn.mutate_widget_in_gridmap = function($widget, wgd, new_wgd) {
var old_size_x = wgd.size_x;
var old_size_y = wgd.size_y;
var old_cells_occupied = this.get_cells_occupied(wgd);
@@ -1411,10 +1491,10 @@
//update coords instance attributes
$widget.data('coords').update({
width: (new_wgd.size_x * this.options.widget_base_dimensions[0] +
((new_wgd.size_x - 1) * this.options.widget_margins[0]) * 2),
width: (new_wgd.size_x * (this.is_responsive() ? this.get_responsive_col_width() : this.options.widget_base_dimensions[0]) +
((new_wgd.size_x - 1) * this.options.widget_margins[0])),
height: (new_wgd.size_y * this.options.widget_base_dimensions[1] +
((new_wgd.size_y - 1) * this.options.widget_margins[1]) * 2)
((new_wgd.size_y - 1) * this.options.widget_margins[1]))
});
$widget.attr({
@@ -1427,7 +1507,7 @@
if (empty_cols.length) {
var cols_to_remove_holes = [
empty_cols[0], new_wgd.row,
empty_cols.length,
empty_cols[empty_cols.length - 1] - empty_cols[0] + 1,
Math.min(old_size_y, new_wgd.size_y),
$widget
];
@@ -1747,6 +1827,45 @@
};
/**
* Update the width and height for a widgets coordinate data.
*
* @param {HTMLElement} $widget The widget to update.
* @param width The new width for this widget.
* @param height The new height for this widget.
* @method update_widget_dimensions
* @return {Class} Returns the instance of the Gridster Class.
*/
fn.update_widget_dimensions = function($widget, width, height) {
$widget.data('coords').update({
width: width,
height: height
});
return this;
};
/**
* Update dimensions for all widgets in the grid.
*
* @method update_widgets_dimensions
* @return {Class} Returns the instance of the Gridster Class.
*/
fn.update_widgets_dimensions = function() {
$.each(this.$widgets, $.proxy(function(idx, widget) {
var wgd = $(widget).coords().grid;
var width = (wgd.size_x * (this.is_responsive() ? this.get_responsive_col_width() : this.options.widget_base_dimensions[0]) +
((wgd.size_x - 1) * this.options.widget_margins[0]));
var height = (wgd.size_y * this.options.widget_base_dimensions[1] +
((wgd.size_y - 1) * this.options.widget_margins[1]));
this.update_widget_dimensions($(widget), width, height);
}, this));
return this;
};
/**
* Remove a widget from the mapped array of positions.
*
@@ -1794,7 +1913,7 @@
var draggable_options = $.extend(true, {}, this.options.draggable, {
offset_left: this.options.widget_margins[0],
offset_top: this.options.widget_margins[1],
container_width: this.cols * this.min_widget_width,
container_width: (this.cols * this.min_widget_width) + ((this.cols + 1) * this.options.widget_margins[0]),
limit: true,
start: function(event, ui) {
self.$widgets.filter('.player-revert')
@@ -2096,10 +2215,12 @@
bottom: ui.$player.is('.' + this.resize_handle_class + '-y')
};
this.$resized_widget.css({
if(!this.is_responsive()) {
this.$resized_widget.css({
'min-width': this.options.widget_base_dimensions[0],
'min-height': this.options.widget_base_dimensions[1]
});
});
}
var nodeName = this.$resized_widget.get(0).tagName;
this.$resize_preview_holder = $('<' + nodeName + ' />', {
@@ -2170,7 +2291,7 @@
fn.on_resize = function(event, ui) {
var rel_x = (ui.pointer.diff_left);
var rel_y = (ui.pointer.diff_top);
var wbd_x = this.options.widget_base_dimensions[0];
var wbd_x = this.is_responsive() ? this.get_responsive_col_width() : this.options.widget_base_dimensions[0];
var wbd_y = this.options.widget_base_dimensions[1];
var margin_x = this.options.widget_margins[0];
var margin_y = this.options.widget_margins[1];
@@ -2180,8 +2301,6 @@
var min_size_y = this.resize_min_size_y;
var autogrow = this.options.autogrow_cols;
var width;
var max_width = Infinity;
var max_height = Infinity;
var inc_units_x = Math.ceil((rel_x / (wbd_x + margin_x * 2)) - 0.2);
var inc_units_y = Math.ceil((rel_y / (wbd_y + margin_y * 2)) - 0.2);
@@ -2191,17 +2310,17 @@
var max_cols = (this.container_width / this.min_widget_width) -
this.resize_initial_col + 1;
var limit_width = ((max_cols * this.min_widget_width) - margin_x * 2);
var limit_width = (max_cols * this.min_widget_width) + (this.is_responsive() ? (max_cols - 1) * margin_x : -(margin_x * 2));
size_x = Math.max(Math.min(size_x, max_size_x), min_size_x);
size_x = Math.min(max_cols, size_x);
width = (max_size_x * wbd_x) + ((size_x - 1) * margin_x * 2);
width = (max_size_x * wbd_x) + ((size_x - 1) * margin_x );
max_width = Math.min(width, limit_width);
min_width = (min_size_x * wbd_x) + ((size_x - 1) * margin_x * 2);
min_width = (min_size_x * wbd_x) + ((size_x - 1) * margin_x);
size_y = Math.max(Math.min(size_y, max_size_y), min_size_y);
max_height = (max_size_y * wbd_y) + ((size_y - 1) * margin_y * 2);
min_height = (min_size_y * wbd_y) + ((size_y - 1) * margin_y * 2);
max_height = (max_size_y * wbd_y) + ((size_y - 1) * margin_y);
min_height = (min_size_y * wbd_y) + ((size_y - 1) * margin_y);
if (this.resize_dir.right) {
size_y = this.resize_initial_sizey;
@@ -3598,7 +3717,7 @@
fn.set_dom_grid_height = function(height) {
if (typeof height === 'undefined') {
var r = this.get_highest_occupied_cell().row;
height = r * this.min_widget_height;
height = ((r + 1) * this.options.widget_margins[1]) + (r * this.min_widget_height);
}
this.container_height = height;
@@ -3621,12 +3740,76 @@
this.cols);
cols = Math.min(max_cols, Math.max(cols, this.options.min_cols));
this.container_width = cols * this.min_widget_width;
this.container_width = ((cols + 1) * this.options.widget_margins[0]) + (cols * this.min_widget_width);
this.$el.css('width', this.container_width);
if(this.is_responsive()) {
this.$el.css({'min-width': '100%', 'max-width': '100%'});
return this;
}
return this;
};
/**
* Checks if this grid is responsive.
* autogenerate_stylesheet be true, the widget base width should be auto, and there must be a max_cols set.
* @returns {Boolean}
*/
fn.is_responsive = function() {
return this.options.autogenerate_stylesheet && this.options.widget_base_dimensions[0] === 'auto' && this.options.max_cols !== Infinity;
};
/**
*
* @returns {number}
*/
fn.get_responsive_col_width = function() {
var cols = this.cols || this.options.max_cols;
return (this.$el.width() - ((cols + 1) * this.options.widget_margins[0])) / cols;
};
fn.resize_responsive_layout = function() {
this.min_widget_width = this.get_responsive_col_width();
this.generate_grid_and_stylesheet();
this.update_widgets_dimensions();
this.drag_api.set_limits((this.cols * this.min_widget_width) + ((this.cols) * this.options.widget_margins[0]));
};
fn.toggle_collapsed_grid = function(collapse, opts) {
if(collapse) {
this.$widgets.css({
'margin-top' : opts.widget_margins[0],
'margin-bottom' : opts.widget_margins[0],
'min-height': opts.widget_base_dimensions[1]
});
this.$el.addClass('collapsed');
if(this.options.resize.enabled && this.resize_api) {
this.disable_resize();
}
if(this.drag_api) {
this.disable();
}
} else {
this.$widgets.css({
'margin-top' : 'auto',
'margin-bottom' : 'auto',
'min-height': 'auto'
});
this.$el.removeClass('collapsed');
if(this.options.resize.enabled && this.resize_api) {
this.enable_resize();
}
if(this.drag_api) {
this.enable();
}
}
}
/**
* It generates the neccessary styles to position the widgets.
*
@@ -3638,10 +3821,8 @@
fn.generate_stylesheet = function(opts) {
var styles = '';
var max_size_x = this.options.max_size_x || this.cols;
var max_rows = 0;
var max_cols = 0;
var i;
var rules;
var full_width = this.is_responsive() && this.options.responsive_breakpoint && ($(window).width() < this.options.responsive_breakpoint);
opts || (opts = {});
opts.cols || (opts.cols = this.cols);
@@ -3649,12 +3830,16 @@
opts.namespace || (opts.namespace = this.options.namespace);
opts.widget_base_dimensions ||
(opts.widget_base_dimensions = this.options.widget_base_dimensions);
opts.widget_margins ||
(opts.widget_margins = this.options.widget_margins);
opts.min_widget_width = (opts.widget_margins[0] * 2) +
opts.widget_base_dimensions[0];
opts.min_widget_height = (opts.widget_margins[1] * 2) +
opts.widget_base_dimensions[1];
if(this.is_responsive()) {
opts.widget_base_dimensions = [this.get_responsive_col_width(), opts.widget_base_dimensions[1]];
}
opts.widget_margins || (opts.widget_margins = this.options.widget_margins);
this.toggle_collapsed_grid(full_width, opts);
// don't duplicate stylesheets for the same configuration
var serialized_opts = $.param(opts);
@@ -3666,31 +3851,27 @@
Gridster.generated_stylesheets.push(serialized_opts);
/* generate CSS styles for cols */
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]) +
((i + 1) * opts.widget_margins[0])) + 'px; }\n');
for(i = 1; i <= opts.cols + 1; i++) {
styles += (opts.namespace + ' [data-col="' + i + '"] { left:' +
(full_width ? this.options.widget_margins[0] : ((i * opts.widget_margins[0]) + ((i - 1) * opts.widget_base_dimensions[0])))
+ 'px; }\n');
}
/* generate CSS styles for rows */
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]) +
((i + 1) * opts.widget_margins[1]) ) + 'px; }\n');
for(i = 1; i <= opts.rows + 1; i++) {
styles += (opts.namespace + ' [data-row="' + i + '"] { top:' +
((i * opts.widget_margins[1]) + ((i - 1) * opts.widget_base_dimensions[1]))
+ 'px; }\n');
}
for (var y = 1; y <= opts.rows; y++) {
styles += (opts.namespace + ' [data-sizey="' + y + '"] { height:' +
(y * opts.widget_base_dimensions[1] +
(y - 1) * (opts.widget_margins[1] * 2)) + 'px; }\n');
styles += (opts.namespace + ' [data-sizey="' + y + '"] { height:' +
(full_width ? 'auto' : ((y * opts.widget_base_dimensions[1]) + ((y - 1) * opts.widget_margins[1]))) + 'px; }\n');
}
for (var x = 1; x <= max_size_x; x++) {
styles += (opts.namespace + ' [data-sizex="' + x + '"] { width:' +
(x * opts.widget_base_dimensions[0] +
(x - 1) * (opts.widget_margins[0] * 2)) + 'px; }\n');
(full_width ? ($(window).width() - this.options.widget_margins[0] * 2) : ((x * opts.widget_base_dimensions[0]) + ((x - 1) * opts.widget_margins[0]))) + 'px; }\n');
}
this.remove_style_tags();
@@ -3871,6 +4052,10 @@
});
}, this));
if (this.is_responsive()) {
this.resize_responsive_layout();
}
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
package.json
+3 -12
View File
@@ -5,22 +5,13 @@
"version": "0.5.6",
"homepage": "http://gridster.net/",
"author": {
"name": "ducksboard",
"email": "hackers@ducksboard.com"
"name": "decksterteam",
"email": "deckster@42six.com"
},
"repository": {
"type": "git",
"url": "git://github.com/ducksboard/gridster.js.git"
"url": "git://github.com/DecksterTeam/gridster.js.git"
},
"bugs": {
"url": "https://github.com/ducksboard/gridster.js/issues"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/ducksboard/gridster.js/blob/master/LICENSE"
}
],
"keywords": [],
"dependencies": {
"jquery": "git+https://github.com/jquery/jquery.git#2.0.3"
src/jquery.gridster.css
+4
View File
@@ -16,6 +16,10 @@
position: absolute;
}
.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;
src/jquery.gridster.js
+233 -48
View File
@@ -32,6 +32,7 @@
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
auto_init: true,
responsive_breakpoint: false,
serialize_params: function($w, wgd) {
return {
col: wgd.col,
@@ -138,11 +139,12 @@
this.options.widget_selector).addClass('gs-w');
this.widgets = [];
this.$changed = $([]);
this.wrapper_width = this.$wrapper.width();
this.min_widget_width = (this.options.widget_margins[0] * 2) +
this.options.widget_base_dimensions[0];
this.min_widget_height = (this.options.widget_margins[1] * 2) +
this.options.widget_base_dimensions[1];
this.min_widget_width = this.options.widget_base_dimensions[0];
this.min_widget_height = this.options.widget_base_dimensions[1];
if(this.is_responsive()) {
this.min_widget_width = this.get_responsive_col_width();
}
this.generated_stylesheets = [];
this.$style_tags = $([]);
@@ -355,7 +357,6 @@
this.register_widget($w);
this.add_faux_rows(pos.size_y);
//this.add_faux_cols(pos.size_x);
if (max_size) {
this.set_widget_max_size($w, max_size);
@@ -492,6 +493,86 @@
return $widget;
};
/**
* Expand the widget. Width is set to the current grid width.
*
* @method expand_widget
* @param {HTMLElement} $widget The jQuery wrapped HTMLElement
* representing the widget.
* @param {Number} size_y The number of rows that will occupy the widget.
* @param {Function} [callback] Function executed when the widget is removed.
* @return {HTMLElement} Returns $widget.
*/
fn.expand_widget = function($widget, size_y, callback) {
var wgd = $widget.coords().grid;
var max_size_x = Math.floor(($(window).width() - this.options.widget_margins[0] * 2) /
(this.min_widget_width + this.options.widget_margins[0] * 2));
var size_x = Math.min(max_size_x, this.cols);
size_y || (size_y = wgd.size_y);
var old_size_y = wgd.size_y;
$widget.attr('pre_expand_col', wgd.col);
$widget.attr('pre_expand_sizex', wgd.size_x);
$widget.attr('pre_expand_sizey', wgd.size_y);
var new_col = 1;
if (size_y > old_size_y) {
this.add_faux_rows(Math.max(size_y - old_size_y, 0));
}
var new_grid_data = {
col: new_col,
row: wgd.row,
size_x: size_x,
size_y: size_y
};
this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);
this.set_dom_grid_height();
this.set_dom_grid_width();
if (callback) {
callback.call(this, new_grid_data.size_x, new_grid_data.size_y);
}
return $widget;
};
/**
* Collapse the widget to it's pre-expanded size
*
* @method expand_widget
* @param {HTMLElement} $widget The jQuery wrapped HTMLElement
* representing the widget.
* @param {Function} [callback] Function executed when the widget is removed.
* @return {HTMLElement} Returns $widget.
*/
fn.collapse_widget = function($widget, callback) {
var wgd = $widget.coords().grid;
var size_x = parseInt($widget.attr('pre_expand_sizex'));
var size_y = parseInt($widget.attr('pre_expand_sizey'));
var new_col = parseInt($widget.attr('pre_expand_col'));
var new_grid_data = {
col: new_col,
row: wgd.row,
size_x: size_x,
size_y: size_y
};
this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);
this.set_dom_grid_height();
this.set_dom_grid_width();
if (callback) {
callback.call(this, new_grid_data.size_x, new_grid_data.size_y);
}
return $widget;
};
/**
* Mutate widget dimensions and position in the grid map.
@@ -504,7 +585,6 @@
* @return {HTMLElement} Returns instance of gridster Class.
*/
fn.mutate_widget_in_gridmap = function($widget, wgd, new_wgd) {
var old_size_x = wgd.size_x;
var old_size_y = wgd.size_y;
var old_cells_occupied = this.get_cells_occupied(wgd);
@@ -564,10 +644,10 @@
//update coords instance attributes
$widget.data('coords').update({
width: (new_wgd.size_x * this.options.widget_base_dimensions[0] +
((new_wgd.size_x - 1) * this.options.widget_margins[0]) * 2),
width: (new_wgd.size_x * (this.is_responsive() ? this.get_responsive_col_width() : this.options.widget_base_dimensions[0]) +
((new_wgd.size_x - 1) * this.options.widget_margins[0])),
height: (new_wgd.size_y * this.options.widget_base_dimensions[1] +
((new_wgd.size_y - 1) * this.options.widget_margins[1]) * 2)
((new_wgd.size_y - 1) * this.options.widget_margins[1]))
});
$widget.attr({
@@ -580,7 +660,7 @@
if (empty_cols.length) {
var cols_to_remove_holes = [
empty_cols[0], new_wgd.row,
empty_cols.length,
empty_cols[empty_cols.length - 1] - empty_cols[0] + 1,
Math.min(old_size_y, new_wgd.size_y),
$widget
];
@@ -900,6 +980,45 @@
};
/**
* Update the width and height for a widgets coordinate data.
*
* @param {HTMLElement} $widget The widget to update.
* @param width The new width for this widget.
* @param height The new height for this widget.
* @method update_widget_dimensions
* @return {Class} Returns the instance of the Gridster Class.
*/
fn.update_widget_dimensions = function($widget, width, height) {
$widget.data('coords').update({
width: width,
height: height
});
return this;
};
/**
* Update dimensions for all widgets in the grid.
*
* @method update_widgets_dimensions
* @return {Class} Returns the instance of the Gridster Class.
*/
fn.update_widgets_dimensions = function() {
$.each(this.$widgets, $.proxy(function(idx, widget) {
var wgd = $(widget).coords().grid;
var width = (wgd.size_x * (this.is_responsive() ? this.get_responsive_col_width() : this.options.widget_base_dimensions[0]) +
((wgd.size_x - 1) * this.options.widget_margins[0]));
var height = (wgd.size_y * this.options.widget_base_dimensions[1] +
((wgd.size_y - 1) * this.options.widget_margins[1]));
this.update_widget_dimensions($(widget), width, height);
}, this));
return this;
};
/**
* Remove a widget from the mapped array of positions.
*
@@ -947,7 +1066,7 @@
var draggable_options = $.extend(true, {}, this.options.draggable, {
offset_left: this.options.widget_margins[0],
offset_top: this.options.widget_margins[1],
container_width: this.cols * this.min_widget_width,
container_width: (this.cols * this.min_widget_width) + ((this.cols + 1) * this.options.widget_margins[0]),
limit: true,
start: function(event, ui) {
self.$widgets.filter('.player-revert')
@@ -1249,10 +1368,12 @@
bottom: ui.$player.is('.' + this.resize_handle_class + '-y')
};
this.$resized_widget.css({
if(!this.is_responsive()) {
this.$resized_widget.css({
'min-width': this.options.widget_base_dimensions[0],
'min-height': this.options.widget_base_dimensions[1]
});
});
}
var nodeName = this.$resized_widget.get(0).tagName;
this.$resize_preview_holder = $('<' + nodeName + ' />', {
@@ -1323,7 +1444,7 @@
fn.on_resize = function(event, ui) {
var rel_x = (ui.pointer.diff_left);
var rel_y = (ui.pointer.diff_top);
var wbd_x = this.options.widget_base_dimensions[0];
var wbd_x = this.is_responsive() ? this.get_responsive_col_width() : this.options.widget_base_dimensions[0];
var wbd_y = this.options.widget_base_dimensions[1];
var margin_x = this.options.widget_margins[0];
var margin_y = this.options.widget_margins[1];
@@ -1333,8 +1454,6 @@
var min_size_y = this.resize_min_size_y;
var autogrow = this.options.autogrow_cols;
var width;
var max_width = Infinity;
var max_height = Infinity;
var inc_units_x = Math.ceil((rel_x / (wbd_x + margin_x * 2)) - 0.2);
var inc_units_y = Math.ceil((rel_y / (wbd_y + margin_y * 2)) - 0.2);
@@ -1344,17 +1463,17 @@
var max_cols = (this.container_width / this.min_widget_width) -
this.resize_initial_col + 1;
var limit_width = ((max_cols * this.min_widget_width) - margin_x * 2);
var limit_width = (max_cols * this.min_widget_width) + (this.is_responsive() ? (max_cols - 1) * margin_x : -(margin_x * 2));
size_x = Math.max(Math.min(size_x, max_size_x), min_size_x);
size_x = Math.min(max_cols, size_x);
width = (max_size_x * wbd_x) + ((size_x - 1) * margin_x * 2);
width = (max_size_x * wbd_x) + ((size_x - 1) * margin_x );
max_width = Math.min(width, limit_width);
min_width = (min_size_x * wbd_x) + ((size_x - 1) * margin_x * 2);
min_width = (min_size_x * wbd_x) + ((size_x - 1) * margin_x);
size_y = Math.max(Math.min(size_y, max_size_y), min_size_y);
max_height = (max_size_y * wbd_y) + ((size_y - 1) * margin_y * 2);
min_height = (min_size_y * wbd_y) + ((size_y - 1) * margin_y * 2);
max_height = (max_size_y * wbd_y) + ((size_y - 1) * margin_y);
min_height = (min_size_y * wbd_y) + ((size_y - 1) * margin_y);
if (this.resize_dir.right) {
size_y = this.resize_initial_sizey;
@@ -2751,7 +2870,7 @@
fn.set_dom_grid_height = function(height) {
if (typeof height === 'undefined') {
var r = this.get_highest_occupied_cell().row;
height = r * this.min_widget_height;
height = ((r + 1) * this.options.widget_margins[1]) + (r * this.min_widget_height);
}
this.container_height = height;
@@ -2774,12 +2893,76 @@
this.cols);
cols = Math.min(max_cols, Math.max(cols, this.options.min_cols));
this.container_width = cols * this.min_widget_width;
this.container_width = ((cols + 1) * this.options.widget_margins[0]) + (cols * this.min_widget_width);
this.$el.css('width', this.container_width);
if(this.is_responsive()) {
this.$el.css({'min-width': '100%', 'max-width': '100%'});
return this;
}
return this;
};
/**
* Checks if this grid is responsive.
* autogenerate_stylesheet be true, the widget base width should be auto, and there must be a max_cols set.
* @returns {Boolean}
*/
fn.is_responsive = function() {
return this.options.autogenerate_stylesheet && this.options.widget_base_dimensions[0] === 'auto' && this.options.max_cols !== Infinity;
};
/**
*
* @returns {number}
*/
fn.get_responsive_col_width = function() {
var cols = this.cols || this.options.max_cols;
return (this.$el.width() - ((cols + 1) * this.options.widget_margins[0])) / cols;
};
fn.resize_responsive_layout = function() {
this.min_widget_width = this.get_responsive_col_width();
this.generate_grid_and_stylesheet();
this.update_widgets_dimensions();
this.drag_api.set_limits((this.cols * this.min_widget_width) + ((this.cols) * this.options.widget_margins[0]));
};
fn.toggle_collapsed_grid = function(collapse, opts) {
if(collapse) {
this.$widgets.css({
'margin-top' : opts.widget_margins[0],
'margin-bottom' : opts.widget_margins[0],
'min-height': opts.widget_base_dimensions[1]
});
this.$el.addClass('collapsed');
if(this.options.resize.enabled && this.resize_api) {
this.disable_resize();
}
if(this.drag_api) {
this.disable();
}
} else {
this.$widgets.css({
'margin-top' : 'auto',
'margin-bottom' : 'auto',
'min-height': 'auto'
});
this.$el.removeClass('collapsed');
if(this.options.resize.enabled && this.resize_api) {
this.enable_resize();
}
if(this.drag_api) {
this.enable();
}
}
}
/**
* It generates the neccessary styles to position the widgets.
*
@@ -2791,10 +2974,8 @@
fn.generate_stylesheet = function(opts) {
var styles = '';
var max_size_x = this.options.max_size_x || this.cols;
var max_rows = 0;
var max_cols = 0;
var i;
var rules;
var full_width = this.is_responsive() && this.options.responsive_breakpoint && ($(window).width() < this.options.responsive_breakpoint);
opts || (opts = {});
opts.cols || (opts.cols = this.cols);
@@ -2802,12 +2983,16 @@
opts.namespace || (opts.namespace = this.options.namespace);
opts.widget_base_dimensions ||
(opts.widget_base_dimensions = this.options.widget_base_dimensions);
opts.widget_margins ||
(opts.widget_margins = this.options.widget_margins);
opts.min_widget_width = (opts.widget_margins[0] * 2) +
opts.widget_base_dimensions[0];
opts.min_widget_height = (opts.widget_margins[1] * 2) +
opts.widget_base_dimensions[1];
if(this.is_responsive()) {
opts.widget_base_dimensions = [this.get_responsive_col_width(), opts.widget_base_dimensions[1]];
}
opts.widget_margins || (opts.widget_margins = this.options.widget_margins);
this.toggle_collapsed_grid(full_width, opts);
// don't duplicate stylesheets for the same configuration
var serialized_opts = $.param(opts);
@@ -2819,31 +3004,27 @@
Gridster.generated_stylesheets.push(serialized_opts);
/* generate CSS styles for cols */
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]) +
((i + 1) * opts.widget_margins[0])) + 'px; }\n');
for(i = 1; i <= opts.cols + 1; i++) {
styles += (opts.namespace + ' [data-col="' + i + '"] { left:' +
(full_width ? this.options.widget_margins[0] : ((i * opts.widget_margins[0]) + ((i - 1) * opts.widget_base_dimensions[0])))
+ 'px; }\n');
}
/* generate CSS styles for rows */
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]) +
((i + 1) * opts.widget_margins[1]) ) + 'px; }\n');
for(i = 1; i <= opts.rows + 1; i++) {
styles += (opts.namespace + ' [data-row="' + i + '"] { top:' +
((i * opts.widget_margins[1]) + ((i - 1) * opts.widget_base_dimensions[1]))
+ 'px; }\n');
}
for (var y = 1; y <= opts.rows; y++) {
styles += (opts.namespace + ' [data-sizey="' + y + '"] { height:' +
(y * opts.widget_base_dimensions[1] +
(y - 1) * (opts.widget_margins[1] * 2)) + 'px; }\n');
styles += (opts.namespace + ' [data-sizey="' + y + '"] { height:' +
(full_width ? 'auto' : ((y * opts.widget_base_dimensions[1]) + ((y - 1) * opts.widget_margins[1]))) + 'px; }\n');
}
for (var x = 1; x <= max_size_x; x++) {
styles += (opts.namespace + ' [data-sizex="' + x + '"] { width:' +
(x * opts.widget_base_dimensions[0] +
(x - 1) * (opts.widget_margins[0] * 2)) + 'px; }\n');
(full_width ? ($(window).width() - this.options.widget_margins[0] * 2) : ((x * opts.widget_base_dimensions[0]) + ((x - 1) * opts.widget_margins[0]))) + 'px; }\n');
}
this.remove_style_tags();
@@ -3024,6 +3205,10 @@
});
}, this));
if (this.is_responsive()) {
this.resize_responsive_layout();
}
return this;
};