dropdown.js
2.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/**
* @file
* Implement a simple, clickable dropdown menu.
*
* See dropdown.theme.inc for primary documentation.
*
* The javascript relies on four classes:
* - The dropdown must be fully contained in a div with the class
* ctools-dropdown. It must also contain the class ctools-dropdown-no-js
* which will be immediately removed by the javascript; this allows for
* graceful degradation.
* - The trigger that opens the dropdown must be an a tag wit hthe class
* ctools-dropdown-link. The href should just be '#' as this will never
* be allowed to complete.
* - The part of the dropdown that will appear when the link is clicked must
* be a div with class ctools-dropdown-container.
* - Finally, ctools-dropdown-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.CToolsDropdown = {
attach: function() {
$('div.ctools-dropdown').once('ctools-dropdown', function() {
var $dropdown = $(this);
var open = false;
var hovering = false;
var timerID = 0;
$dropdown.removeClass('ctools-dropdown-no-js');
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;
$("div.ctools-dropdown-container", $dropdown).slideUp(100);
}
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;
$("div.ctools-dropdown-container", $dropdown).slideUp(100);
}
}, 500);
}
}
else {
// open it.
open = true;
$("div.ctools-dropdown-container", $dropdown)
.animate({height: "show", opacity: "show"}, 100);
}
}
$("a.ctools-dropdown-link", $dropdown).click(function() {
toggle();
return false;
});
$dropdown.hover(
function() {
hovering = true;
}, // hover in
function() { // hover out
hovering = false;
toggle(true);
return false;
});
// @todo -- just use CSS for this noise.
$("div.ctools-dropdown-container a").hover(
function() { $(this).addClass('ctools-dropdown-hover'); },
function() { $(this).removeClass('ctools-dropdown-hover'); }
);
});
}
}
})(jQuery);