root / drupal7 / sites / all / modules / ctools / js / dropdown.js @ 6e3ce7c2
| 1 |
/**
|
|---|---|
| 2 |
* @file
|
| 3 |
* Implement a simple, clickable dropdown menu.
|
| 4 |
*
|
| 5 |
* See dropdown.theme.inc for primary documentation.
|
| 6 |
*
|
| 7 |
* The javascript relies on four classes:
|
| 8 |
* - The dropdown must be fully contained in a div with the class
|
| 9 |
* ctools-dropdown. It must also contain the class ctools-dropdown-no-js
|
| 10 |
* which will be immediately removed by the javascript; this allows for
|
| 11 |
* graceful degradation.
|
| 12 |
* - The trigger that opens the dropdown must be an a tag wit hthe class
|
| 13 |
* ctools-dropdown-link. The href should just be '#' as this will never
|
| 14 |
* be allowed to complete.
|
| 15 |
* - The part of the dropdown that will appear when the link is clicked must
|
| 16 |
* be a div with class ctools-dropdown-container.
|
| 17 |
* - Finally, ctools-dropdown-hover will be placed on any link that is being
|
| 18 |
* hovered over, so that the browser can restyle the links.
|
| 19 |
*
|
| 20 |
* This tool isn't meant to replace click-tips or anything, it is specifically
|
| 21 |
* meant to work well presenting menus.
|
| 22 |
*/
|
| 23 |
|
| 24 |
(function ($) { |
| 25 |
Drupal.behaviors.CToolsDropdown = {
|
| 26 |
attach: function() { |
| 27 |
$('div.ctools-dropdown').once('ctools-dropdown', function() { |
| 28 |
var $dropdown = $(this); |
| 29 |
var open = false; |
| 30 |
var hovering = false; |
| 31 |
var timerID = 0; |
| 32 |
|
| 33 |
$dropdown.removeClass('ctools-dropdown-no-js'); |
| 34 |
|
| 35 |
var toggle = function(close) { |
| 36 |
// if it's open or we're told to close it, close it.
|
| 37 |
if (open || close) {
|
| 38 |
// If we're just toggling it, close it immediately.
|
| 39 |
if (!close) {
|
| 40 |
open = false;
|
| 41 |
$("div.ctools-dropdown-container", $dropdown).slideUp(100); |
| 42 |
} |
| 43 |
else {
|
| 44 |
// If we were told to close it, wait half a second to make
|
| 45 |
// sure that's what the user wanted.
|
| 46 |
// Clear any previous timer we were using.
|
| 47 |
if (timerID) {
|
| 48 |
clearTimeout(timerID); |
| 49 |
} |
| 50 |
timerID = setTimeout(function() {
|
| 51 |
if (!hovering) {
|
| 52 |
open = false;
|
| 53 |
$("div.ctools-dropdown-container", $dropdown).slideUp(100); |
| 54 |
} |
| 55 |
}, 500);
|
| 56 |
} |
| 57 |
} |
| 58 |
else {
|
| 59 |
// open it.
|
| 60 |
open = true;
|
| 61 |
$("div.ctools-dropdown-container", $dropdown) |
| 62 |
.animate({height: "show", opacity: "show"}, 100);
|
| 63 |
} |
| 64 |
}; |
| 65 |
$("a.ctools-dropdown-link", $dropdown).click(function() { |
| 66 |
toggle(); |
| 67 |
return false; |
| 68 |
}); |
| 69 |
|
| 70 |
$dropdown.hover(
|
| 71 |
function() {
|
| 72 |
hovering = true;
|
| 73 |
}, // hover in
|
| 74 |
function() { // hover out |
| 75 |
hovering = false;
|
| 76 |
toggle(true);
|
| 77 |
return false; |
| 78 |
}); |
| 79 |
// @todo -- just use CSS for this noise.
|
| 80 |
$("div.ctools-dropdown-container a").hover( |
| 81 |
function() { $(this).addClass('ctools-dropdown-hover'); }, |
| 82 |
function() { $(this).removeClass('ctools-dropdown-hover'); } |
| 83 |
); |
| 84 |
}); |
| 85 |
} |
| 86 |
}; |
| 87 |
})(jQuery); |