root / drupal7 / sites / all / modules / ctools / js / dropbutton.js @ 6e3ce7c2
1 | 85ad3d82 | Assos Assos | /**
|
---|---|---|---|
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 | 6e3ce7c2 | Assos Assos | }; |
73 | 85ad3d82 | Assos Assos | // 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 | 6e3ce7c2 | Assos Assos | }; |
94 | 85ad3d82 | Assos Assos | })(jQuery); |