Actioneer added to handle common spinner switching

UI/Series/Details/SeasonLayout.js

@@ -8,8 +8,8 @@ define(
         'Cells/AirDateCell',
         'Cells/EpisodeStatusCell',
         'Commands/CommandController',
-        'Shared/Messenger'
+        'Shared/Actioneer'
-    ], function ( Marionette, Backgrid, ToggleCell, EpisodeTitleCell, AirDateCell, EpisodeStatusCell, CommandController, Messenger) {
+    ], function ( Marionette, Backgrid, ToggleCell, EpisodeTitleCell, AirDateCell, EpisodeStatusCell, CommandController, Actioneer) {
         return Marionette.Layout.extend({
             template: 'Series/Details/SeasonLayoutTemplate',
 
@@ -94,57 +94,38 @@ define(
             },
 
             _seasonSearch: function () {
-                var command = 'seasonSearch';
+                Actioneer.ExecuteCommand({
-
+                    command    : 'seasonSearch',
-                this.idle = false;
+                    properties : {
-
+                        seriesId    : this.model.get('seriesId'),
-                this.ui.seasonSearch.addClass('icon-spinner icon-spin');
+                        seasonNumber: this.model.get('seasonNumber')
-
+                    },
-                var properties = {
+                    element    : this.ui.seasonSearch,
-                    seriesId    : this.model.get('seriesId'),
+                    failMessage: 'Season search failed'
-                    seasonNumber: this.model.get('seasonNumber')
-                };
-
-                var self = this;
-                var commandPromise = CommandController.Execute(command, properties);
-
-                commandPromise.fail(function (options) {
-                    if (options.readyState === 0 || options.status === 0) {
-                        return;
-                    }
-
-                    Messenger.show({
-                        message: 'Season search failed',
-                        type   : 'error'
-                    });
-                });
-
-                commandPromise.always(function () {
-                    if (!self.isClosed) {
-                        self.ui.seasonSearch.removeClass('icon-spinner icon-spin');
-                        self.idle = true;
-                    }
                 });
             },
 
             _seasonMonitored: function () {
-                var self = this;
                 var name = 'monitored';
                 this.model.set(name, !this.model.get(name));
 
-                this.ui.seasonMonitored.addClass('icon-spinner icon-spin');
+                Actioneer.SaveModel({
-
+                    context       : this,
-                var promise = this.model.save();
+                    element       : this.ui.seasonMonitored,
-
+                    alwaysCallback: this._afterSeasonMonitored
-                promise.always(function (){
-                    _.each(self.episodeCollection.models, function (episode) {
-                        episode.set({ monitored: self.model.get('monitored') });
-                    });
-
-                    self.render();
                 });
             },
 
+            _afterSeasonMonitored: function () {
+                var self = this;
+
+                _.each(this.episodeCollection.models, function (episode) {
+                    episode.set({ monitored: self.model.get('monitored') });
+                });
+
+                this.render();
+            },
+
             _setSeasonMonitoredState: function () {
                 this.ui.seasonMonitored.removeClass('icon-spinner icon-spin');
 
@@ -159,36 +140,14 @@ define(
             },
 
             _seasonRename: function () {
-                var command = 'renameSeason';
+                Actioneer.ExecuteCommand({
-
+                    command    : 'renameSeason',
-                this.idle = false;
+                    properties : {
-
+                        seriesId    : this.model.get('seriesId'),
-                this.ui.seasonRename.toggleClass('icon-nd-rename icon-nd-spinner');
+                        seasonNumber: this.model.get('seasonNumber')
-
+                    },
-                var properties = {
+                    element    : this.ui.seasonRename,
-                    seriesId    : this.model.get('seriesId'),
+                    failMessage: 'Season rename failed'
-                    seasonNumber: this.model.get('seasonNumber')
-                };
-
-                var self = this;
-                var commandPromise = CommandController.Execute(command, properties);
-
-                commandPromise.fail(function (options) {
-                    if (options.readyState === 0 || options.status === 0) {
-                        return;
-                    }
-
-                    Messenger.show({
-                        message: 'Season rename failed',
-                        type   : 'error'
-                    });
-                });
-
-                commandPromise.always(function () {
-                    if (!self.isClosed) {
-                        self.ui.seasonRename.toggleClass('icon-nd-rename icon-nd-spinner');
-                        self.idle = true;
-                    }
                 });
             }
         });

UI/Series/Details/SeriesDetailsLayout.js

@@ -8,9 +8,9 @@ define(
         'Series/Details/SeasonCollectionView',
         'Series/Edit/EditSeriesView',
         'Shared/LoadingView',
-        'Commands/CommandController',
+        'Shared/Actioneer',
         'backstrech'
-    ], function (App, Marionette, EpisodeCollection, SeasonCollection, SeasonCollectionView, EditSeriesView, LoadingView, CommandController) {
+    ], function (App, Marionette, EpisodeCollection, SeasonCollection, SeasonCollectionView, EditSeriesView, LoadingView, Actioneer) {
         return Marionette.Layout.extend({
 
             itemViewContainer: '.x-series-seasons',
@@ -89,16 +89,13 @@ define(
             },
 
             _toggleMonitored: function () {
-                var self = this;
                 var name = 'monitored';
                 this.model.set(name, !this.model.get(name), { silent: true });
 
-                this.ui.monitored.addClass('icon-spinner icon-spin');
+                Actioneer.SaveModel({
-
+                    context       : this,
-                var promise = this.model.save();
+                    element       : this.ui.monitored,
-
+                    alwaysCallback: this._setMonitoredState()
-                promise.always(function () {
-                    self._setMonitoredState();
                 });
             },
 
@@ -123,13 +120,13 @@ define(
             },
 
             _refreshSeries: function () {
-                var self = this;
+                Actioneer.ExecuteCommand({
-
+                    command    : 'refreshSeries',
-                this.ui.refresh.addClass('icon-spin');
+                    properties : {
-                var promise = CommandController.Execute('refreshseries', { seriesId: this.model.get('id') });
+                        seriesId    : this.model.get('id')
-
+                    },
-                promise.always(function () {
+                    element    : this.ui.refresh,
-                    self.ui.refresh.removeClass('icon-spin');
+                    leaveIcon  : true
                 });
             },
 
@@ -141,35 +138,13 @@ define(
             },
 
             _renameSeries: function () {
-                var command = 'renameSeries';
+                Actioneer.ExecuteCommand({
-
+                    command    : 'renameSeries',
-                this.idle = false;
+                    properties : {
-
+                        seriesId    : this.model.get('id')
-                this.ui.rename.toggleClass('icon-nd-rename icon-nd-spinner');
+                    },
-
+                    element    : this.ui.rename,
-                var properties = {
+                    failMessage: 'Series search failed'
-                    seriesId    : this.model.get('id')
-                };
-
-                var self = this;
-                var commandPromise = CommandController.Execute(command, properties);
-
-                commandPromise.fail(function (options) {
-                    if (options.readyState === 0 || options.status === 0) {
-                        return;
-                    }
-
-                    Messenger.show({
-                        message: 'Season rename failed',
-                        type   : 'error'
-                    });
-                });
-
-                commandPromise.always(function () {
-                    if (!self.isClosed) {
-                        self.ui.rename.toggleClass('icon-nd-rename icon-nd-spinner');
-                        self.idle = true;
-                    }
                 });
             }
         });

UI/Shared/Actioneer.js

@@ -0,0 +1,85 @@
+'use strict';
+define(['Commands/CommandController', 'Shared/Messenger'],
+    function(CommandController, Messenger) {
+        return {
+            ExecuteCommand: function (options) {
+                options.iconClass = this._getIconClass(options.element);
+
+                this._setSpinnerOnElement(options);
+
+                var promise = CommandController.Execute(options.command, options.properties);
+                this._handlePromise(promise, options);
+            },
+
+            SaveModel: function (options) {
+                options.iconClass = this._getIconClass(options.element);
+
+                this._setSpinnerOnElement(options);
+                var promise = options.context.model.save();
+
+                this._handlePromise(promise, options);
+            },
+
+            _handlePromise: function (promise, options) {
+                promise.done(function () {
+                    if (options.successMessage) {
+                        Messenger.show({
+                            message: options.successMessage
+                        });
+                    }
+
+                    if (options.succesCallback) {
+                        options.successCallback.call(options.context);
+                    }
+                });
+
+                promise.fail(function (ajaxOptions) {
+                    if (ajaxOptions.readyState === 0 || ajaxOptions.status === 0) {
+                        return;
+                    }
+
+                    if (options.failMessage) {
+                        Messenger.show({
+                            message: options.failMessage,
+                            type   : 'error'
+                        });
+                    }
+
+                    if (options.failCallback) {
+                        options.failCallback.call(options.context);
+                    }
+                });
+
+                promise.always(function () {
+
+                    if (options.leaveIcon) {
+                        options.element.removeClass('icon-spin');
+                    }
+
+                    else {
+                        options.element.addClass(options.iconClass);
+                        options.element.removeClass('icon-nd-spinner');
+                    }
+
+                    if (options.alwaysCallback) {
+                        options.alwaysCallback.call(options.context);
+                    }
+                });
+            },
+
+            _getIconClass: function(element) {
+                return element.attr('class').match(/(?:^|\s)icon\-.+?(?:$|\s)/)[0];
+            },
+
+            _setSpinnerOnElement: function (options) {
+                if (options.leaveIcon) {
+                    options.element.addClass('icon-spin');
+                }
+
+                else {
+                    options.element.removeClass(options.iconClass);
+                    options.element.addClass('icon-nd-spinner');
+                }
+            }
+        }
+});