Club Drupal

/**

 * @file

 * Implement a simple, clickable dropbutton menu.

 *

 * See dropbutton.theme.inc for primary documentation.

 *

 * The javascript relies on four classes:

 * - The dropbutton must be fully contained in a div with the class

 *   ctools-dropbutton. It must also contain the class ctools-no-js

 *   which will be immediately removed by the javascript; this allows for

 *   graceful degradation.

 * - The trigger that opens the dropbutton must be an a tag wit hthe class

 *   ctools-dropbutton-link. The href should just be '#' as this will never

 *   be allowed to complete.

 * - The part of the dropbutton that will appear when the link is clicked must

 *   be a div with class ctools-dropbutton-container.

 * - Finally, ctools-dropbutton-hover will be placed on any link that is being

 *   hovered over, so that the browser can restyle the links.

 *

 * This tool isn't meant to replace click-tips or anything, it is specifically

 * meant to work well presenting menus.

 */

(function ($) {

  Drupal.behaviors.CToolsDropbutton = {

    attach: function() {

      // Process buttons. All dropbuttons are buttons.

      $('.ctools-button')

        .once('ctools-button')

        .removeClass('ctools-no-js');

      // Process dropbuttons. Not all buttons are dropbuttons.

      $('.ctools-dropbutton').once('ctools-dropbutton', function() {

        var $dropbutton = $(this);

        var $button = $('.ctools-content', $dropbutton);

        var $secondaryActions = $('li', $button).not(':first');

        var $twisty = $(".ctools-link", $dropbutton);

        var open = false;

        var hovering = false;

        var timerID = 0;

        var toggle = function(close) {

          // if it's open or we're told to close it, close it.

          if (open || close) {

            // If we're just toggling it, close it immediately.

            if (!close) {

              open = false;

              $secondaryActions.slideUp(100);

              $dropbutton.removeClass('open');

            }

            else {

              // If we were told to close it, wait half a second to make

              // sure that's what the user wanted.

              // Clear any previous timer we were using.

              if (timerID) {

                clearTimeout(timerID);

              }

              timerID = setTimeout(function() {

                if (!hovering) {

                  open = false;

                  $secondaryActions.slideUp(100);

                  $dropbutton.removeClass('open');

                }}, 500);

            }

          }

          else {

            // open it.

            open = true;

            $secondaryActions.animate({height: "show", opacity: "show"}, 100);

            $dropbutton.addClass('open');

          }

        };

        // Hide the secondary actions initially.

        $secondaryActions.hide();

        $twisty.click(function() {

            toggle();

            return false;

          });

        $dropbutton.hover(

          function() {

            hovering = true;

          }, // hover in

          function() { // hover out

            hovering = false;

            toggle(true);

            return false;

          }

        );

      });

    }

  };

})(jQuery);