Skip to content

Commit 7de5bba

Browse files
vieronvieron
committed
feat(gridster): add config to set custom show/hide widget methods
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
1 parent e258d59 commit 7de5bba

File tree

2 files changed

+44
-32
lines changed

2 files changed

+44
-32
lines changed

‎src/jquery.gridster.js

+29-18
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@
3535
autogenerate_stylesheet: true,
3636
avoid_overlapped_widgets: true,
3737
auto_init: true,
38+
show_method: 'show',
39+
hide_method: 'hide',
3840
serialize_params: function($w, wgd) {
3941
return {
4042
col: wgd.col,
@@ -372,7 +374,7 @@
372374

373375
this.drag_api.set_limits(this.cols * this.min_widget_width);
374376

375-
return $w.fadeIn();
377+
return $w[this.options.show_method]();
376378
};
377379

378380

@@ -721,9 +723,10 @@
721723
* @param {Boolean|Function} silent If true, widgets below the removed one
722724
* will not move up. If a Function is passed it will be used as callback.
723725
* @param {Function} callback Function executed when the widget is removed.
724-
* @return {Class} Returns the instance of the Gridster Class.
726+
* @return {Promise} Returns a jQuery promise.
725727
*/
726728
fn.remove_widget = function(el, silent, callback) {
729+
var d = $.Deferred();
727730
var $el = el instanceof $ ? el : $(el);
728731
var wgd = $el.coords().grid;
729732

@@ -740,23 +743,24 @@
740743

741744
this.remove_from_gridmap(wgd);
742745

743-
$el.fadeOut($.proxy(function() {
744-
$el.remove();
746+
$el[this.options.hide_method]({
747+
always: $.proxy(function() {
748+
$el.remove();
745749

746-
if (!silent) {
747-
$nexts.each($.proxy(function(i, widget) {
748-
this.move_widget_up( $(widget), wgd.size_y );
749-
}, this));
750-
}
750+
if (!silent) {
751+
$nexts.each($.proxy(function(i, widget) {
752+
this.move_widget_up( $(widget), wgd.size_y );
753+
}, this));
754+
}
751755

752-
this.set_dom_grid_height();
756+
this.set_dom_grid_height();
753757

754-
if (callback) {
755-
callback.call(this, el);
756-
}
757-
}, this));
758+
callback && callback.call(this, el);
759+
d.resolveWith(this);
760+
}, this)
761+
});
758762

759-
return this;
763+
return d.promise();
760764
};
761765

762766

@@ -765,14 +769,21 @@
765769
*
766770
* @method remove_all_widgets
767771
* @param {Function} callback Function executed for each widget removed.
768-
* @return {Class} Returns the instance of the Gridster Class.
772+
* @return {Promise} Returns a jQuery promise.
769773
*/
770774
fn.remove_all_widgets = function(callback) {
775+
var d = $.Deferred();
776+
var promises = [];
771777
this.$widgets.each($.proxy(function(i, el){
772-
this.remove_widget(el, true, callback);
778+
promises.push(this.remove_widget(el, true));
773779
}, this));
774780

775-
return this;
781+
$.when.apply(null, promises).done($.proxy(function() {
782+
callback && callback.call(this);
783+
d.resolveWith(this);
784+
}, this));
785+
786+
return d.promise();
776787
};
777788

778789

‎test/index.js

+15-14
Original file line numberDiff line numberDiff line change
@@ -349,15 +349,16 @@ describe('gridster.js', function() {
349349
expect($el).to.have.length(1);
350350
});
351351

352-
it('should be positioned in the top/leftmost available space', function() {
353-
this.gridster.remove_widget('[data-col=1][data-row=1]');
354-
355-
this.gridster.add_widget('<li class="new">new</li>', 1, 1);
356-
var $el = this.gridster.$el.find('.new');
357-
358-
expect($el.attr('data-col')).to.equal('1');
359-
expect($el.attr('data-row')).to.equal('1');
360-
expect(this.gridster.gridmap[1][1][0]).to.equal($el[0]);
352+
it('should be positioned in the top/leftmost available space', function(done) {
353+
this.gridster.remove_widget('[data-col=1][data-row=1]').done(function() {
354+
this.gridster.add_widget('<li class="new">new</li>', 1, 1);
355+
356+
var $el = this.gridster.$el.find('.new');
357+
expect($el.attr('data-col')).to.equal('1');
358+
expect($el.attr('data-row')).to.equal('1');
359+
expect(this.gridster.gridmap[1][1][0]).to.equal($el[0]);
360+
done();
361+
}.bind(this));
361362
});
362363

363364
it('should respect the specified dimensions and coords', function() {
@@ -384,7 +385,7 @@ describe('gridster.js', function() {
384385

385386
it('should be removed from the grid', function(done) {
386387
var $el = this.gridster.$el.find('[data-col=1][data-row=1]');
387-
this.gridster.remove_widget($el, false, function() {
388+
this.gridster.remove_widget($el, false).done(function() {
388389
expect(this.gridmap[1][1]).to.be.false;
389390
expect(document.contains($el[0])).to.be.false;
390391
done();
@@ -396,8 +397,8 @@ describe('gridster.js', function() {
396397
var $el2 = this.gridster.$el.find('[data-col=2][data-row=1]');
397398
var $el3 = this.gridster.$el.find('[data-col=1][data-row=3]');
398399
var silent = false;
399-
this.gridster.remove_widget($el1, silent, function() {
400-
this.remove_widget($el2, silent, function() {
400+
this.gridster.remove_widget($el1, silent).done(function() {
401+
this.remove_widget($el2, silent).done(function() {
401402
expect($el3.attr('data-col')).to.equal('1');
402403
expect($el3.attr('data-row')).to.equal('1');
403404
done();
@@ -410,8 +411,8 @@ describe('gridster.js', function() {
410411
var $el2 = this.gridster.$el.find('[data-col=2][data-row=1]');
411412
var $el3 = this.gridster.$el.find('[data-col=1][data-row=3]');
412413
var silent = true;
413-
this.gridster.remove_widget($el1, silent, function() {
414-
this.remove_widget($el2, silent, function() {
414+
this.gridster.remove_widget($el1, silent).done(function() {
415+
this.remove_widget($el2, silent).done(function() {
415416
expect($el3.attr('data-col')).to.equal('1');
416417
expect($el3.attr('data-row')).to.equal('3');
417418
done();

0 commit comments

Comments
 (0)