JavaScript in Drupal 6 - DrupalCon 2008

March 5, 2008 I'll be giving a presentation on two of the most exciting new JavaScript features in Drupal 6. You might be able to guess, on Drag and Drop and the new AHAH framework in Drupal 6. These are two features that slipped in at the last possible moment in the Drupal 6 development cycle, but I feel will be a serious player in module development in Drupal 6 contributed modules.

Drag and Drop

Drag and drop is already implemented in many places in core: the blocks page, book outlines, menu hierarchies, taxonomy terms, file uploads, and others. In the contributed modules, CCK has already implemented drag and drop for field organization and it's likely we'll see it in the final version of Views 2. I posted a screencast of the drag and drop for the blocks page a few months ago.

AHAH Framework

AHAH stands for Asynchronous HTML and HTTP. It's a close cousin of AJAX, which is the same concept of making a HTTP request in the background through javascript, then updating the page somehow with the new content from the second request. The difference between them is AHAH simply returns HTML back, then directly injects it into the page. It's a simpler and more direct method of page manipulation.

Webform 2.x Plans

Webform and I have had a long history together. It was used on my first Drupal site as a contact form, and it's been used ever since. It was the first module I reported a bug, and led me to learn how to roll a patch file. I became the maintainer and ported it to Drupal 4.7 after learning the then new FormsAPI. Not long after, Lullabot contracted me to write some enhancements for the a client, leading me to be hired full-time.

So I owe Webform a lot it seems, but yet it's long been the black mark on my CVS history, barely receiving patches months apart. With Drupal 6 around the corner, the requests for a port will come soon, probably requiring a large number of changes to accommodate for the improved FormsAPI. Because maintaining two drastically different version of the same module doesn't appeal to anyone, I've begun work on Webform 2.x for Drupal 5 to make it possible to support both D5 and D6 versions simultaneously.

So, what's new and different?

  • The components form has been moved from the main edit form to a separate tab.
  • Editing components immediately saves to the node, preventing nasty $_POST value checking and hidden elements passing data back and forth.
  • A new Grid element (also in the 1.x version)
    Grid component example
  • Individual components can be cloned, preventing repeated setup of the same elements

Fivestar 1.9 Demo

Fivestar is getting loads of new features very soon. Two of the most common problems will be solved in the next release:

- Fivestar now can display the current average by default, with user's rating underneath.
- Fivestar now can display when submitting comments, making reviews a one-click option.

As you'll see in this video, we also get several interface enhancements and new star sets (still looking for more though if you want to lend a hand!) You can grab the latest version of Fivestar demoed here as a tarball of the dev version, or you can wait for version 1.9 of Fivestar, due to be out shortly.


Drupal Drag and Drop (redux)

A follow-up to yesterday's video on Drag and Drop tables. The new version combines the new dragtable.js with a special blocks.js file. The dragtable.js (320 lines) handles reordering of weights and matching regions with their siblings, as well as the actual drag and drop. The new blocks.js (50 lines) handles the specialty case 'regions' dropdown, so that changing this field moves the row into the new region.

See the patch for Drupal 6: http://drupal.org/node/181066

Drupal Drag and Drop

Not too long ago the AHAH patches went into Drupal core. While I'm thrilled with their inclusion, we can push Drupal's interface further with the addition of drag and drop, eliminating the visible weights system. Read more about it in the issue queue.

See the patch for Drupal 6: http://drupal.org/node/181066