[Summary view] [Print] [Text view]

   1  // $Id: dropdown.js,v 1.3.2.1 2009/10/05 23:38:33 merlinofchaos Exp $
   2  /**
   3   * @file
   4   * Implement a simple, clickable dropdown menu.
   5   *
   6   * See dropdown.theme.inc for primary documentation.
   7   *
   8   * The javascript relies on four classes:
   9   * - The dropdown must be fully contained in a div with the class
  10   *   ctools-dropdown. It must also contain the class ctools-dropdown-no-js
  11   *   which will be immediately removed by the javascript; this allows for
  12   *   graceful degradation.
  13   * - The trigger that opens the dropdown must be an a tag wit hthe class
  14   *   ctools-dropdown-link. The href should just be '#' as this will never
  15   *   be allowed to complete.
  16   * - The part of the dropdown that will appear when the link is clicked must
  17   *   be a div with class ctools-dropdown-container.
  18   * - Finally, ctools-dropdown-hover will be placed on any link that is being
  19   *   hovered over, so that the browser can restyle the links.
  20   *
  21   * This tool isn't meant to replace click-tips or anything, it is specifically
  22   * meant to work well presenting menus.
  23   */
  24  
  25  (function ($) {
  26    Drupal.behaviors.CToolsDropdown = function() {
  27      $('div.ctools-dropdown:not(.ctools-dropdown-processed)')
  28        .removeClass('ctools-dropdown-no-js')
  29        .addClass('ctools-dropdown-processed')
  30        .each(function() {
  31          var $dropdown = $(this);
  32          var open = false;
  33          var hovering = false;
  34          var timerID = 0;
  35  
  36          var toggle = function(close) {
  37            // if it's open or we're told to close it, close it.
  38            if (open || close) {
  39              // If we're just toggling it, close it immediately.
  40              if (!close) {
  41                open = false;
  42                $("div.ctools-dropdown-container", $dropdown).slideUp(100);
  43              }
  44              else {
  45                // If we were told to close it, wait half a second to make
  46                // sure that's what the user wanted.
  47                // Clear any previous timer we were using.
  48                if (timerID) {
  49                  clearTimeout(timerID);
  50                }
  51                timerID = setTimeout(function() {
  52                  if (!hovering) {
  53                    open = false;
  54                    $("div.ctools-dropdown-container", $dropdown).slideUp(100);
  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  })(jQuery);