While going through potential targets for AHAH, more things have become clearly needed. This patch addresses the following concerns:

- An easy way to switch between the progress 'bar' and 'throbber' style of progress.
- Correcting a typo which kept the 'progress-disabled' class on elements even after the AHAH request was complete.
- Correcting logic for Safari exception on applying jQuery effects to table rows.
- Applying 'hide' logic after the new content is added to the page, which is another fix for Safari.

This patch should have no visible changes to the blocks page or upload module, but adds a significant amount of needed cleanup to the AHAH framework.

Comments

webernet’s picture

Why is the progress bar limited to a width of 5em? (.progress .bar width was first added to system.css in http://drupal.org/node/157752 )

It makes the progress bar in update.php much too short as well as those of book.module and upload.module.

quicksketch’s picture

StatusFileSize
new9.84 KB

This patch adds the correct support for updating the progress bar indicator. I'll follow up with code examples.

@webernet You're correct, I don't think a width is wanted on all progress bars at all, and 5em is too narrow anyway for places that do use ahah.js (such as upload module). I've changed the width to 16em and only on .ahah-progress-bar class, which should allow space for a short message and percentage (if needed). The width is needed at some point though, because it keeps the appearance correct when floating it left.

quicksketch’s picture

StatusFileSize
new9.38 KB

The progress bar indicator is the main component of this patch. Since modules utilizing AHAH will need different approaches, we need to accommodate for all scenarios. Sample displays attached. Here are some code examples of how you would customize the progress bar used with AHAH to your liking:

Example 1. Throbber (default).

  $form['element']['#ahah'] = array(
    'path' => 'some/path/js',
    'wrapper' => 'wrapper-id',
    'progress' => 'throbber', // Optional line, throbber is default.
  ),

Example 2. Throbber with message.

  $form['element']['#ahah'] = array(
    'path' => 'some/path/js',
    'wrapper' => 'wrapper-id',
    'progress' => array('type' => 'throbber', 'message' => t('Please wait...')), // Value is an array if multiple settings are set.
  ),

Example 3. Progress bar.

  $form['element']['#ahah'] = array(
    'path' => 'some/path/js',
    'wrapper' => 'wrapper-id',
    'progress' => 'bar', // A simple bar.
  ),

Example 4. Progress bar with message.

  $form['element']['#ahah'] = array(
    'path' => 'some/path/js',
    'wrapper' => 'wrapper-id',
    'progress' => array('type' => 'bar', 'message' => t('Please wait...')), // Bar with message (upload module, book), gets the t() string out of javascript and makes it customizable.
  ),

Example 5. Progress bar with message and progress indicator.

  $form['element']['#ahah'] = array(
    'path' => 'some/path/js',
    'wrapper' => 'wrapper-id',
    'progress' => array('type' => 'bar', 'message' => t('Please wait...'), 'path' => 'some/path/progress')), // Potentially great for expensive or time-consuming tasks.
  ),

Example 6. No progress indicator at all.

  $form['element']['#ahah'] = array(
    'path' => 'some/path/js',
    'wrapper' => 'wrapper-id',
    'progress' => 'none', // No throbber or bar. Adds nothing to the page, but still disables the changed element during request.
  ),
quicksketch’s picture

webernet and I had a discussion in #drupal about the class names used, reporting inconsistency between the progress class and the ahah-progress and ahah-progress-throbber class. Here are the classes used an my reasons for using them:

The throbber version:

<div class="ahah-progress ahah-progress-throbber">
  <div class="throbber">&nbsp;</div>
  <div class="message">Please wait...</div>
</div>

The progress bar version:

<div id="ahah-progress-element-id-here" class="progress ahah-progress ahah-progress-bar">
  <div class="bar">&nbsp;</div>
  <div class="percentage">&nbsp;</div>
  <div class="message">Please wait...</div>
</div>

So basically the classing here let's us easily select the following items:
- All progress elements added by ahah.js (.ahah-progress)
- Specifically ahah progress bars (.ahah-progress-bar)
- Specifically ahah progress throbbers (.ahah-progress-throbber)

The class .progress is not used in the throbber version of the code because it's probably best if that class is reserved for use exclusively by progress.js. So after reviewing my code a second time, I don't think that the class names or CSS should be changed. Not to say it's perfect. Suggestions are very welcome!

Stefan Nagtegaal’s picture

Status: Needs review » Reviewed & tested by the community

This works good and looks very solid!

This is ready to go in..

gábor hojtsy’s picture

Status: Reviewed & tested by the community » Fixed

Looks better indeed, committed to allow the usability improvements blocked by this patch to progress (pun intended :).

Anonymous’s picture

Status: Fixed » Closed (fixed)