Rework the edit tab and it's associated drop down menu

This changes the behavior of the editing tabs in three places. Instead
of the current hovering behavior, you can click on the arrow and get the
drop-down menu. Any click outside that on the page will deactivate the
menu, following the UI paradigm of most desktop environments.

This also simplifies the javascript code significantly.

app/assets/javascripts/menu.js

@@ -19,65 +19,29 @@ function openMenu(anchor, menu, align) {
   });
 }
 
-/*
- * Close a menu.
- */
-function closeMenu(menu) {
-  clearTimeout(menu.timer);
-  menu.hide();
-}
-
-/*
- * Callback called when the mouse enters a menu anchor.
- */
-function enterMenuAnchor(event, anchor, menu, delay, align) {
-  if (!anchor.hasClass("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 (!menu.is(to) && menu.has(to).length === 0) {
-    menu.hide();
-  }
-
-  clearTimeout(menu.timer);
-}
-
-/*
- * Callback called when the mouse leaves a menu.
- */
-function leaveMenu(event, anchor, menu) {
-  var to = event.relatedTarget;
-
-  if (!anchor.is(to) && menu.has(to).length === 0) {
-    menu.hide();
-  }
-
-  clearTimeout(menu.timer);
-}
-
 /*
  * 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),
+      $arrow = $("#" + anchorid + ' .arrow'),
+      $menu = $("#" + menuid),
+      $page = $(':not(#' + menuid + ', #' + anchorid + ')');
 
-  anchor.mouseup(function (event) { closeMenu(menu); });
-  anchor.mouseover(function (event) { enterMenuAnchor(anchor, anchor, menu, delay, align); });
-  anchor.mouseout(function (event) { leaveMenuAnchor(event, anchor, menu); });
-  menu.mouseup(function (event) { closeMenu(menu); });
-  menu.mouseout(function (event) { leaveMenu(event, anchor, menu); });
+  function hide() {
+    $menu.hide();
+    $page.unbind('click', hide);
+  }
+
+  $arrow.click(function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if ($menu.is(':visible')) {
+          $menu.hide();
+          $page.unbind('click', hide);
+      } else {
+          openMenu($anchor, $menu.show(), 'left');
+          $page.bind('click', hide);
+      }
+  });
 }

app/assets/stylesheets/common.css.scss

@@ -366,23 +366,34 @@ h2 {
 
 /* Rules for edit menu */
 
+.arrow {
+  padding: 5px;
+
+  &:hover {
+    background: #eee;
+    text-decoration: none !important;
+  }
+}
+
 .menu {
   display: none;
   z-index: 10000;
   position: absolute;
   background-color: #ffffff;
-  border: 1px solid black;
+  border: 1px solid #cccccc;
+  border-top: 0;
 }
 
 .menu ul {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
+  margin: 0;
+  padding: 0;
 }
 
 .menu li {
+  padding: 2px 5px;
+  margin: 0;
   list-style-type: none;
+  border-top: 1px solid #eee;
   white-space: nowrap;
 }
 

app/assets/stylesheets/ltr.css.scss

@@ -78,6 +78,13 @@ html body {
   border-left: 1px solid #ccc;
 }
 
+/* Rules for edit menu */
+
+.arrow {
+  margin-left: 10px;
+  border-left: 1px solid #eee;
+}
+
 /* Rules for attribution text under the main map shown on printouts */
 
 .attribution_license {

app/assets/stylesheets/rtl.css.scss

@@ -78,6 +78,13 @@ html body {
   border-right: 1px solid #ccc;
 }
 
+/* Rules for edit menu */
+
+.arrow {
+  margin-right: 10px;
+  border-right: 1px solid #eee;
+}
+
 /* Rules for attribution text under the main map shown on printouts */
 
 .attribution_license {

app/views/browse/_map.html.erb

@@ -11,12 +11,12 @@
   <span id="loading"><%= t 'browse.map.loading' %></span>
   <%= link_to(t("browse.map.larger.area"), { :controller => :site, :action => :index, :box => "yes" }, { :id => "area_larger_map", :class => "geolink bbox" }) %>
   <br />
-  <%= link_to(t("browse.map.edit.area"), { :controller => :site, :action => :edit }, { :id => "area_edit", :class => "geolink bbox" }) %>
+  <%= link_to(h(t("browse.map.edit.area")) + '<span class="arrow">&#x25be;</span>'.html_safe, { :controller => :site, :action => :edit }, { :id => "area_edit", :class => "geolink bbox" }) %>
   <% unless map.instance_of? Changeset %>
     <br />
     <%= link_to("", { :controller => :site, :action => :index }, { :id => "object_larger_map", :class => "geolink object" }) %>
     <br />
-    <%= link_to("", { :controller => :site, :action => :edit }, { :id => "object_edit", :class => "geolink object" }) %>
+    <%= link_to(h("")  + '<span class="arrow">&#x25be;</span>'.html_safe, { :controller => :site, :action => :edit }, { :id => "object_edit", :class => "geolink object" }) %>
   <% end %>
   <% else %>
     <%= t 'browse.map.deleted' %>
@@ -151,8 +151,8 @@
         });
       <% end -%>
 
-      createMenu("area_edit", "area_edit_menu", 1000, "right");
-      createMenu("object_edit", "object_edit_menu", 1000, "right");
+      createMenu("area_edit", "area_edit_menu", "right");
+      createMenu("object_edit", "object_edit_menu", "right");
     }
 
     window.onload = init;

app/views/layouts/site.html.erb

@@ -37,7 +37,7 @@
         exportclass += ' active' if params['controller'] == 'site' and params['action'] == 'export'
         %>
         <li><%= link_to t('layouts.view'), {:controller => 'site', :action => 'index'}, {:id => 'viewanchor', :title => t('layouts.view_tooltip'), :class => viewclass} %></li>
-        <li><%= link_to h(t('layouts.edit')) + '&nbsp;&#x25be;'.html_safe, {:controller => 'site', :action => 'edit'}, {:id => 'editanchor', :title => t('javascripts.site.edit_tooltip'), :class => editclass} %></li>
+        <li><%= link_to h(t('layouts.edit')) + '<span class="arrow">&#x25be;</span>'.html_safe, {:controller => 'site', :action => 'edit'}, {:id => 'editanchor', :title => t('javascripts.site.edit_tooltip'), :class => editclass} %></li>
         <li><%= link_to t('layouts.history'), {:controller => 'changeset', :action => 'list' }, {:id => 'historyanchor', :title => t('javascripts.site.history_tooltip'), :class => historyclass} %></li>
         <li><%= link_to t('layouts.export'), {:controller => 'site', :action => 'export'}, {:id => 'exportanchor', :title => t('layouts.export_tooltip'), :class => exportclass} %></li>
       </ul>
@@ -53,7 +53,7 @@
     </div>
 
     <script type="text/javascript">
-      createMenu("editanchor", "editmenu", 1000, "left");
+      createMenu("editanchor", "editmenu", "left");
     </script>
 
     <div id="left">