ensure buttons are properly loading... and reset

3 files changed, 43 insertions, 18 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index ab07e1f..9af373d 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -20,3 +20,4 @@
 //= require platform
 //= require tickets
 //= require users
+//= require buttons
diff --git a/app/assets/javascripts/buttons.js b/app/assets/javascripts/buttons.js
new file mode 100644
index 0000000..7142957
--- /dev/null
+++ b/app/assets/javascripts/buttons.js
@@ -0,0 +1,39 @@
+/*
+ * Buttons.js
+ *
+ * Use bootstrap loading state after submitting a form.
+ *
+ * Some form inputs are validaded before the submission
+ * so triggering loading state on click events is not a
+ * good idea. If the validation fails the errors will 
+ * be displayed but the button would be in loading state.
+ *
+ * We used to trigger it based on form submission but
+ * we have a few forms that contain multiple buttons.
+ * So now we mark the buttons as clicked on click and 
+ * put the clicked button into loading state on submit.
+ *
+ */
+
+(function() {
+  markAsClicked = function () {
+    var btn = $(this)
+    btn.addClass('clicked')
+    setTimeout(function () {
+      btn.removeClass('clicked')
+    }, 1000)
+  };
+
+  markAsLoading = function(submitEvent) {
+    var form = submitEvent.target;
+    $(form).addClass('submitted')
+    // bootstrap loading state:
+    $(form).find('.btn.clicked[type="submit"]').button('loading');
+  };
+
+  $(document).ready(function() {
+    $('form').submit(markAsLoading);
+    $('.btn[type="submit"]').click(markAsClicked);
+  });
+  
+}).call(this);
diff --git a/app/assets/javascripts/users.js b/app/assets/javascripts/users.js
index 8486756..4a86ef5 100644
--- a/app/assets/javascripts/users.js
+++ b/app/assets/javascripts/users.js
@@ -35,24 +35,10 @@
       data: $(form).serialize()
     });
     req.done( function() {
-      $(form).find('input[type="submit"]').button('reset');
+      $(form).find('.btn[type="submit"]').button('reset');
     });
   };
-
-  markAsSubmitted = function(submitEvent) {
-    var form = submitEvent.target;
-    $(form).addClass('submitted')
-    // bootstrap loading state:
-    $(form).find('input[type="submit"]').button('loading');
-  };
-
-  resetButtons = function(submitEvent) {
-    var form = $('form.submitted')
-    // bootstrap loading state:
-    $(form).find('input[type="submit"]').button('reset');
-    $(form).removeClass('submitted')
-  };
-
+  
   //
   // PUBLIC FUNCTIONS
   //
@@ -79,7 +65,7 @@
     clear_errors();
     var errors = extractErrors(message);
     displayErrors(errors);
-    resetButtons();
+    $('.btn[type="submit"]').button('reset');
   }
 
   function extractErrors(message) {
@@ -115,7 +101,6 @@
   //
 
   $(document).ready(function() {
-    $('form').submit(markAsSubmitted);
     $('#new_user').submit(prevent_default);
     $('#new_user').submit(srp.signup);
     $('#new_session').submit(prevent_default);