Convert edit menus to bootstrap dropdown
authorJohn Firebaugh <john.firebaugh@gmail.com>
Wed, 14 Aug 2013 17:58:57 +0000 (10:58 -0700)
committerJohn Firebaugh <john.firebaugh@gmail.com>
Thu, 22 Aug 2013 00:20:04 +0000 (17:20 -0700)
app/assets/javascripts/application.js
app/assets/javascripts/browse.js
app/assets/javascripts/menu.js [deleted file]
app/assets/stylesheets/common.css.scss
app/assets/stylesheets/print.css
app/views/browse/_map.html.erb
app/views/layouts/_edit_menu.html.erb [new file with mode: 0644]
app/views/layouts/site.html.erb
config/locales/en.yml

index 564089f3a128eb423ad009d918e53602f5069187..2b8bc5d26cb0d1ddf12db5ce5849eeaed11e1832 100644 (file)
@@ -17,7 +17,6 @@
 //= require oauth
 //= require piwik
 //= require map
-//= require menu
 //= require sidebar
 //= require richtext
 //= require geocoder
@@ -96,26 +95,25 @@ function updatelinks(loc, zoom, layers, bounds, object) {
     }
 
     link.href = href;
-
-    var minzoom = $(link).data("minzoom");
-    if (minzoom) {
-      var name = link.id.replace(/anchor$/, "");
-      $(link).off("click.minzoom");
-      if (zoom >= minzoom) {
-        $(link)
-          .attr("title", I18n.t("javascripts.site." + name + "_tooltip"))
-          .removeClass("disabled");
-      } else {
-        $(link)
-          .attr("title", I18n.t("javascripts.site." + name + "_disabled_tooltip"))
-          .addClass("disabled")
-          .on("click.minzoom", function () {
-            alert(I18n.t("javascripts.site." + name + "_zoom_alert"));
-            return false;
-          });
-      }
-    }
   });
+
+  var editDisabled = zoom < 13;
+  $('#edit_tab')
+    .tooltip({placement: 'bottom'})
+    .off('click.minzoom')
+    .on('click.minzoom', function() { return !editDisabled; })
+    .toggleClass('disabled', editDisabled)
+    .attr('data-original-title', editDisabled ?
+      I18n.t('javascripts.site.edit_disabled_tooltip') : '');
+
+  var historyDisabled = zoom < 11;
+  $('#history_tab')
+    .tooltip({placement: 'bottom'})
+    .off('click.minzoom')
+    .on('click.minzoom', function() { return !historyDisabled; })
+    .toggleClass('disabled', historyDisabled)
+    .attr('data-original-title', historyDisabled ?
+      I18n.t('javascripts.site.history_disabled_tooltip') : '');
 }
 
 // generate a cookie-safe string of map state
index 5d2412183040ddcb76621aa843bbc829ec36eaac..11818a1712c513421221455c2c3f209c488b7c01 100644 (file)
@@ -23,7 +23,7 @@ $(document).ready(function () {
     }).addTo(map);
 
     $("#loading").hide();
