dropbutton.js 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  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. (function ($) {
  24. Drupal.behaviors.CToolsDropbutton = {
  25. attach: function() {
  26. // Process buttons. All dropbuttons are buttons.
  27. $('.ctools-button')
  28. .once('ctools-button')
  29. .removeClass('ctools-no-js');
  30. // Process dropbuttons. Not all buttons are dropbuttons.
  31. $('.ctools-dropbutton').once('ctools-dropbutton', function() {
  32. var $dropbutton = $(this);
  33. var $button = $('.ctools-content', $dropbutton);
  34. var $secondaryActions = $('li', $button).not(':first');
  35. var $twisty = $(".ctools-link", $dropbutton);
  36. var open = false;
  37. var hovering = false;
  38. var timerID = 0;
  39. var toggle = function(close) {
  40. // if it's open or we're told to close it, close it.
  41. if (open || close) {
  42. // If we're just toggling it, close it immediately.
  43. if (!close) {
  44. open = false;
  45. $secondaryActions.slideUp(100);
  46. $dropbutton.removeClass('open');
  47. }
  48. else {
  49. // If we were told to close it, wait half a second to make
  50. // sure that's what the user wanted.
  51. // Clear any previous timer we were using.
  52. if (timerID) {
  53. clearTimeout(timerID);
  54. }
  55. timerID = setTimeout(function() {
  56. if (!hovering) {
  57. open = false;
  58. $secondaryActions.slideUp(100);
  59. $dropbutton.removeClass('open');
  60. }}, 500);
  61. }
  62. }
  63. else {
  64. // open it.
  65. open = true;
  66. $secondaryActions.animate({height: "show", opacity: "show"}, 100);
  67. $dropbutton.addClass('open');
  68. }
  69. }
  70. // Hide the secondary actions initially.
  71. $secondaryActions.hide();
  72. $twisty.click(function() {
  73. toggle();
  74. return false;
  75. });
  76. $dropbutton.hover(
  77. function() {
  78. hovering = true;
  79. }, // hover in
  80. function() { // hover out
  81. hovering = false;
  82. toggle(true);
  83. return false;
  84. }
  85. );
  86. });
  87. }
  88. }
  89. })(jQuery);