diff --git a/src/jquery.gridster.js b/src/jquery.gridster.js index 13d43820bf..1d0a12aa10 100755 --- a/src/jquery.gridster.js +++ b/src/jquery.gridster.js @@ -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(); }; diff --git a/test/index.js b/test/index.js index 72bb503d0f..90bf244e2b 100644 --- a/test/index.js +++ b/test/index.js @@ -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('
  • new
  • ', 1, 1); - this.gridster.add_widget('
  • new
  • ', 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();