-    $("#browse_map .geolink").show();
+    $("#browse_map .secondary-actions").show();
 
     $("a[data-editor=remote]").click(function () {
       return remoteEditHandler(bbox);
@@ -41,7 +41,7 @@ $(document).ready(function () {
     bbox = map.getBounds();
 
     $("#loading").hide();
-    $("#browse_map .geolink").show();
+    $("#browse_map .secondary-actions").show();
 
     $("a[data-editor=remote]").click(function () {
       return remoteEditHandler(bbox);
@@ -61,7 +61,7 @@ $(document).ready(function () {
       zoom: true,
       callback: function(extent) {
         $("#loading").hide();
-        $("#browse_map .geolink").show();
+        $("#browse_map .secondary-actions").show();
 
         if (extent) {
           $("a.bbox[data-editor=remote]").click(function () {
@@ -82,7 +82,4 @@ $(document).ready(function () {
       }
     });
   }
-
-  createMenu("area_edit", "area_edit_menu", "right");
-  createMenu("object_edit", "object_edit_menu", "right");
 });
diff --git a/app/assets/javascripts/menu.js b/app/assets/javascripts/menu.js
deleted file mode 100644 (file)
index a01fc39..0000000
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Open a menu.
- */
-function openMenu(anchor, menu, align) {
-  var anchorPosition = anchor.offset();
-  var offset;
-
-  if (align == "left") {
-    offset = 0;
-  } else if (align == "right") {
-    offset = menu.outerWidth() - anchor.outerWidth();
-  }
-
-  menu.show();
-
-  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, align) {
-  var $anchor = $("#" + anchorid);
-  var $arrow = $("#" + anchorid + " .menuicon");
-  var $menu = $("#" + menuid);
-  var $page = $(":not(#" + menuid + ", #" + anchorid + ")");
-
-  function hide() {
-    $menu.hide();
-    $page.off("click", hide);
-  }
-
-  $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);
-      }
-    }
-  });
-}
index 0c2d8ed01330cde6d6db5278d2ac54a305c14bf9..6320a7d89e58c0af6241041c7a6adbd25db5cc89 100644 (file)
@@ -491,49 +491,57 @@ a.donate {
 
 #tabnav {
   height: 29px;
-  margin-bottom:0;
-  overflow: hidden;
-  li {
-    display: inline;
-  }
-  a, a:link, a:visited {
+  margin-bottom: 0;
+
+  > li {
     float: left;
+
+    > * {
+      padding: 3px $lineheight/2;
+    }
+  }
+
+  a.tab {
+    display: inline-block;
     font-weight: bold;
-    padding: 3px $lineheight/2;
     text-decoration: none;
     color: #333;
-    float: left;
-    margin-right: 1px;
+
     -webkit-transition: color 200ms ease-in;
        -moz-transition: color 200ms ease-in;
          -o-transition: color 200ms ease-in;
             transition: color 200ms ease-in;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
-}
 
-.site-index #tabnav a#viewanchor,
-.site-edit #tabnav a#editanchor,
-.changeset-list #tabnav a#historyanchor {
-  border-bottom: 1px solid #aaa;
-  background: #9ed485;
-  color: #000;
-}
+  .disabled a {
+    color: #ccc;
+    cursor: default;
 
-#tabnav a:link:hover, #tabnav a:visited:hover {
-  text-decoration: underline;
-}
+    &:hover {
+      text-decoration: none;
+    }
 
-#tabnav a:link.disabled,
-#tabnav a:visited.disabled,
-#tabnav a:link:hover.disabled,
-#tabnav a:visited:hover.disabled {
-  color: #ccc;
-  cursor: default;
-  &:hover {
-    text-decoration: none;
+    .caret {
+      border-top-color: #ccc;
+    }
+  }
+
+  .dropdown {
+    height: 29px;
   }
 }
 
+.site-index #view_tab,
+.site-edit #edit_tab,
+.changeset-list #history_tab {
+  background: #9ed485;
+  color: #000;
+}
+
 /* Utility for styling notification numbers */
 
 .count-number {
@@ -1337,11 +1345,8 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   }
 }
 
-#browse_map .geolink {
-  display: none;
-}
-
 #browse_map .secondary-actions {
+  display: none;
   margin-bottom: $lineheight/2;
 }
 
@@ -1936,7 +1941,7 @@ ul.secondary-actions {
     display: inline-block;
     margin-right: 60px;
   }
-  li {
+  li {
     display: block;
     float: left;
     list-style: none;
@@ -1951,6 +1956,10 @@ ul.secondary-actions {
       margin-right: 0px;
     }
   }
+  .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
 }
 
 /* Utility for managing inner content areas */
