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   clearTimeout(menu.timer);
  18
  19   if (delay > 0) {
  20     menu.timer = setTimeout(function () { openMenu(anchor, menu) }, delay);
  21   } else {
  22     openMenu(event, menu);
  23   }
  24 }
  25
  26 /*
  27  * Callback called when the mouse leaves a menu anchor.
  28  */
  29 function leaveMenuAnchor(event, anchor, menu) {
  30   var to = event.relatedTarget || event.toElement;
  31
  32   if (to != menu && !to.descendantOf(menu)) {
  33     menu.style.display = "none";
  34   }
  35
  36   clearTimeout(menu.timer);
  37 }
  38
  39 /*
  40  * Callback called when the mouse leaves a menu.
  41  */
  42 function leaveMenu(event, anchor, menu) {
  43   var to = event.relatedTarget || event.toElement;
  44
  45   if (to != anchor && !to.descendantOf(menu)) {
  46     menu.style.display = "none";
  47   }
  48
  49   clearTimeout(menu.timer);
  50 }
  51
  52 /*
  53  * Setup a menu, triggered by hovering over an anchor for a given time.
  54  */
  55 function createMenu(anchorid, menuid, delay) {
  56   var anchor = $(anchorid);
  57   var menu = $(menuid);
  58
  59   anchor.onmouseover = function (event) { enterMenuAnchor(anchor, anchor, menu, delay) };
  60   anchor.onmouseout = function (event) { leaveMenuAnchor(event, anchor, menu) };
  61   menu.onmouseout = function (event) { leaveMenu(event, anchor, menu) };
  62 }