public/javascripts/menu.js

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