Ajax Modal Dialogs (Popup Module)

starbow's picture
public
starbow - Sat, 2008-01-26 01:27

I have a new Drupal 6 module that brings modal dialog to the admin interface. You can check out a screencast at:
http://www.citris-uc.org/drupal_modal_dialogs

The project itself is at:
http://drupal.org/project/popups

Some things of note:
* The project currently includes rules for about 10 admin pages.
* It includes a hook_popups so other modules can define rules for their pages or forms.
* It also includes a simple generic API for creating popup dialogs (ie: other modules can call Drupal.popups.message( 'Hello World' ) ).
* I have figured out how to get Drupal to serve any page without the applying the page theme, which really cuts down on the traffic and Ajax parsing.
* The appearance of the popups can be modified by rules in your theme's style.css.
* I'd love help testing and polishing. I really want to get functionality like this built into Drupal 7.

The announcement on my site didn't seem to get picked up by Drupal Planet, and it is already a little out of date (most of the limitations listed have been fixed in the latest beta).


Cool! This could be very

Bevan@drupal.org's picture
Bevan@drupal.org - Sat, 2008-01-26 02:24

Cool! This could be very useful. However it's important not to apply the popups in places where it breaks user-flow. Some of the places you have applied it in your demo would do this. I highly recommend this excellent article on A List Apart titled "Never Use a Warning when you mean Undo" for more detail on why.

Obviously the video is just a demo though. The idea is great and I think it could be useful in many places in contrib and core -- although I can't think of any examples right now.

It's also important to let the link fall through to the traditional method if javascript is not enabled.

Bevan/


Could you be more specific?

starbow's picture
starbow - Sat, 2008-01-26 03:27

Could you be more specific about where you think the popups break user flow? The ALA article you point to is about undo, which is a great feature to have, but is much more ambitious that what I am proposing (you might want to check out Chad's work on a DeleteAPI) . What you might have missed about the screencast, is that what is being shown in the popup is exactly what you would see if you went to the next page. It's the same functionality, just keeping your current context intact.

With javascript off, the links take you to the next page, just like they would without the module installed.


I hope jquery.ui will be

tjholowaychuk - Sat, 2008-01-26 02:57

I hope jquery.ui will be available in core 7 once its stable

is this thickbox? or just a thickbox clone? im not a huge fan of how thickbox was written I think jquery.ui would be a better solution if the dialogs will suffice ( have not looked into this )

It is neither thickbox, nor

starbow's picture
starbow - Sat, 2008-01-26 07:23

It is neither thickbox, nor a thickbox clone. It's some custom jQuery code I put together to make popups, which is totally not rocket science. Please see my reply below re: my feelings about the current state of jQuery UI. It was not ready for a 1.0 release. We will just have to see what the future brings.


looks worse than thickbox

tjholowaychuk - Sun, 2008-01-27 00:02

looks worse than thickbox IMO, and thickbox is pretty bad, however I definatly commend effort towards this kind of usability enhancment. I agree though UI was in a pretty week state I have been staying away from it for now too

vision media
350designs

The appearance is themable.

starbow's picture
starbow - Sun, 2008-01-27 02:33

The appearance is themable.


Nice

nedjo - Sat, 2008-01-26 02:58

This is indeed a piece of functionality that's needed in places.

Did you consider building off of the dialog plugin in jQuery UI? If so, why did you decide against this?

For loading only the content of the page, see the Page Array module, http://drupal.org/project/pagearray. See the Dynamicload module (in Javascript Tools head) for a sample implementation using Page Array.

It's good to see the (newly in core) forms plugin in use. See AJAX Submit (part of Javascript Tools) for server-side handling of e.g. form validation issues in AJAX form submission. I'd like to see AJAX form submission stay in a generic module, as there is a set of issues we'll need to address independent of the specific UI. Might you be interested in rolling some of this into a 6.x upgrade of AJAX Submit?

jQuery UI, etc

starbow's picture
starbow - Sat, 2008-01-26 03:17

Have you tried out the jQuery UI dialog? The version released in 1.0 was seriously lame, and, more importantly, not modal. Hopefully it will improve with the 1.1 release, but I am not willing to wait. Also, it seems to me that the lesson of drag-and-drop in Drupal 6 is that the Drupal committers would rather have focused, Drupal specific js than try and accommodate more general libraries.

Your pagearray module is very slick. I didn't think it would be possible in Drupal 5. It is much easier to pull off this in D6, with the introduction of menu_execute_active_handler(). The part that was tricky was getting the response page after submitting the form to not be themed.

I will check out Ajax submit, but I have general doubts about the Javascript Tool model of putting so many module in one project.


Breaking up jstools

nedjo - Sat, 2008-01-26 04:33

I have general doubts about the Javascript Tool model of putting so many module in one project.

Yes, I'm breaking them into separate projects for D6.

And looking for maintainers and co-maintainers

nedjo - Sat, 2008-01-26 05:31

for those projects. Might you be interested in AJAX Submit?

Well, since I haven't used

starbow's picture
starbow - Sat, 2008-01-26 07:29

Well, since I haven't used it, and don't yet know what it does, I am probably not at the head of the line :) How is it different from the ajaxSubmit call that comes with jquery.forms.js?