index a74bc27fd5e5086f943bdf625128e338eb99982f..84efa0e2e1e8c284e7abefa48928d7fb7e1c5a64 100644 (file)
@@ -4,7 +4,6 @@
 #tabnav,
 #sidebar,
 #permalink,
-#editmenu,
 .leaflet-control {
   display: none;
 }
index 9b82753fb237fe3febc990f695e51403d9282b17..ed703665d1e55e8aa8be021fca5ac4dcbdebf59d 100644 (file)
   <%= content_tag "div", "", :id => "small_map", :data => data %>
   <span id="loading"><%= t 'browse.map.loading' %></span>
 
-<ul class='secondary-actions clearfix'>
-  <li>
-    <% if map.instance_of? Note -%>
-      <%= link_to t("browse.map.larger.area"),
-                  root_path(:notes => "yes"),
-                  :id => "area_larger_map",
-                  :class => "geolink bbox" %>
-    <% else -%>
-      <%= link_to t("browse.map.larger.area"),
-                  root_path(:box => "yes"),
-                  :id => "area_larger_map",
-                  :class => "geolink bbox" %>
-    <% end -%>
-  </li>
-  <li>
-    <%= link_to h(t("browse.map.edit.area")) + content_tag(:span, "▼", :class => "menuicon"),
-                edit_path,
-                :id => "area_edit",
-                :data => { :editor => preferred_editor },
-                :class => "geolink bbox" %>
-  </li>
-</ul>
+  <ul class='secondary-actions clearfix'>
+    <li>
+      <% if map.instance_of? Note -%>
+        <%= link_to t("browse.map.larger.area"),
+                    root_path(:notes => "yes"),
+                    :id => "area_larger_map",
+                    :class => "geolink bbox" %>
+      <% else -%>
+        <%= link_to t("browse.map.larger.area"),
+                    root_path(:box => "yes"),
+                    :id => "area_larger_map",
+                    :class => "geolink bbox" %>
+      <% end -%>
+    </li>
+    <li>
+      <%= render :partial => 'layouts/edit_menu',
+                 :locals => { :link_text => t("browse.map.edit.area"),
+                              :link_class => 'bbox' } %>
+    </li>
+  </ul>
 
   <% unless map.instance_of? Changeset %>
   <ul class='secondary-actions clearfix'>
                   :class => "geolink object" %>
     </li>
     <li>
-      <%= link_to h(t("browse.map.edit." + map.class.to_s.downcase)) + content_tag(:span, "▼", :class => "menuicon"),
-                  edit_path,
-                  :id => "object_edit",
-                  :data => { :editor => preferred_editor },
-                  :class => "geolink object" %>
+      <%= render :partial => 'layouts/edit_menu',
+                 :locals => { :link_text => t("browse.map.edit." + map.class.to_s.downcase),
+                              :link_class => 'object' } %>
     </li>
   </ul>
   <% end %>
     <%= t 'browse.map.deleted' %>
   <% end %>
 </div>
-
-<div id="area_edit_menu" class="menu">
-  <ul>
-    <% Editors::RECOMMENDED_EDITORS.each do |editor| %>
-      <li><%= link_to t('layouts.edit_with', :editor => t("editor.#{editor}.description")),
-                      edit_path(:editor => editor),
-                      :data => {:editor => editor},
-                      :class => "geolink bbox" %></li>
-    <% end %>
-  </ul>
-</div>
-
-<div id="object_edit_menu" class="menu">
-  <ul>
-    <% Editors::RECOMMENDED_EDITORS.each do |editor| %>
-      <li><%= link_to t('layouts.edit_with', :editor => t("editor.#{editor}.description")),
-                      edit_path(:editor => editor),
-                      :data => {:editor => editor},
-                      :class => "geolink object" %></li>
-    <% end %>
-  </ul>
-</div>
diff --git a/app/views/layouts/_edit_menu.html.erb b/app/views/layouts/_edit_menu.html.erb
new file mode 100644 (file)
index 0000000..2376373
--- /dev/null
@@ -0,0 +1,18 @@
+<div class="dropdown edit_menu">
+  <%= link_to link_text, edit_path,
+              :id => 'editanchor',
+              :class => "geolink tab #{link_class}" %>
+  <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
+    <b class="caret"></b>
+  </a>
+  <ul class='dropdown-menu' role='menu' aria-labelledby='dLabel'>
+    <% Editors::RECOMMENDED_EDITORS.each do |editor| %>
+      <li>
+        <%= link_to t('layouts.edit_with', :editor => t("editor.#{editor}.description")),
+                    edit_path(:editor => editor),
+                    :data => { :editor => editor },
+                    :class => "geolink #{link_class}" %>
+      </li>
+    <% end %>
+  </ul>
+</div>
index 512b95905bac4b8e174fd001ec9adb720199a54c..a89db50787d8f6a7aef22df58297cfd7aa3bc803 100644 (file)
         </ul>
       <% end %>
       <ul id="tabnav">
