95 lines
3.1 KiB
JavaScript
95 lines
3.1 KiB
JavaScript
/**
|
|
* @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);
|