jQ

aaron's picture
aaron - Thu, 2008-01-31 01:11

i might be interested in helping with that. also, check out the jQ helper module as a way of assembling jquery plugins. wouldn't hurt to do that with other javascript tools.

Aaron Winborn
Advomatic, Web Design for Progressive Advocacy, Grassroots Movements, and Really Cool Causes


modal with overlay

christefano's picture
christefano - Wed, 2008-06-25 00:39

The version released in 1.0 was seriously lame, and, more importantly, not modal.

I'm looking into modal dialogs for Drupal 5 site and found that the Dialog demo has a "modal with overlay" option. It seems to have been added to jQuery UI in February.


Thanks for putting this

ezra-g@drupal.org's picture
ezra-g@drupal.org - Sun, 2008-01-27 02:52

Thanks for putting this together! I've viewed the video but not yet installed the module. I worked on a similar idea for producing a simplified (not themed) node form in a thickbox popup. The idea was to simplify the workflow for nodereference fields by allowing the user to submit a new node in the popup window and have the nodereference field automatically populate in the parent window.

I'll take a look that this module. This kind of input can signifigantly improve the UI. Great work.


CCK!

starbow's picture
starbow - Sun, 2008-01-27 21:53

Yeah, I can't wait for a Drupal 6 version of CCK so I can start testing out approaches. The one bit that is tricky about the use case you describe, is not losing work in the CCK form when the popup is submitted. Right now the workflow is to submit the form in the popup and then reload the entire originating page/form to show the new results. To do what you describe, we'll need to replace just part of the originating form, which is doable (and something I am interested in doing).


Tao, you can grab CCK HEAD

yched@drupal.org - Sun, 2008-01-27 23:52

Tao, you can grab CCK HEAD already. It's not officially ready yet, and has its share of bugs, but it is fully functionnal.
I'm also really interested in getting modals workflows in drupal.
I hope you're aiming at core for D7 !

Drat

starbow's picture
starbow - Tue, 2008-01-29 06:25

I pulled down a copy of CCK head and have been playing with it to good effect. But I have been playing with subpage updates, and it gets nasty quick. I actually got single row table updates working, but it seems like it is going to be a nightmare trying to apply the tabledrag behavior to a single new row of a table. It is very much designed to work on the entire table as once. Drat.


Style

tjholowaychuk - Wed, 2008-01-30 19:44

What is your default styling for the dialog right now? I would be interested in creating a generic one that should integrate well with most themes, it always hurts me a little inside when WYSIWYG's etc completely stick out from your design

vision media
350designs

The default style is defined

starbow's picture
starbow - Thu, 2008-01-31 00:07

The default style is defined in a popups.css file included with the module. I am focused on functionality right now, but would be thrilled if someone wanted to redo the default style to play nicer with garland.


that might be a fun project.

