public/javascripts/menu.js

   1 /*
   2  * Open a menu.
   3  */
   4 function openMenu(anchor, menu) {
   5   menu.style.display = "block";
   6
   7   menu.clonePosition(anchor, {
   8     setLeft: true, setTop: true, setWidth: false, setHeight: false,
   9     offsetLeft: 0, offsetTop: anchor.getHeight()
  10   });
  11 }
  12
  13 /*
  14  * Callback called when the mouse enters a menu anchor.
  15  */
  16 function enterMenuAnchor(event, anchor, menu, delay) {
  17   if (!anchor.hasClassName("disabled")) {
  18     clearTimeout(menu.timer);
  19
  20     if (delay > 0) {
  21       menu.timer = setTimeout(function () { openMenu(anchor, menu) }, delay);
  22     } else {
  23       openMenu(event, menu);
  24     }
  25   }
  26 }
  27
  28 /*
  29  * Callback called when the mouse leaves a menu anchor.
  30  */
  31 function leaveMenuAnchor(event, anchor, menu) {
  32   var to = event.relatedTarget;
  33
  34   if (to != menu && !to.descendantOf(menu)) {
  35     menu.style.display = "none";
  36   }
  37
  38   clearTimeout(menu.timer);
  39 }
  40
  41 /*
  42  * Callback called when the mouse leaves a menu.
  43  */
  44 function leaveMenu(event, anchor, menu) {
  45   var to = event.relatedTarget;
  46
  47   if (to != anchor && !to.descendantOf(menu)) {
  48     menu.style.display = "none";
  49   }
  50
  51   clearTimeout(menu.timer);
  52 }
  53
  54 /*
  55  * Setup a menu, triggered by hovering over an anchor for a given time.
  56  */
  57 function createMenu(anchorid, menuid, delay) {
  58   var anchor = $(anchorid);
  59   var menu = $(menuid);
  60
  61   anchor.observe("mouseover", function (event) { enterMenuAnchor(anchor, anchor, menu, delay) });
  62   anchor.observe("mouseout", function (event) { leaveMenuAnchor(event, anchor, menu) });
  63   menu.observe("mouseout", function (event) { leaveMenu(event, anchor, menu) });
  64 }