Merge pull request #2 from nigelgbanks/7.x.spinny_gif-code-review

7.x.spinny gif code review

includes/ingest.form.inc

@@ -693,22 +693,52 @@ function islandora_ingest_form_ingest_button(array &$form_state) {
   $validate = function_exists($validate_callback) ? array($validate_callback) : NULL;
   $submit_callback = $form_id . '_submit';
   $submit = function_exists($submit_callback) ? array($submit_callback, 'islandora_ingest_form_submit') : array('islandora_ingest_form_submit');
-
-  $islandora_path = drupal_get_path('module', 'islandora');
-
   return array(
-    '#attached' => array('js' => array(
-        "$islandora_path/js/spin/spin.min.js",
-        "$islandora_path/js/ingesting_object.js",
-      )),
     '#type' => 'submit',
     '#name' => 'ingest',
     '#value' => t('Ingest'),
+    '#process' => array('islandora_ingest_form_ingest_button_process'),
     '#validate' => $validate,
     '#submit' => $submit,
   );
 }
 
+/**
+ * Process hook for the ingest button, adds the please wait spinning icon.
+ */
+function islandora_ingest_form_ingest_button_process(array $element) {
+  $settings['spinner'][$element['#id']] = array(
+    'message' => t('Please be patient while the the page loads.'),
+    'options' => array(
+      'lines' => 10,
+      'length' => 20,
+      'width' => 10,
+      'radius' => 30,
+      'corners' => 1,
+      'rotate' => 0,
+      'direction' => 1,
+      'color' => '#000',
+      'speed' => 1,
+      'trail' => 60,
+      'shadow' => FALSE,
+      'hwaccel' => FALSE,
+      'className' => 'spinner',
+      'zIndex' => 2000000000,
+      'top' => 'auto',
+      'left' => 'auto'
+    ),
+  );
+  drupal_add_js($settings, 'setting');
+  $islandora_path = drupal_get_path('module', 'islandora');
+  $element['#attached'] = array(
+    'js' => array(
+      "$islandora_path/js/spin/spin.min.js",
+      "$islandora_path/js/spinner.js",
+    ),
+  );
+  return $element;
+}
+
 /**
  * The submit handler for the ingest form.
  *

js/ingesting_object.js

@@ -1,54 +0,0 @@
-/**
- * @file
- * Adds some spinny goodness user-feedback after the user clicks Ingest.
- */
-
-(function ($) {
-  function islandora_start_ingest_feedback() {
-    $('#islandora-ingest-form').after('<div id="islandora_is_working"><div>' +
-        Drupal.t('Please be patient while the the page loads.') +
-        '</div></div>');
-
-    var opts = {
-      lines: 10, 
-      length: 20,
-      width: 10, 
-      radius: 30,
-      corners: 1,
-      rotate: 0, 
-      direction: 1,
-      color: '#000',
-      speed: 1, 
-      trail: 60,
-      shadow: false,
-      hwaccel: false,
-      className: 'spinner',
-      zIndex: 2e9, 
-      top: 'auto', 
-      left: 'auto' 
-    };
-    var target = document.getElementById('islandora_is_working');
-    var spinner = new Spinner(opts).spin(target);
-    // Don't want to do this in Safari, can't submit after form errors.
-    if (!(navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)) {
-      $('#edit-next').hide();
-      $('#edit-prev').hide();
-    }
-  }
-  
-  Drupal.behaviors.islandoraIngestingObject = {
-    attach: function(context, settings) {
-      // Safari is having issues with stalling JS execution that was preventing this from running.
-      if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
-        $('#edit-next').one('mousedown', function() {
-          islandora_start_ingest_feedback()
-        });
-      }
-      else {
-        $('#islandora-ingest-form').one('submit', function() {
-          islandora_start_ingest_feedback()
-        });
-      }
-    }
-  };
-})(jQuery);

js/spinner.js

@@ -0,0 +1,54 @@
+/**
+ * @file
+ * Triggers the display of a spinning icon when the form is submitted.
+ */
+(function ($) {
+
+  Drupal.behaviors.spinner = {
+    attach: function(context, settings) {
+      // Store what triggered the submit.
+      $('form').once('submit-resolver', function() {
+        $(this).click(function(event) {
+          $(this).data('clicked', $(event.target));
+        });
+        $(this).keypress(function(event) {
+          // On enter the first submit button is assumed as is most often the
+          // case and this is part of the HTML 5 specification, although some
+          // Browsers may choose the button with the lowest tab-index.
+          if (event.which == 13) {
+            $(this).data('clicked', $(':submit', this).first());
+          }
+        });
+      });
+      for (var base in settings.spinner) {
+        var id = '#' + base;
+        $(id, context).once('spinner', function () {
+          var spinner = new Spinner(settings.spinner[base].opts);
+          $(id).parents('form').one('submit', function(event) {
+            if ($(this).data('clicked').is(id)) {
+              event.preventDefault();
+              // Add Message.
+              var message = $('<div/>').text(settings.spinner[base].message);
+              $(id).after(message);
+              // Activate Spinner
+              spinner.spin(this);
+              // Submit the form after a set timeout, this handles problems with
+              // safari, in that safari submit's immediately..
+              $(':submit').attr('disabled', 'disabled');
+              setTimeout(function() {
+                // Allow for the button to be clicked, then click it then
+                // prevent the default behavoir.
+                $(id).removeAttr('disabled')
+                  .click()
+                  .click(function(event) {
+                    event.preventDefault();
+                  });
+              }, 500);
+            }
+            return true;
+          });
+        });
+      }
+    }
+  };
+})(jQuery);