danielebarchiesi@0: /**
danielebarchiesi@0:  * @file
danielebarchiesi@0:  * Implement a simple, clickable dropdown menu.
danielebarchiesi@0:  *
danielebarchiesi@0:  * See dropdown.theme.inc for primary documentation.
danielebarchiesi@0:  *
danielebarchiesi@0:  * The javascript relies on four classes:
danielebarchiesi@0:  * - The dropdown must be fully contained in a div with the class
danielebarchiesi@0:  *   ctools-dropdown. It must also contain the class ctools-dropdown-no-js
danielebarchiesi@0:  *   which will be immediately removed by the javascript; this allows for
danielebarchiesi@0:  *   graceful degradation.
danielebarchiesi@0:  * - The trigger that opens the dropdown must be an a tag wit hthe class
danielebarchiesi@0:  *   ctools-dropdown-link. The href should just be '#' as this will never
danielebarchiesi@0:  *   be allowed to complete.
danielebarchiesi@0:  * - The part of the dropdown that will appear when the link is clicked must
danielebarchiesi@0:  *   be a div with class ctools-dropdown-container.
danielebarchiesi@0:  * - Finally, ctools-dropdown-hover will be placed on any link that is being
danielebarchiesi@0:  *   hovered over, so that the browser can restyle the links.
danielebarchiesi@0:  *
danielebarchiesi@0:  * This tool isn't meant to replace click-tips or anything, it is specifically
danielebarchiesi@0:  * meant to work well presenting menus.
danielebarchiesi@0:  */
danielebarchiesi@0: 
danielebarchiesi@0: (function ($) {
danielebarchiesi@0:   Drupal.behaviors.CToolsDropdown = {
danielebarchiesi@0:     attach: function() {
danielebarchiesi@0:       $('div.ctools-dropdown').once('ctools-dropdown', function() {
danielebarchiesi@0:         var $dropdown = $(this);
danielebarchiesi@0:         var open = false;
danielebarchiesi@0:         var hovering = false;
danielebarchiesi@0:         var timerID = 0;
danielebarchiesi@0: 
danielebarchiesi@0:         $dropdown.removeClass('ctools-dropdown-no-js');
danielebarchiesi@0: 
danielebarchiesi@0:         var toggle = function(close) {
danielebarchiesi@0:           // if it's open or we're told to close it, close it.
danielebarchiesi@0:           if (open || close) {
danielebarchiesi@0:             // If we're just toggling it, close it immediately.
danielebarchiesi@0:             if (!close) {
danielebarchiesi@0:               open = false;
danielebarchiesi@0:               $("div.ctools-dropdown-container", $dropdown).slideUp(100);
danielebarchiesi@0:             }
danielebarchiesi@0:             else {
danielebarchiesi@0:               // If we were told to close it, wait half a second to make
danielebarchiesi@0:               // sure that's what the user wanted.
danielebarchiesi@0:               // Clear any previous timer we were using.
danielebarchiesi@0:               if (timerID) {
danielebarchiesi@0:                 clearTimeout(timerID);
danielebarchiesi@0:               }
danielebarchiesi@0:               timerID = setTimeout(function() {
danielebarchiesi@0:                 if (!hovering) {
danielebarchiesi@0:                   open = false;
danielebarchiesi@0:                   $("div.ctools-dropdown-container", $dropdown).slideUp(100);
danielebarchiesi@0:                 }
danielebarchiesi@0:               }, 500);
danielebarchiesi@0:             }
danielebarchiesi@0:           }
danielebarchiesi@0:           else {
danielebarchiesi@0:             // open it.
danielebarchiesi@0:             open = true;
danielebarchiesi@0:             $("div.ctools-dropdown-container", $dropdown)
danielebarchiesi@0:               .animate({height: "show", opacity: "show"}, 100);
danielebarchiesi@0:           }
danielebarchiesi@0:         }
danielebarchiesi@0:         $("a.ctools-dropdown-link", $dropdown).click(function() {
danielebarchiesi@0:           toggle();
danielebarchiesi@0:           return false;
danielebarchiesi@0:         });
danielebarchiesi@0: 
danielebarchiesi@0:         $dropdown.hover(
danielebarchiesi@0:             function() {
danielebarchiesi@0:               hovering = true;
danielebarchiesi@0:             }, // hover in
danielebarchiesi@0:             function() { // hover out
danielebarchiesi@0:               hovering = false;
danielebarchiesi@0:               toggle(true);
danielebarchiesi@0:               return false;
danielebarchiesi@0:             });
danielebarchiesi@0:         // @todo -- just use CSS for this noise.
danielebarchiesi@0:         $("div.ctools-dropdown-container a").hover(
danielebarchiesi@0:           function() { $(this).addClass('ctools-dropdown-hover'); },
danielebarchiesi@0:           function() { $(this).removeClass('ctools-dropdown-hover'); }
danielebarchiesi@0:         );
danielebarchiesi@0:       });
danielebarchiesi@0:     }
danielebarchiesi@0:   }
danielebarchiesi@0: })(jQuery);