Merge pull request #19 from heartdisease/master

feat:  Extended default options by two custom functions for showing and hiding widgets
This commit is contained in:
David S Morse
2015-06-30 14:13:42 -06:00
6 changed files with 117 additions and 81 deletions
+38 -25
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.6.10 - 2015-06-25
/*! gridster.js - v0.6.10 - 2015-06-30
* https://dsmorse.github.io/gridster.js/
* Copyright (c) 2015 ducksboard; Licensed MIT */
@@ -939,7 +939,21 @@
scroll_container: window,
shift_larger_widgets_down: true,
shift_widgets_up: true,
serialize_params: function ($w, wgd) {
show_element: function($el, callback) {
if (callback) {
$el.fadeIn(callback);
} else {
$el.fadeIn();
}
},
hide_element: function($el, callback) {
if (callback) {
$el.fadeOut(callback);
} else {
$el.fadeOut();
}
},
serialize_params: function($w, wgd) {
return {
col: wgd.col,
row: wgd.row,
@@ -1004,20 +1018,25 @@
* for each widget in the serialization. Two arguments are passed:
* `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid
* coords object (`col`, `row`, `size_x`, `size_y`).
* @param {Boolean} [options.shift_larger_widgets_down] Determines if how widgets get pushes
* @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
* @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 {Function} [options.show_element] Makes the given element visible. Two arguments are passed:
* `$el`: the jQuery wrapped HTMLElement, and `callback`: a function that is executed
* after the element is made visible. The callback parameter is optional.
* @param {Function} [options.hide_element] Hides the given element. Two arguments are passed:
* `$el`: the jQuery wrapped HTMLElement, and `callback`: a function that is executed
* after the element is hidden. The callback parameter is optional.
* @param {Object} [options.collision] An Object with all options for
* Collision class you want to overwrite. See Collision docs for
* 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 {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
* Draggable class you want to overwrite. See Draggable docs for more
* info.
* Draggable class you want to overwrite. See Draggable docs for more info.
* @param {Object|Function} [options.draggable.ignore_dragging] Note that
* if you use a Function, and resize is enabled, you should ignore the
* resize handlers manually (options.resize.handle_class).
@@ -1279,9 +1298,9 @@
* @param {Number} [row] The row the widget should start in.
* @param {Array} [max_size] max_size Maximun size (in units) for width and height.
* @param {Array} [min_size] min_size Minimum size (in units) for width and height.
* @param {Function} [callback] Function executed after the widget is shown.
* @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing.
* the widget that was just created.
* @param callback
*/
fn.add_widget = function (html, size_x, size_y, col, row, max_size, min_size, callback) {
var pos;
@@ -1338,14 +1357,9 @@
}, this), 0);
}
return $w.fadeIn({
complete: function () {
if (callback) {
callback.call(this);
}
}
});
this.options.show_element.call(this, $w, callback);
return $w;
};
@@ -1873,11 +1887,10 @@
size_y: size_y
});
$nexts.not(exclude).each($.proxy(function(i, widget) {
this.move_widget_up( $(widget), size_y );
}, this));
$nexts.not(exclude).each($.proxy(function(i, widget) {
this.move_widget_up( $(widget), size_y );
}, this));
this.set_dom_grid_height();
return this;
@@ -1941,7 +1954,7 @@
* @param {HTMLElement} el The jQuery wrapped HTMLElement you want to remove.
* @param {Boolean|Function} [silent] If true, widgets below the removed one
* will not move up. If a Function is passed it will be used as callback.
* @param {Function} [callback] Function executed when the widget is removed.
* @param {Function} [callback] Function executed after the widget is removed.
* @return {Gridster} Returns the instance of the Gridster Class.
*/
fn.remove_widget = function (el, silent, callback) {
@@ -1969,7 +1982,7 @@
this.remove_from_gridmap(wgd);
$el.fadeOut($.proxy(function () {
this.options.hide_element.call(this, $el, $.proxy(function(){
$el.remove();
if (!silent) {
-1
View File
@@ -1,2 +1 @@
/*! gridster.js - v0.6.10 - 2015-06-25 - * https://dsmorse.github.io/gridster.js/ - 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 .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.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 .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}
+2 -3
View File
File diff suppressed because one or more lines are too long
+38 -25
View File
@@ -1,4 +1,4 @@
/*! gridster.js - v0.6.10 - 2015-06-25
/*! gridster.js - v0.6.10 - 2015-06-30
* https://dsmorse.github.io/gridster.js/
* Copyright (c) 2015 ducksboard; Licensed MIT */
@@ -939,7 +939,21 @@
scroll_container: window,
shift_larger_widgets_down: true,
shift_widgets_up: true,
serialize_params: function ($w, wgd) {
show_element: function($el, callback) {
if (callback) {
$el.fadeIn(callback);
} else {
$el.fadeIn();
}
},
hide_element: function($el, callback) {
if (callback) {
$el.fadeOut(callback);
} else {
$el.fadeOut();
}
},
serialize_params: function($w, wgd) {
return {
col: wgd.col,
row: wgd.row,
@@ -1004,20 +1018,25 @@
* for each widget in the serialization. Two arguments are passed:
* `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid
* coords object (`col`, `row`, `size_x`, `size_y`).
* @param {Boolean} [options.shift_larger_widgets_down] Determines if how widgets get pushes
* @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
* @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 {Function} [options.show_element] Makes the given element visible. Two arguments are passed:
* `$el`: the jQuery wrapped HTMLElement, and `callback`: a function that is executed
* after the element is made visible. The callback parameter is optional.
* @param {Function} [options.hide_element] Hides the given element. Two arguments are passed:
* `$el`: the jQuery wrapped HTMLElement, and `callback`: a function that is executed
* after the element is hidden. The callback parameter is optional.
* @param {Object} [options.collision] An Object with all options for
* Collision class you want to overwrite. See Collision docs for
* 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 {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
* Draggable class you want to overwrite. See Draggable docs for more
* info.
* Draggable class you want to overwrite. See Draggable docs for more info.
* @param {Object|Function} [options.draggable.ignore_dragging] Note that
* if you use a Function, and resize is enabled, you should ignore the
* resize handlers manually (options.resize.handle_class).
@@ -1279,9 +1298,9 @@
* @param {Number} [row] The row the widget should start in.
* @param {Array} [max_size] max_size Maximun size (in units) for width and height.
* @param {Array} [min_size] min_size Minimum size (in units) for width and height.
* @param {Function} [callback] Function executed after the widget is shown.
* @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing.
* the widget that was just created.
* @param callback
*/
fn.add_widget = function (html, size_x, size_y, col, row, max_size, min_size, callback) {
var pos;
@@ -1338,14 +1357,9 @@
}, this), 0);
}
return $w.fadeIn({
complete: function () {
if (callback) {
callback.call(this);
}
}
});
this.options.show_element.call(this, $w, callback);
return $w;
};
@@ -1873,11 +1887,10 @@
size_y: size_y
});
$nexts.not(exclude).each($.proxy(function(i, widget) {
this.move_widget_up( $(widget), size_y );
}, this));
$nexts.not(exclude).each($.proxy(function(i, widget) {
this.move_widget_up( $(widget), size_y );
}, this));
this.set_dom_grid_height();
return this;
@@ -1941,7 +1954,7 @@
* @param {HTMLElement} el The jQuery wrapped HTMLElement you want to remove.
* @param {Boolean|Function} [silent] If true, widgets below the removed one
* will not move up. If a Function is passed it will be used as callback.
* @param {Function} [callback] Function executed when the widget is removed.
* @param {Function} [callback] Function executed after the widget is removed.
* @return {Gridster} Returns the instance of the Gridster Class.
*/
fn.remove_widget = function (el, silent, callback) {
@@ -1969,7 +1982,7 @@
this.remove_from_gridmap(wgd);
$el.fadeOut($.proxy(function () {
this.options.hide_element.call(this, $el, $.proxy(function(){
$el.remove();
if (!silent) {
File diff suppressed because one or more lines are too long
+37 -24
View File
@@ -41,7 +41,21 @@
scroll_container: window,
shift_larger_widgets_down: true,
shift_widgets_up: true,
serialize_params: function ($w, wgd) {
show_element: function($el, callback) {
if (callback) {
$el.fadeIn(callback);
} else {
$el.fadeIn();
}
},
hide_element: function($el, callback) {
if (callback) {
$el.fadeOut(callback);
} else {
$el.fadeOut();
}
},
serialize_params: function($w, wgd) {
return {
col: wgd.col,
row: wgd.row,
@@ -106,20 +120,25 @@
* for each widget in the serialization. Two arguments are passed:
* `$w`: the jQuery wrapped HTMLElement, and `wgd`: the grid
* coords object (`col`, `row`, `size_x`, `size_y`).
* @param {Boolean} [options.shift_larger_widgets_down] Determines if how widgets get pushes
* @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
* @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 {Function} [options.show_element] Makes the given element visible. Two arguments are passed:
* `$el`: the jQuery wrapped HTMLElement, and `callback`: a function that is executed
* after the element is made visible. The callback parameter is optional.
* @param {Function} [options.hide_element] Hides the given element. Two arguments are passed:
* `$el`: the jQuery wrapped HTMLElement, and `callback`: a function that is executed
* after the element is hidden. The callback parameter is optional.
* @param {Object} [options.collision] An Object with all options for
* Collision class you want to overwrite. See Collision docs for
* 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 {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
* Draggable class you want to overwrite. See Draggable docs for more
* info.
* Draggable class you want to overwrite. See Draggable docs for more info.
* @param {Object|Function} [options.draggable.ignore_dragging] Note that
* if you use a Function, and resize is enabled, you should ignore the
* resize handlers manually (options.resize.handle_class).
@@ -381,9 +400,9 @@
* @param {Number} [row] The row the widget should start in.
* @param {Array} [max_size] max_size Maximun size (in units) for width and height.
* @param {Array} [min_size] min_size Minimum size (in units) for width and height.
* @param {Function} [callback] Function executed after the widget is shown.
* @return {HTMLElement} Returns the jQuery wrapped HTMLElement representing.
* the widget that was just created.
* @param callback
*/
fn.add_widget = function (html, size_x, size_y, col, row, max_size, min_size, callback) {
var pos;
@@ -440,14 +459,9 @@
}, this), 0);
}
return $w.fadeIn({
complete: function () {
if (callback) {
callback.call(this);
}
}
});
this.options.show_element.call(this, $w, callback);
return $w;
};
@@ -975,11 +989,10 @@
size_y: size_y
});
$nexts.not(exclude).each($.proxy(function(i, widget) {
this.move_widget_up( $(widget), size_y );
}, this));
$nexts.not(exclude).each($.proxy(function(i, widget) {
this.move_widget_up( $(widget), size_y );
}, this));
this.set_dom_grid_height();
return this;
@@ -1043,7 +1056,7 @@
* @param {HTMLElement} el The jQuery wrapped HTMLElement you want to remove.
* @param {Boolean|Function} [silent] If true, widgets below the removed one
* will not move up. If a Function is passed it will be used as callback.
* @param {Function} [callback] Function executed when the widget is removed.
* @param {Function} [callback] Function executed after the widget is removed.
* @return {Gridster} Returns the instance of the Gridster Class.
*/
fn.remove_widget = function (el, silent, callback) {
@@ -1071,7 +1084,7 @@
this.remove_from_gridmap(wgd);
$el.fadeOut($.proxy(function () {
this.options.hide_element.call(this, $el, $.proxy(function(){
$el.remove();
if (!silent) {