Getting Modal Dialogs in Drupal 7 - the wiki

Update: This all needs to be updated with all the BostonCon information and changes. In the mean time, the best place to catch up is: http://drupal.org/node/218830#comment-764167

Since my drupalcon session did not make the cut, I am putting my notes here. Hopefully we still can get some momentum building for the code sprint (maybe a BOF?). I would be thrilled if anyone wants to jump in a review these patches, advise on the overall direction, or jump in on the TODO items.

Popups: Adding the core modal dialog API (http://drupal.org/node/218820)

This patch provides a minimal API for including modal dialogs in the core. It has the javascript and css necessary to generate simple popups. Most of the brains of this patch could easily be scooped out and replaced with a 3rd party library like jQueryUI Dialogs or Improptu or jqModal

Popups: Adding Modal Dialogs to Admin Pages (http://drupal.org/node/193311)

This is the most interesting one. It is a use case/poster child for modal dialogs. It provides the infrastructure for opening a drupal page inside a popup without needing to modify the original drupal page or form flowing any way. It provides a hook for defining rule for what links on a page want (configurable) popup behavior, and gets the ball rolling with rules for about three dozen links on 12 admin pages and forms.
This page-in-a-popup behavior is what is shown in the various screencasts I have released. One cool feature that has not been shown yet, is that it automatically handles multistep forms/wizards.

Popups in Drupal 7: Retheme page contents (http://drupal.org/node/218830)

This patch provides a way to control the page theme using a url parameter. This makes it easy to for the page-in-a-popup behavior to just get the content that it will display, significantly speeding up the display. There are several interesting proposals in this space, and this patch will most likely be refactored to use one of them:

• http://drupal.org/node/134478 - Refactor node rendering (eaton)
• http://drupal.org/node/218770 - Drupal Pipes (chx)
• http://drupal.org/node/145551 - Enable dynamic page loading and rendering into different formats (JSON, XML) (nedjo)

TODO List (love to get some help here):

• Fix the edge cases where js behaviors are not working inside dialog.
  • One solution is to make the raw callback always return JSON that includes the Drupal JS settings for the page returned, which are then used to populate behaviors within the scope of the popup.
• Make the default theme more attractive.
• Explore non-modal messaging/alert options.
  • If we get this into core, it is best to make it as widely useful as possible.
  • I worry about accessibility with non-modal alert messages
• Accessibility issue - get the tab ordering to wrap from last element in dialog back to the first.
• Cache the results of hook_popups
• Find out what Panels 2 is using
  • Internal scrollbar - this can be accomplished with an iFrame or simply clever use of the CSS "overflow: auto" property.
  • Nice close window icon.
  • Closer to garland colors.
• Figure out what to call this effort :)
  • Popups, modals, dialogs, modal dialogs, popup modal dialogs, PMDs?
• Have muti-popup flow not close popup, instead just replace the contents.

Thoughts on other existing javascript modal dialog projects (Incomplete!):

• jQuery UI (1.5 beta)
  • Movable & re-sizable (with other jUI bits).
  • Themable - but default look is ugly.
  • Unimpressive demos
• jQuery Improptu (http://trentrichardson.com/Impromptu/, http://drupal.org/project/jquery_impromptu)
  • Attractive and Nice overlay effects.
  • Simple buttons and single callback (maybe too simple?).
  • Themeable
• jqModal
  • Multiple dialogs at once.
• Lightbox/thickbox/craqbox
  • All seem too heavy and image specific.