/** * @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);