#181741 by quicksketch: fix AHAH throbber/progress bar issues and generalize progress display configuration to allow module developers to choose from the throbber and progress bar

includes/form.inc

@@ -1616,7 +1616,6 @@ function form_expand_ahah($element) {
   if (isset($element['#ahah']['path']) && isset($element['#ahah']['event']) && !isset($js_added[$element['#id']])) {
     drupal_add_js('misc/jquery.form.js');
     drupal_add_js('misc/ahah.js');
-    drupal_add_js('misc/progress.js');
 
     $ahah_binding = array(
       'url'   => url($element['#ahah']['path']),
@@ -1625,8 +1624,23 @@ function form_expand_ahah($element) {
       'selector' => empty($element['#ahah']['selector']) ? '#'. $element['#id'] : $element['#ahah']['selector'],
       'effect'   => empty($element['#ahah']['effect']) ? 'none' : $element['#ahah']['effect'],
       'method'   => empty($element['#ahah']['method']) ? 'replace' : $element['#ahah']['method'],
+      'progress' => empty($element['#ahah']['progress']) ? array('type' => 'throbber') : $element['#ahah']['progress'],
     );
 
+    // Convert a simple #ahah[progress] type string into an array.
+    if (is_string($ahah_binding['progress'])) {
+      $ahah_binding['progress'] = array('type' => $ahah_binding['progress']);
+    }
+    // Change progress path to a full url.
+    if (isset($ahah_binding['progress']['path'])) {
+      $ahah_binding['progress']['url'] = url($ahah_binding['progress']['path']);
+    }
+
+    // Add progress.js if we're doing a bar display.
+    if ($ahah_binding['progress']['type'] == 'bar') {
+      drupal_add_js('misc/progress.js');
+    }
+
     drupal_add_js(array('ahah' => array($element['#id'] => $ahah_binding)), 'setting');
 
     $js_added[$element['#id']] = TRUE;

misc/ahah.js

@@ -42,6 +42,7 @@ Drupal.ahah = function(base, element_settings) {
   this.wrapper = '#'+ element_settings.wrapper;
   this.effect = element_settings.effect;
   this.method = element_settings.method;
+  this.progress = element_settings.progress;
   if (this.effect == 'none') {
     this.showEffect = 'show';
     this.hideEffect = 'hide';
@@ -100,12 +101,29 @@ Drupal.ahah = function(base, element_settings) {
  * Handler for the form redirection submission.
  */
 Drupal.ahah.prototype.beforeSubmit = function (form_values, element, options) {
-  // Insert progressbar and stretch to take the same space.
-  this.progress = new Drupal.progressBar('ahah_progress');
-  this.progress.setProgress(-1, Drupal.t('Please wait...'));
+  // Disable the element that received the change.
+  $(this.element).addClass('progress-disabled').attr('disabled', true);
 
-  var progress_element = $(this.progress.element).addClass('ahah-progress');
-  $(this.element).addClass('progress-disabled').attr('disabled', true).after(progress_element);
+  // Insert progressbar or throbber.
+  if (this.progress.type == 'bar') {
+    var progressBar = new Drupal.progressBar('ahah-progress-' + this.element.id, eval(this.progress.update_callback), this.progress.method, eval(this.progress.error_callback));
+    if (this.progress.message) {
+      progressBar.setProgress(-1, this.progress.message);
+    }
+    if (this.progress.url) {
+      progressBar.startMonitoring(this.progress.url, this.progress.interval || 1500);
+    }
+    this.progress.element = $(progressBar.element).addClass('ahah-progress ahah-progress-bar');
+    this.progress.object = progressBar;
+    $(this.element).after(this.progress.element);
+  }
+  else if (this.progress.type == 'throbber') {
+    this.progress.element = $('<div class="ahah-progress ahah-progress-throbber"><div class="throbber">&nbsp;</div></div>');
+    if (this.progress.message) {
+      $('.throbber', this.progress.element).after('<div class="message">' + this.progress.message + '</div>')
+    }
+    $(this.element).after(this.progress.element);
+  }
 };
 
 /**
@@ -114,7 +132,6 @@ Drupal.ahah.prototype.beforeSubmit = function (form_values, element, options) {
 Drupal.ahah.prototype.success = function (response, status) {
   var wrapper = $(this.wrapper);
   var form = $(this.element).parents('form');
-  var progress_element = $(this.progress.element);
   // Manually insert HTML into the jQuery object, using $() directly crashes
   // Safari with long string lengths. http://dev.jquery.com/ticket/1152
   var new_content = $('<div></div>').html(response.data);
@@ -125,13 +142,13 @@ Drupal.ahah.prototype.success = function (response, status) {
   this.form_encattr ? form.attr('target', this.form_encattr) : form.removeAttr('encattr');
 
   // Remove the progress element.
-  progress_element.remove();
-  $(this.element).removeClass('progess-disabled').attr('disabled', false);
-
-  // Hide the new content before adding to page.
-  if (this.showEffect != 'show') {
-    new_content.hide();
+  if (this.progress.element) {
+    $(this.progress.element).remove();
   }
+  if (this.progress.object) {
+    this.progress.object.stopMonitoring();
+  }
+  $(this.element).removeClass('progress-disabled').attr('disabled', false);
 
   // Add the new content to the page.
   Drupal.freezeHeight();
@@ -142,10 +159,18 @@ Drupal.ahah.prototype.success = function (response, status) {
     wrapper[this.method](new_content);
   }
 
+  // Immediately hide the new content if we're using any effects.
+  if (this.showEffect != 'show') {
+    new_content.hide();
+  }
+
   // Determine what effect use and what content will receive the effect, then
   // show the new content. For browser compatibility, Safari is excluded from
   // using effects on table rows.
-  if ($('.ahah-new-content', new_content).size() > 0 && !($.browser.safari && $("tr.ahah-new-content", new_content).size() > 0)) {
+  if (($.browser.safari && $("tr.ahah-new-content", new_content).size() > 0)) {
+    new_content.show();
+  }
+  else if ($('.ahah-new-content', new_content).size() > 0) {
     $('.ahah-new-content', new_content).hide();
     new_content.show();
     $(".ahah-new-content", new_content)[this.showEffect](this.showSpeed);
@@ -170,9 +195,13 @@ Drupal.ahah.prototype.error = function (error) {
   alert(Drupal.t('An error occurred:\n\n@error', { '@error': error }));
   // Resore the previous action and target to the form.
   element.parent('form').attr( { action: this.form_action, target: this.form_target} );
-  // Remove progressbar.
+  // Remove the progress element.
+  if (this.progress.element) {
     $(this.progress.element).remove();
-  this.progress = null;
+  }
+  if (this.progress.object) {
+    this.progress.object.stopMonitoring();
+  }
   // Undo hide.
   $(this.wrapper).show();
   // Re-enable the element.

modules/block/block-rtl.css

@@ -5,7 +5,7 @@
   padding-right: 1.5em;
 }
 #blocks select {
-  margin-left: 18px;
+  margin-left: 24px;
 }
 #blocks select.progress-disabled {
   margin-left: 0px;

modules/block/block.css

@@ -13,7 +13,7 @@
   padding: 3px;
 }
 #blocks select {
-  margin-right: 18px; /* LTR */
+  margin-right: 24px; /* LTR */
 }
 #blocks select.progress-disabled {
   margin-right: 0px; /* LTR */
@@ -21,18 +21,3 @@
 #blocks tr.ahah-new-content {
   background-color: #ffd;
 }
-#blocks .progress {
-  width: 15px;
-  height: 15px;
-  margin: -2px 0;
-}
-#blocks .progress .bar {
-  width: 15px;
-  height: 15px;
-  background: transparent url(../../misc/throbber.gif) no-repeat 0px -18px;
-  border: none;
-  float: left; /* LTR */
-}
-#blocks .progress .message {
-  display: none;
-}

modules/system/system-rtl.css

@@ -74,6 +74,9 @@ div.teaser-button-wrapper {
 .ahah-progress {
   float: right;
 }
+.ahah-progress .throbber {
+  float: right;
+}
 input.password-field {
   margin-left: 10px;
   margin-right: inherit;

modules/system/system.css

@@ -366,9 +366,8 @@ html.js .no-js {
 .progress .bar {
   background: #fff url(../../misc/progress.gif);
   border: 1px solid #00375a;
-  width: 5em;
   height: 1.5em;
-  margin: 0.2em 0 0 0.2em;
+  margin: 0 0.2em;
 }
 .progress .filled {
   background: #0072b9;
@@ -385,6 +384,19 @@ html.js .no-js {
 .ahah-progress {
   float: left; /* LTR */
 }
+.ahah-progress .throbber {
+  width: 15px;
+  height: 15px;
+  margin: 2px;
+  background: transparent url(../../misc/throbber.gif) no-repeat 0px -18px;
+  float: left; /* LTR */
+}
+tr .ahah-progress .throbber {
+  margin: 0 2px;
+}
+.ahah-progress-bar {
+  width: 16em;
+}
 
 /*
 ** Formatting for welcome page

modules/upload/upload.module

@@ -502,6 +502,7 @@ function _upload_form($node) {
       '#ahah' => array(
         'path' => 'upload/js',
         'wrapper' => 'attach-wrapper',
+        'progress' => array('type' => 'bar', 'message' => t('Please wait...')),
       ),
       '#submit' => array('node_form_submit_build_node'),
     );