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

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[this.options.hide_method]({
-            $el.remove();
+            always: $.proxy(function() {
+                $el.remove();
 
-            if (!silent) {
+                if (!silent) {
-                $nexts.each($.proxy(function(i, widget) {
+                    $nexts.each($.proxy(function(i, widget) {
-                    this.move_widget_up( $(widget), wgd.size_y );
+                        this.move_widget_up( $(widget), wgd.size_y );
-                }, this));
+                    }, this));
-            }
+                }
 
-            this.set_dom_grid_height();
+                this.set_dom_grid_height();
 
-            if (callback) {
+                callback && callback.call(this, el);
-                callback.call(this, el);
+                d.resolveWith(this);
-            }
+            }, 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();
     };
 
 

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() {
+            it('should be positioned in the top/leftmost available space', function(done) {
-                this.gridster.remove_widget('[data-col=1][data-row=1]');
+                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');
-                var $el = this.gridster.$el.find('.new');
+                    expect($el.attr('data-col')).to.equal('1');
-
+                    expect($el.attr('data-row')).to.equal('1');
-                expect($el.attr('data-col')).to.equal('1');
+                    expect(this.gridster.gridmap[1][1][0]).to.equal($el[0]);
-                expect($el.attr('data-row')).to.equal('1');
+                    done();
-                expect(this.gridster.gridmap[1][1][0]).to.equal($el[0]);
+                }.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.gridster.remove_widget($el1, silent).done(function() {
-                    this.remove_widget($el2, silent, 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.gridster.remove_widget($el1, silent).done(function() {
-                    this.remove_widget($el2, silent, 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();