danielebarchiesi@0: /**
danielebarchiesi@0:  * @file
danielebarchiesi@0:  * Implement a simple, clickable dropbutton menu.
danielebarchiesi@0:  *
danielebarchiesi@0:  * See dropbutton.theme.inc for primary documentation.
danielebarchiesi@0:  *
danielebarchiesi@0:  * The javascript relies on four classes:
danielebarchiesi@0:  * - The dropbutton must be fully contained in a div with the class
danielebarchiesi@0:  *   ctools-dropbutton. It must also contain the class ctools-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 dropbutton must be an a tag wit hthe class
danielebarchiesi@0:  *   ctools-dropbutton-link. The href should just be '#' as this will never
danielebarchiesi@0:  *   be allowed to complete.
danielebarchiesi@0:  * - The part of the dropbutton that will appear when the link is clicked must
danielebarchiesi@0:  *   be a div with class ctools-dropbutton-container.
danielebarchiesi@0:  * - Finally, ctools-dropbutton-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.CToolsDropbutton = {
danielebarchiesi@0:     attach: function() {
danielebarchiesi@0:       // Process buttons. All dropbuttons are buttons.
danielebarchiesi@0:       $('.ctools-button')
danielebarchiesi@0:         .once('ctools-button')
danielebarchiesi@0:         .removeClass('ctools-no-js');
danielebarchiesi@0: 
danielebarchiesi@0:       // Process dropbuttons. Not all buttons are dropbuttons.
danielebarchiesi@0:       $('.ctools-dropbutton').once('ctools-dropbutton', function() {
danielebarchiesi@0:         var $dropbutton = $(this);
danielebarchiesi@0:         var $button = $('.ctools-content', $dropbutton);
danielebarchiesi@0:         var $secondaryActions = $('li', $button).not(':first');
danielebarchiesi@0:         var $twisty = $(".ctools-link", $dropbutton);
danielebarchiesi@0:         var open = false;
danielebarchiesi@0:         var hovering = false;
danielebarchiesi@0:         var timerID = 0;
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:               $secondaryActions.slideUp(100);
danielebarchiesi@0:               $dropbutton.removeClass('open');
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:                   $secondaryActions.slideUp(100);
danielebarchiesi@0:                   $dropbutton.removeClass('open');
danielebarchiesi@0:                 }}, 500);
danielebarchiesi@0:             }
danielebarchiesi@0:           }
danielebarchiesi@0:           else {
danielebarchiesi@0:             // open it.
danielebarchiesi@0:             open = true;
danielebarchiesi@0:             $secondaryActions.animate({height: "show", opacity: "show"}, 100);
danielebarchiesi@0:             $dropbutton.addClass('open');
danielebarchiesi@0:           }
danielebarchiesi@0:         }
danielebarchiesi@0:         // Hide the secondary actions initially.
danielebarchiesi@0:         $secondaryActions.hide();
danielebarchiesi@0: 
danielebarchiesi@0:         $twisty.click(function() {
danielebarchiesi@0:             toggle();
danielebarchiesi@0:             return false;
danielebarchiesi@0:           });
danielebarchiesi@0: 
danielebarchiesi@0:         $dropbutton.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:         );
danielebarchiesi@0:       });
danielebarchiesi@0:     }
danielebarchiesi@0:   }
danielebarchiesi@0: })(jQuery);