root / drupal7 / sites / all / modules / ctools / js / dropbutton.js @ 152165a8
1 |
/**
|
---|---|
2 |
* @file
|
3 |
* Implement a simple, clickable dropbutton menu.
|
4 |
*
|
5 |
* See dropbutton.theme.inc for primary documentation.
|
6 |
*
|
7 |
* The javascript relies on four classes:
|
8 |
* - The dropbutton must be fully contained in a div with the class
|
9 |
* ctools-dropbutton. It must also contain the class ctools-no-js
|
10 |
* which will be immediately removed by the javascript; this allows for
|
11 |
* graceful degradation.
|
12 |
* - The trigger that opens the dropbutton must be an a tag wit hthe class
|
13 |
* ctools-dropbutton-link. The href should just be '#' as this will never
|
14 |
* be allowed to complete.
|
15 |
* - The part of the dropbutton that will appear when the link is clicked must
|
16 |
* be a div with class ctools-dropbutton-container.
|
17 |
* - Finally, ctools-dropbutton-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.CToolsDropbutton = { |
26 |
attach: function() { |
27 |
// Process buttons. All dropbuttons are buttons.
|
28 |
$('.ctools-button') |
29 |
.once('ctools-button')
|
30 |
.removeClass('ctools-no-js');
|
31 |
|
32 |
// Process dropbuttons. Not all buttons are dropbuttons.
|
33 |
$('.ctools-dropbutton').once('ctools-dropbutton', function() { |
34 |
var $dropbutton = $(this); |
35 |
var $button = $('.ctools-content', $dropbutton); |
36 |
var $secondaryActions = $('li', $button).not(':first'); |
37 |
var $twisty = $(".ctools-link", $dropbutton); |
38 |
var open = false; |
39 |
var hovering = false; |
40 |
var timerID = 0; |
41 |
|
42 |
var toggle = function(close) { |
43 |
// if it's open or we're told to close it, close it.
|
44 |
if (open || close) {
|
45 |
// If we're just toggling it, close it immediately.
|
46 |
if (!close) {
|
47 |
open = false;
|
48 |
$secondaryActions.slideUp(100); |
49 |
$dropbutton.removeClass('open'); |
50 |
} |
51 |
else {
|
52 |
// If we were told to close it, wait half a second to make
|
53 |
// sure that's what the user wanted.
|
54 |
// Clear any previous timer we were using.
|
55 |
if (timerID) {
|
56 |
clearTimeout(timerID); |
57 |
} |
58 |
timerID = setTimeout(function() {
|
59 |
if (!hovering) {
|
60 |
open = false;
|
61 |
$secondaryActions.slideUp(100); |
62 |
$dropbutton.removeClass('open'); |
63 |
}}, 500);
|
64 |
} |
65 |
} |
66 |
else {
|
67 |
// open it.
|
68 |
open = true;
|
69 |
$secondaryActions.animate({height: "show", opacity: "show"}, 100); |
70 |
$dropbutton.addClass('open'); |
71 |
} |
72 |
} |
73 |
// Hide the secondary actions initially.
|
74 |
$secondaryActions.hide();
|
75 |
|
76 |
$twisty.click(function() { |
77 |
toggle(); |
78 |
return false; |
79 |
}); |
80 |
|
81 |
$dropbutton.hover(
|
82 |
function() {
|
83 |
hovering = true;
|
84 |
}, // hover in
|
85 |
function() { // hover out |
86 |
hovering = false;
|
87 |
toggle(true);
|
88 |
return false; |
89 |
} |
90 |
); |
91 |
}); |
92 |
} |
93 |
} |
94 |
})(jQuery); |