Merge pull request #150 from azul/bugfix/5542-capitalize-loading

Bugfix/5542 capitalize loading

5 files changed, 45 insertions, 24 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);
diff --git a/app/views/sessions/new.html.haml b/app/views/sessions/new.html.haml
index 316eec1..6f3b324 100644
--- a/app/views/sessions/new.html.haml
+++ b/app/views/sessions/new.html.haml
@@ -6,6 +6,4 @@
   = simple_form_for [:api, @session], :validate => true, :html => { :id => :new_session, :class => 'form-horizontal' } do |f|
     = f.input :login, :required => false, :label => t(:username), :input_html => { :id => :srp_username }
     = f.input :password, :required => false, :input_html => { :id => :srp_password }
-    .form-actions
-      = f.button :submit, :value => t(:login), :class => 'btn-primary'
-      = link_to t(:cancel), home_path, :class => 'btn'
+    = f.button :wrapped, value: t(:login), cancel: home_path
diff --git a/app/views/users/new.html.haml b/app/views/users/new.html.haml
index 173dd8c..3478989 100644
--- a/app/views/users/new.html.haml
+++ b/app/views/users/new.html.haml
@@ -13,7 +13,5 @@
     = f.input :login, :label => t(:username), :required => false, :input_html => { :id => :srp_username }
     = f.input :password,              :required => false, :validate => true, :input_html => { :id => :srp_password }
     = f.input :password_confirmation, :required => false, :validate => true, :input_html => { :id => :srp_password_confirmation }
-    .form-actions
-      = f.button :submit, :value => t(:signup), :class => 'btn btn-primary'
-      = link_to t(:cancel), home_path, :class => 'btn'
+    = f.button :wrapped, value: t(:signup), cancel: home_path