aaron's picture
aaron - Thu, 2008-01-31 01:07

that might be a fun project. i make take a stab at it when i try out the module.

really cool would be to use garland's color module bit to make rounded corners the same colors as the theme. just saying... ;)

Aaron Winborn
Advomatic, Web Design for Progressive Advocacy, Grassroots Movements, and Really Cool Causes


Ideally I would like to use

tjholowaychuk - Thu, 2008-01-31 15:17

Ideally I would like to use alpha transparent PNG's but I suppose with old browsers that is not a great move if/when this module is in core, I will think about it, I'mnot a fan of the color module, just seems really hackish to me but I agree that would be pretty cool to just swap colors quickly like that

vision media
350designs

Transparent PNG's

starbow's picture
starbow - Thu, 2008-01-31 18:00

For the first pass, you might as well just use alpha PNG's. I have been focusing by development on modern browsers, and there is probably quite a bit of other work that will need to be done to get it to play nicely with ie6 and it's ilk.


For transparent PNGs, could

catch's picture
catch - Fri, 2008-02-01 10:42

For transparent PNGs, could probably just use the jQuery pngfix (which has a module).


Good to know about that

starbow's picture
starbow - Fri, 2008-02-01 18:44

Good to know about that module/plug-in. Looks slick.


You might want to check out

Bevan@drupal.org's picture
Bevan@drupal.org - Sat, 2008-02-02 00:31

You might want to check out alternative suggestions before implementing a js fix for this: http://www.civicactions.com/blog/png_images_transparency_ie6_answers_to_...

Bevan/


I think it would be kind of

tjholowaychuk - Sat, 2008-02-02 01:59

I think it would be kind of silly to require pngfix.module for this module IMO

vision media
350designs

Sounds good, Garland

tjholowaychuk - Thu, 2008-01-31 01:09

Sounds good, Garland defaults seem to go deecently well with most themes, atleast with a few color adjustments, I have a few ideas though, i dont want to go overboard and make it stand out to much either, I will post something asap

vision media
350designs

This and the CCK demo are

noahb@drupal.org - Fri, 2008-02-01 06:30

This and the CCK demo are really nice examples! Thanks for taking the initiative with this.
I was wondering why you put the (drupal) message into a dialog vs. adding it back into the page?

Good question.

starbow's picture
starbow - Fri, 2008-02-01 18:28

My two reasons for putting the message in a popup are:

1) Unclear where to put it. The obvious place is the standard message area, but it might be scrolled out of view. That would be very confusing to have something fail, and to have to think to scroll up to the top of the page to find out why.

2) Accessibility. I know everyone think of Accessibility and Ajax as incompatible, but it turns out modern screen readers can handle it. But you have to be careful to keep the flow of information clear. This aspect needs more testing and more work (I know I need to prevent the tab/focus flow from moving out of the dialog, and I might need to do more to signal the screen reader that the elements behind the overlay are unavailable).

I would like to add a setting to select different ways of handling the messages. I have been thinking about offering a timed fade out - where the message starts in an opaque overlay, and then fades out and reappears in the normal message area (a complete accessibility no-no, but some people might prefer it). Actually, thinking this through as I type it, it would probably be a good idea to always put the message into the normal message area, no mater how else we handle it.

I am also thinking about having clicks on the normal, semi-transparent overlay trigger a cancel/close. I wonder if folk have done usability studies on that one.


Right, there is also the

starbow's picture
starbow - Sat, 2008-02-02 00:11

Right, there is also the fact that if I want to put the messages into the "standard" place, it is a pain to target. In garland, the message are the sixth of nine possible children of the div with the class="left-corner", eight of which might or might not be there. And, of course, the messages don't have a single root element. In drupal_set_message(msg, type), each distinct type generates a separate div.

I can put together the logic to handle garland, but it's going to be tricky to deal with multiple themes.

Hopefully in Drupal 7 to get some more stable xhtml to target. Maybe something like:

  <div id="messages" <?php if (!empty($messages)):?> style="display:none" <?php endif;?>
    <?php print $messages; ?>
  </div>