-        <li><%= link_to t('layouts.view'), root_path, {
-          :id => 'viewanchor',
-          :title => t('layouts.view_tooltip'),
-          :class => 'geolink llz layers'
-        } %></li>
-        <li><%= link_to h(t('layouts.edit')) + content_tag(:span, "▼", :class => "menuicon"), edit_path, {
-          :id => 'editanchor',
-          :title => t('javascripts.site.edit_tooltip'),
-          :data => { :minzoom => 13, :editor => preferred_editor },
-          :class => 'geolink llz object disabled'
-        } %></li>
-        <li><%= link_to t('layouts.history'), browse_changesets_path, {
-          :id => 'historyanchor',
-          :data => { :minzoom => 11 },
-          :title => t('javascripts.site.history_tooltip'),
-          :class => 'geolink bbox'
-        } %></li>
-      </ul>
-    </div>
-    <div id="editmenu" class="menu">
-      <ul>
-        <% Editors::RECOMMENDED_EDITORS.each do |editor| %>
-          <li><%= link_to t('layouts.edit_with',
-            :editor => t("editor.#{editor}.description")),
-            edit_path(:editor => editor), {
-            :data => { :editor => editor },
-            :class => "geolink llz object"
-          } %></li>
-        <% end %>
-        <%= yield :editmenu %>
+        <li id="view_tab">
+          <%= link_to t('layouts.view'), root_path, :class => 'tab geolink llz layers' %>
+        </li><li id="edit_tab">
+          <%= render :partial => 'layouts/edit_menu',
+                     :locals => { :link_text => t('layouts.edit'), :link_class => 'llz object' }%>
+        </li><li id="history_tab">
+          <%= link_to t('layouts.history'), browse_changesets_path, :class => 'tab geolink bbox' %>
+        </li>
       </ul>
     </div>
-    <script type="text/javascript">
-      createMenu("editanchor", "editmenu", "left");
-    </script>
     <div class="wrapper">
       <%= render :partial => "layouts/flash", :locals => { :flash => flash } %>
       <% if content_for? :heading %>
index d5c59a8fe3cee171413111570c468cbc52a41300..cd83a3a8518567d7f5f6fc8d379493af571f7998 100644 (file)
@@ -2133,13 +2133,10 @@ en:
     site:
       edit_tooltip: Edit the map
       edit_disabled_tooltip: Zoom in to edit the map
-      edit_zoom_alert: You must zoom in to edit the map
       history_tooltip: View edits for this area
       history_disabled_tooltip: Zoom in to view edits for this area
-      history_zoom_alert: You must zoom in to view edits for this area
       createnote_tooltip: Add a note to the map
       createnote_disabled_tooltip: Zoom in to add a note to the map
-      createnote_zoom_alert: You must zoom in to add a note to the map
     notes:
       new:
         intro: "In order to improve the map the information you enter is shown to other mappers, so please be as descriptive and precise as possible when moving the marker to the correct position and entering your note below."