comparison sites/all/modules/ctools/js/dropbutton.js @ 0:ff03f76ab3fe

initial version

+/**
+ * @file
+ * Implement a simple, clickable dropbutton menu.
+ *
+ * See dropbutton.theme.inc for primary documentation.
+ *
+ * The javascript relies on four classes:
+ * - The dropbutton must be fully contained in a div with the class
+ *   ctools-dropbutton. It must also contain the class ctools-no-js
+ *   which will be immediately removed by the javascript; this allows for
+ *   graceful degradation.
+ * - The trigger that opens the dropbutton must be an a tag wit hthe class
+ *   ctools-dropbutton-link. The href should just be '#' as this will never
+ *   be allowed to complete.
+ * - The part of the dropbutton that will appear when the link is clicked must
+ *   be a div with class ctools-dropbutton-container.
+ * - Finally, ctools-dropbutton-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.CToolsDropbutton = {
+    attach: function() {
+      // Process buttons. All dropbuttons are buttons.
+      $('.ctools-button')
+        .once('ctools-button')
+        .removeClass('ctools-no-js');
+
+      // Process dropbuttons. Not all buttons are dropbuttons.
+      $('.ctools-dropbutton').once('ctools-dropbutton', function() {
+        var $dropbutton = $(this);
+        var $button = $('.ctools-content', $dropbutton);
+        var $secondaryActions = $('li', $button).not(':first');
+        var $twisty = $(".ctools-link", $dropbutton);
+        var open = false;
+        var hovering = false;
+        var timerID = 0;
+
+        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;
+              $secondaryActions.slideUp(100);
+              $dropbutton.removeClass('open');
+            }
+            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;
+                  $secondaryActions.slideUp(100);
+                  $dropbutton.removeClass('open');
+                }}, 500);
+            }
+          }
+          else {
+            // open it.
+            open = true;
+            $secondaryActions.animate({height: "show", opacity: "show"}, 100);
+            $dropbutton.addClass('open');
+          }
+        }
+        // Hide the secondary actions initially.
+        $secondaryActions.hide();
+
+        $twisty.click(function() {
+            toggle();
+            return false;
+          });
+
+        $dropbutton.hover(
+          function() {
+            hovering = true;
+          }, // hover in
+          function() { // hover out
+            hovering = false;
+            toggle(true);
+            return false;
+          }
+        );
+      });
+    }
+  }
+})(jQuery);