add loading/working indicator to search results pagination view and to modal/confirmation view

assets/css/style.css

@@ -23,7 +23,8 @@ p.submit input {
   float: left;
 }
 
-p.submit .spinner {
+.pmp-modal-actions .spinner,
+#pmp-search-page .spinner {
   float: none;
   position: relative;
   top: 2px;

assets/js/pmp.js

@@ -209,7 +209,17 @@
     });
 
     // Views
-    var SearchForm = Backbone.View.extend({
+    var BaseView = Backbone.View.extend({
+        showSpinner: function() {
+            this.$el.find('.spinner').css('display', 'inline-block');
+        },
+
+        hideSpinner: function() {
+            this.$el.find('.spinner').css('display', 'none');
+        }
+    });
+
+    var SearchForm = BaseView.extend({
         el: '#pmp-search-form',
 
         events: {
@@ -260,14 +270,6 @@
             }
 
             return false;
-        },
-
-        showSpinner: function() {
-            this.$el.find('.spinner').css('display', 'inline-block');
-        },
-
-        hideSpinner: function() {
-            this.$el.find('.spinner').css('display', 'none');
         }
     });
 
@@ -335,13 +337,15 @@
         }
     });
 
-    var ResultsPagination = Backbone.View.extend({
+    var ResultsPagination = BaseView.extend({
         initialize: function(options) {
             this.collection = (typeof options.collection != 'undefined')? options.collection : null;
             this.collection.on('reset', this.render.bind(this));
         },
 
         render: function() {
+            this.hideSpinner();
+
             var attrs = this.collection.attributes;
 
             this.$el.html('');
@@ -381,6 +385,7 @@
 
             var query = this.collection.attributes.get('query');
             query.offset = this.collection.attributes.get('offset') + 1;
+            this.showSpinner();
             this.collection.search(query);
             return false;
         },
@@ -393,6 +398,7 @@
 
             var query = this.collection.attributes.get('query');
             query.offset = this.collection.attributes.get('offset') - 1;
+            this.showSpinner();
             this.collection.search(query);
             return false;
         },
@@ -416,7 +422,11 @@
                 args = {
                 message: 'Are you sure you want to create a draft of this story?',
                 actions: {
-                    'Yes': self.model.draft.bind(self.model),
+                    'Yes': function() {
+                        self.modal.showSpinner();
+                        self.model.draft();
+                        return false;
+                    },
                     'Cancel': 'close'
                 }
             };
@@ -431,7 +441,11 @@
                 args = {
                 message: 'Are you sure you want to publish this story?',
                 actions: {
-                    'Yes': self.model.publish.bind(self.model),
+                    'Yes': function() {
+                        self.modal.showSpinner();
+                        self.model.publish();
+                        return false;
+                    },
                     'Cancel': 'close'
                 }
             };
@@ -456,7 +470,7 @@
         }
     });
 
-    var Modal = Backbone.View.extend({
+    var Modal = BaseView.extend({
         id: 'pmp-modal',
 
         actions: {},

templates/search.php

@@ -79,10 +79,10 @@
 			<% } else if (image) { %><img class="pmp-image" src="<%= image %>" /><% } %>
 		</div>
 		<div class="pmp-result-actions">
-		  <ul>
-			<li><a class="pmp-draft-action" href="#">Create draft</a></li>
-			<li><a class="pmp-publish-action" href="#">Publish</a></li>
-		  </ul>
+			<ul>
+				<li><a class="pmp-draft-action" href="#">Create draft</a></li>
+				<li><a class="pmp-publish-action" href="#">Publish</a></li>
+			</ul>
 		</div>
 	</div>
 </script>
@@ -91,6 +91,7 @@
 	<div id="pmp-search-results-pagination">
 		<a href="#" class="disabled prev button button-primary">Previous</a>
 		<a href="#" class="disabled next button button-primary">Next</a>
+		<span class="spinner"></span>
 		<p class="pmp-page-count">Page <span class="pmp-page"></span> of <span class="pmp-total-pages"></span></p>
 	</div>
 </script>
@@ -101,6 +102,7 @@
 	</div>
 	<div class="pmp-modal-content"><% if (message) { %><%= message %><% } %></div>
 	<div class="pmp-modal-actions">
+		<span class="spinner"></span>
 		<% _.each(actions, function(v, k) { %>
 			<a href="#" class="<%= k %> button button-primary"><%= k %></a>
 		<% }); %>