Chaos Tools Modal Login

A lot of clients really dig the modal windows nowadays - probably made more popular by Facebook and other online applications that are more application than just website. So it has been a concentration of mine for quite a while to get these working on sites in various scenarios for all kinds of features, and while I spent a lot of time at first using Tao Starbow's Popups API, my attention slowly turned to Earl Mile's Chaos Tools. There is also some great integration fun to be had with Modal Frame API, and maybe there should be a module that simply detects which framework you have installed on your system and uses it for login, but for now here is one that uses Chaos Tools which I've dubbed Chaos Login.

This module is short and sweet and gives users a quick feature to turn on. Out of the box, the module provides a block with the login and registration links that are formatted to fit the specifications of ctools usage. Namely, /nojs is appended to the link hrefs and the class 'ctools-use-modal' is added. While this block provides an out of box experience for users, you can use this module on your user links pretty much anywhere. As long as they conform to three simple rules.

Append /nojs to the href property of the link.
Append the class 'ctools-use-modal' to the link's class attribute.
Call the appropriate functions when your links are displayed that add the ctools javascript libraries to the page.

The third part here is is really the trick. Step one and two are no-brainers, but choosing when and where to do step three can sometime take a little bit of creativity. So let's look at a little of the code from the Chaos Login to see how it is done for this particular scenario. I've already mentioned that this module provides a block that has the appropriately formatted links within it (steps one and two) but how do we determine where and when to add the ctools javascript libraries? Let's look at the code.

<?php
/**
 * Implementation of hook_block().
 * Generates the block similar to the user login block.
 */
function ctools_modal_login_block($op = 'list', $delta = 0, $edit = array()) {
  global $user;
  switch ($op) {
    case 'list':
      $blocks[0]['info'] = t('Ctools User login');
      // Not worth caching.
      $blocks[0]['cache'] = BLOCK_NO_CACHE;
      break;
    case 'view':
      if (!$user->uid) {
        // add our ctools js
        ctools_include('modal');
        ctools_modal_add_js();
        $blocks = array(
          'subject' => t('User login'),
          'content' => theme('ctools_modal_login'),
        );
      }
      break;
  }
  return $blocks;
}
?>

As you can see, this is a typical implementation of hook_block(). When we go to 'view' the block's content, we first do a check to make sure that there is not a logged in user (wouldn't make a whole lot of sense to show a 'login' link to a user who is already logged in) and then we use ctools_include('modal') and ctools_modal_add_js() to add the 'modal' library and then the generic ctools javascript. The same concept would be used for anywhere else you would display these links.

// comments

Hey Jared, great work with

by Anonymous - 12/20/2009

Hey Jared, great work with this module.
I've been doing a lot with CTools ajax and modals lately and ended up modifiying the modal framework to work with the jQuery UI Dialog widget. Check out my new Dialog API module. The backend is almost identical to CTools modal, but the front-end is much sexier.
The module is strictly API, but I'm writing sub-modules to handle much of the core functionality. Just today I committed dialog_comment to create, edit and delete comments in a Dialog.

Very Awesome! I'm totally

by Jerad Bitner - 12/20/2009

Very Awesome!
I'm totally removing this module altogether in favor of yours - I should have done a bit more research before duplicating your work here Roger ;) And yes, it's way more sexier!

Awesome work! just tested it

by Anonymous - 12/21/2009

Awesome work!
just tested it on my sandbox and this thing is working great!
Thanks for sharing!

// add comment

Jerad Bitner
Title

Chief Technology Officer

Bio

Jerad is our co-founder and CTO, and has been using Drupal since the nightmare upgrades from 4.6 to 4.7 (that's early 2005, if you're asking). He started out as a Technical Illustrator with C/S Group and worked for three years with Photoshop, Illustrator, AutoCad and Macromedia products as well as PHP. When it came time to replicate a platform across the different locations of the company, Jerad found Drupal and hasn't looked back since.

With 5 contributed modules and thousands of contributions to Drupal, he has gained many friends and an excellent standing within the community. He enjoys participation and helping out in any way he can, but enjoys learning most of all.

Jerad has been on the teams at Sony BMG (now Sony Music Entertainment) and LifeTime Digital where he had the opportunities to work with some of the best minds in the Drupal community. Being a part of these awesome teams has helped lead him to where he is today. An avid reader, biker, hiker, and drummer, Jerad brings an energetic drive to the team and a wealth of knowledge that is helping lead them to more productive, satisfying lives.

Tags: