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

initial version

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