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

feat(gridster): add config to set custom show/hide widget methods

Browse Source 
by default jQuery’s `hide` and `show` methods are used. You could also
use fadeIn/fadeOut or write your own kind of jQuery plugin like
`$.fn.showInAFancyWay` and use `showInAFancyWay` as the value in the
show_method config option.

If you want to keep the previos behaviour, you need to set
`hide_method` option to `’fadeOut’`

Breaking Changes

`remove_widget` and `remove_all_widgets` methods not return a promise
instead of the gridster instance
This commit is contained in:
Javi Sánchez-Marín
2015-04-16 17:45:11 +02:00
parent e258d595b0
commit 7de5bbabc0
2 changed files with 43 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/jquery.gridster.js
View File

@ -35,6 +35,8 @@
autogenerate_stylesheet: true,
avoid_overlapped_widgets: true,
auto_init: true,
show_method: 'show',
hide_method: 'hide',
serialize_params: function($w, wgd) {
return {
col: wgd.col,
@ -372,7 +374,7 @@
this.drag_api.set_limits(this.cols * this.min_widget_width);
return $w.fadeIn();
return $w[this.options.show_method]();
};
@ -721,9 +723,10 @@
* @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.
* @return {Class} Returns the instance of the Gridster Class.
* @return {Promise} Returns a jQuery promise.
*/
fn.remove_widget = function(el, silent, callback) {
var d = $.Deferred();
var $el = el instanceof $ ? el : $(el);
var wgd = $el.coords().grid;
@ -740,23 +743,24 @@
this.remove_from_gridmap(wgd);
$el.fadeOut($.proxy(function() {
$el.remove();
$el[this.options.hide_method]({
always: $.proxy(function() {
$el.remove();
if (!silent) {
$nexts.each($.proxy(function(i, widget) {
this.move_widget_up( $(widget), wgd.size_y );
}, this));
}
if (!silent) {
$nexts.each($.proxy(function(i, widget) {
this.move_widget_up( $(widget), wgd.size_y );
}, this));
}
this.set_dom_grid_height();
this.set_dom_grid_height();
if (callback) {
callback.call(this, el);
}
}, this));
callback && callback.call(this, el);
d.resolveWith(this);
}, this)
});
return this;
return d.promise();
};
@ -765,14 +769,21 @@
*
* @method remove_all_widgets
* @param {Function} callback Function executed for each widget removed.
* @return {Class} Returns the instance of the Gridster Class.
* @return {Promise} Returns a jQuery promise.
*/
fn.remove_all_widgets = function(callback) {
var d = $.Deferred();
var promises = [];
this.$widgets.each($.proxy(function(i, el){
this.remove_widget(el, true, callback);
promises.push(this.remove_widget(el, true));
}, this));
return this;
$.when.apply(null, promises).done($.proxy(function() {
callback && callback.call(this);
d.resolveWith(this);
}, this));
return d.promise();
};

27
test/index.js
View File

@ -349,15 +349,16 @@ describe('gridster.js', function() {
expect($el).to.have.length(1);
});
it('should be positioned in the top/leftmost available space', function() {
this.gridster.remove_widget('[data-col=1][data-row=1]');
it('should be positioned in the top/leftmost available space', function(done) {
this.gridster.remove_widget('[data-col=1][data-row=1]').done(function() {
this.gridster.add_widget('<li class="new">new</li>', 1, 1);
this.gridster.add_widget('<li class="new">new</li>', 1, 1);
var $el = this.gridster.$el.find('.new');
expect($el.attr('data-col')).to.equal('1');
expect($el.attr('data-row')).to.equal('1');
expect(this.gridster.gridmap[1][1][0]).to.equal($el[0]);
var $el = this.gridster.$el.find('.new');
expect($el.attr('data-col')).to.equal('1');
expect($el.attr('data-row')).to.equal('1');
expect(this.gridster.gridmap[1][1][0]).to.equal($el[0]);
done();
}.bind(this));
});
it('should respect the specified dimensions and coords', function() {
@ -384,7 +385,7 @@ describe('gridster.js', function() {
it('should be removed from the grid', function(done) {
var $el = this.gridster.$el.find('[data-col=1][data-row=1]');
this.gridster.remove_widget($el, false, function() {
this.gridster.remove_widget($el, false).done(function() {
expect(this.gridmap[1][1]).to.be.false;
expect(document.contains($el[0])).to.be.false;
done();
@ -396,8 +397,8 @@ describe('gridster.js', function() {
var $el2 = this.gridster.$el.find('[data-col=2][data-row=1]');
var $el3 = this.gridster.$el.find('[data-col=1][data-row=3]');
var silent = false;
this.gridster.remove_widget($el1, silent, function() {
this.remove_widget($el2, silent, function() {
this.gridster.remove_widget($el1, silent).done(function() {
this.remove_widget($el2, silent).done(function() {
expect($el3.attr('data-col')).to.equal('1');
expect($el3.attr('data-row')).to.equal('1');
done();
@ -410,8 +411,8 @@ describe('gridster.js', function() {
var $el2 = this.gridster.$el.find('[data-col=2][data-row=1]');
var $el3 = this.gridster.$el.find('[data-col=1][data-row=3]');
var silent = true;
this.gridster.remove_widget($el1, silent, function() {
this.remove_widget($el2, silent, function() {
this.gridster.remove_widget($el1, silent).done(function() {
this.remove_widget($el2, silent).done(function() {
expect($el3.attr('data-col')).to.equal('1');
expect($el3.attr('data-row')).to.equal('3');
done();