root / htmltest / sites / all / modules / ctools / js / dropdown.js @ a5572547
| 1 | 85ad3d82 | Assos Assos | /**
|
|---|---|---|---|
| 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); |