Match pan/zoom control style better

[rails.git] / app / assets / javascripts / menu.js

diff --git a/app/assets/javascripts/menu.js b/app/assets/javascripts/menu.js
index 26151775687fc22f22ff5eb6b0e315c00aff2bf9..a01fc39cc68bbfe86f85f79a0e786a4c8f77481c 100644 (file)
--- a/app/assets/javascripts/menu.js
+++ b/app/assets/javascripts/menu.js
@@ -2,81 +2,48 @@
  * Open a menu.
  */
 function openMenu(anchor, menu, align) {
+  var anchorPosition = anchor.offset();
   var offset;
 
   if (align == "left") {
     offset = 0;
   } else if (align == "right") {
-    offset = anchor.getWidth() - menu.getWidth();
+    offset = menu.outerWidth() - anchor.outerWidth();
   }
 
-  menu.clonePosition(anchor, {
-    setLeft: true, setTop: true, setWidth: false, setHeight: false,
-    offsetLeft: offset, offsetTop: anchor.getHeight()
-  });
-
-  menu.style.display = "block";
-}
-
-/*
- * Close a menu.
- */
-function closeMenu(menu) {
-  clearTimeout(menu.timer);
-  menu.style.display = "none";
-}
-
-/*
- * Callback called when the mouse enters a menu anchor.
- */
-function enterMenuAnchor(event, anchor, menu, delay, align) {
-  if (!anchor.hasClassName("disabled")) {
-    clearTimeout(menu.timer);
-
-    if (delay > 0) {
-      menu.timer = setTimeout(function () { openMenu(anchor, menu, align) }, delay);
-    } else {
-      openMenu(event, menu, align);
-    }
-  }
-}
-
-/*
- * Callback called when the mouse leaves a menu anchor.
- */
-function leaveMenuAnchor(event, anchor, menu) {
-  var to = event.relatedTarget;
-
-  if (to != menu && !to.descendantOf(menu)) {
-    menu.style.display = "none";
-  }
+  menu.show();
 
-  clearTimeout(menu.timer);
-}
-
-/*
- * Callback called when the mouse leaves a menu.
- */
-function leaveMenu(event, anchor, menu) {
-  var to = event.relatedTarget;
-
-  if (to != anchor && !to.descendantOf(menu)) {
-    menu.style.display = "none";
-  }
-
-  clearTimeout(menu.timer);
+  menu.offset({
+    top: anchorPosition.top + anchor.outerHeight(),
+    left: anchorPosition.left - offset
+  });
 }
 
 /*
  * Setup a menu, triggered by hovering over an anchor for a given time.
  */
-function createMenu(anchorid, menuid, delay, align) {
-  var anchor = $(anchorid);
-  var menu = $(menuid);
+function createMenu(anchorid, menuid, align) {
+  var $anchor = $("#" + anchorid);
+  var $arrow = $("#" + anchorid + " .menuicon");
+  var $menu = $("#" + menuid);
+  var $page = $(":not(#" + menuid + ", #" + anchorid + ")");
+
+  function hide() {
+    $menu.hide();
+    $page.off("click", hide);
+  }
 
-  anchor.observe("mouseup", function (event) { closeMenu(menu) });
-  anchor.observe("mouseover", function (event) { enterMenuAnchor(anchor, anchor, menu, delay, align) });
-  anchor.observe("mouseout", function (event) { leaveMenuAnchor(event, anchor, menu) });
-  menu.observe("mouseup", function (event) { closeMenu(menu) });
-  menu.observe("mouseout", function (event) { leaveMenu(event, anchor, menu) });
+  $arrow.click(function(e) {
+    if ($anchor.is(":not(.disabled)")) {
+      e.stopPropagation();
+      e.preventDefault();
+      if ($menu.is(":visible")) {
+        $menu.hide();
+        $page.off("click", hide);
+      } else {
+        openMenu($anchor, $menu.show(), align);
+        $page.on("click", hide);
+      }
+    }
+  });
 }