Show a popup listing available editors when hovering over the edit tab
authorTom Hughes <tom@compton.nu>
Mon, 15 Nov 2010 00:44:17 +0000 (00:44 +0000)
committerTom Hughes <tom@compton.nu>
Mon, 29 Nov 2010 12:20:22 +0000 (12:20 +0000)
app/controllers/site_controller.rb
app/helpers/application_helper.rb
app/views/layouts/site.html.erb
app/views/site/index.html.erb
config/locales/en.yml
public/javascripts/menu.js [new file with mode: 0644]
public/javascripts/site.js
public/stylesheets/common.css

index e6d09f1..5e77b66 100644 (file)
@@ -32,7 +32,7 @@ class SiteController < ApplicationController
   end
 
   def edit
-    editor = @user.preferred_editor || DEFAULT_EDITOR
+    editor = params[:editor] || @user.preferred_editor || DEFAULT_EDITOR
 
     if editor == "josm"
       render :action => :index
index ca26cfd..c24e7ff 100644 (file)
@@ -120,7 +120,9 @@ module ApplicationHelper
   end
 
   def preferred_editor
-    if @user and @user.preferred_editor
+    if params[:editor]
+      params[:editor]
+    elsif @user and @user.preferred_editor
       @user.preferred_editor
     else
       DEFAULT_EDITOR
index b514fef..f10b089 100644 (file)
@@ -5,6 +5,7 @@
     <%= javascript_strings %>
     <%= javascript_include_tag 'prototype' %>
     <%= javascript_include_tag 'site' %>
+    <%= javascript_include_tag 'menu' %>
     <!--[if lt IE 7]><%= javascript_include_tag 'pngfix' %><![endif]--> <!-- thanks, microsoft! -->
     <%= stylesheet_link_tag 'common' %>
     <!--[if IE]><%= stylesheet_link_tag 'large', :media => "screen" %><![endif]--> <!-- IE is totally broken with CSS media queries -->
       </ul>
     </div>
 
+    <div id="editmenu">
+      <ul>
+        <% Editors::ALL_EDITORS.each do |editor| %>
+          <li><%= link_to t('layouts.edit_with', :editor => t('user.account.editor.' + editor)), {:controller => 'site', :action => 'edit', :editor => editor}, {:id => editor + 'anchor'} %></li>
+        <% end %>
+      </ul>
+    </div>
+
+    <script type="text/javascript">
+      createMenu("editanchor", "editmenu", 1000);
+    </script>
+
     <div id="left">
 
       <div id="logo">
index f915846..bc7ca33 100644 (file)
@@ -279,6 +279,8 @@ end
   }
 
   function installEditHandler() {
+    $("josmanchor").onclick =josmEditHandler;
+
     <% if preferred_editor == "josm" %>
       $("editanchor").onclick =josmEditHandler;
 
index cfaa07b..2b2694a 100644 (file)
@@ -912,6 +912,7 @@ en:
     gps_traces_tooltip: Manage GPS traces
     user_diaries: User Diaries
     user_diaries_tooltip: View user diaries
+    edit_with: Edit with {{editor}}
     tag_line: The Free Wiki World Map
     intro_1: "OpenStreetMap is a free editable map of the whole world. It is made by people like you."
     intro_2: "OpenStreetMap allows you to view, edit and use geographical data in a collaborative way from anywhere on Earth."
diff --git a/public/javascripts/menu.js b/public/javascripts/menu.js
new file mode 100644 (file)
index 0000000..7a0cbf4
--- /dev/null
@@ -0,0 +1,62 @@
+/*
+ * Open a menu.
+ */
+function openMenu(anchor, menu) {
+  menu.style.display = "block";
+
+  menu.clonePosition(anchor, {
+    setLeft: true, setTop: true, setWidth: false, setHeight: false,
+    offsetLeft: 0, offsetTop: anchor.getHeight()
+  });
+}
+
+/*
+ * Callback called when the mouse enters a menu anchor.
+ */
+function enterMenuAnchor(event, anchor, menu, delay) {
+  clearTimeout(menu.timer);
+
+  if (delay > 0) {
+    menu.timer = setTimeout(function () { openMenu(anchor, menu) }, delay);
+  } else {
+    openMenu(event, menu);
+  }
+}
+
+/*
+ * Callback called when the mouse leaves a menu anchor.
+ */
+function leaveMenuAnchor(event, anchor, menu) {
+  var to = event.relatedTarget || event.toElement;
+
+  if (to != menu && !to.descendantOf(menu)) {
+    menu.style.display = "none";
+  }
+
+  clearTimeout(menu.timer);
+}
+
+/*
+ * Callback called when the mouse leaves a menu.
+ */
+function leaveMenu(event, anchor, menu) {
+  var to = event.relatedTarget || event.toElement;
+
+  if (to != anchor && !to.descendantOf(menu)) {
+    menu.style.display = "none";
+  }
+
+  clearTimeout(menu.timer);
+}
+
+/*
+ * Setup a menu, triggered by hovering over an anchor for a given time.
+ */
+function createMenu(anchorid, menuid, delay) {
+  var anchor = $(anchorid);
+  var menu = $(menuid);
+
+  anchor.onmouseover = function (event) { enterMenuAnchor(anchor, anchor, menu, delay) };
+  anchor.onmouseout = function (event) { leaveMenuAnchor(event, anchor, menu) };
+  menu.onmouseout = function (event) { leaveMenu(event, anchor, menu) };
+}
index 0e2c5ae..b11a2e0 100644 (file)
@@ -1,4 +1,3 @@
-
 /*
  * Called as the user scrolls/zooms around to aniplate hrefs of the
  * view tab and various other links
@@ -69,15 +68,54 @@ function updatelinks(lon,lat,zoom,layers,minlon,minlat,maxlon,maxlat,objtype,obj
     }
   }
 
+  node = $("potlatchanchor");
+  if (node) {
+    var args = new Object();
+    args.editor = "potlatch";
+    args.lat = lat;
+    args.lon = lon;
+    args.zoom = zoom;
+    if (objtype && objid) {
+      args[objtype] = objid;
+    }
+    node.href = setArgs("/edit", args);
+  }
+
+  node = $("potlatch2anchor");
+  if (node) {
+    var args = new Object();
+    args.editor = "potlatch2";
+    args.lat = lat;
+    args.lon = lon;
+    args.zoom = zoom;
+    if (objtype && objid) {
+      args[objtype] = objid;
+    }
+    node.href = setArgs("/edit", args);
+  }
+
+  node = $("josmanchor");
+  if (node) {
+    var args = new Object();
+    args.editor = "josm";
+    args.lat = lat;
+    args.lon = lon;
+    args.zoom = zoom;
+    if (objtype && objid) {
+      args[objtype] = objid;
+    }
+    node.href = setArgs("/edit", args);
+  }
+
   node = $("historyanchor");
   if (node) {
     if (zoom >= 11) {
       var args = new Object();
       //set bbox param from 'extents' object
       if (typeof minlon == "number" &&
-         typeof minlat == "number" &&
-         typeof maxlon == "number" &&
-         typeof maxlat == "number") {
+          typeof minlat == "number" &&
+          typeof maxlon == "number" &&
+          typeof maxlat == "number") {
 
         minlon = Math.round(minlon * decimals) / decimals;
         minlat = Math.round(minlat * decimals) / decimals;
@@ -225,24 +263,24 @@ function makeShortCode(lat, lon, zoom) {
     // z18 so we don't need to care for now.
     var c1 = 0, c2 = 0;
     for (var i = 31; i > 16; --i) {
-       c1 = (c1 << 1) | ((x >> i) & 1);
-       c1 = (c1 << 1) | ((y >> i) & 1);
+        c1 = (c1 << 1) | ((x >> i) & 1);
+        c1 = (c1 << 1) | ((y >> i) & 1);
     }
     for (var i = 16; i > 1; --i) {
-       c2 = (c2 << 1) | ((x >> i) & 1);
-       c2 = (c2 << 1) | ((y >> i) & 1);
+        c2 = (c2 << 1) | ((x >> i) & 1);
+        c2 = (c2 << 1) | ((y >> i) & 1);
     }
     var str = "";
     for (var i = 0; i < Math.ceil((zoom + 8) / 3.0) && i < 5; ++i) {
-       digit = (c1 >> (24 - 6 * i)) & 0x3f;
-       str += char_array.charAt(digit);
+        digit = (c1 >> (24 - 6 * i)) & 0x3f;
+        str += char_array.charAt(digit);
     }
     for (var i = 5; i < Math.ceil((zoom + 8) / 3.0); ++i) {
-       digit = (c2 >> (24 - 6 * (i - 5))) & 0x3f;
-       str += char_array.charAt(digit);
+        digit = (c2 >> (24 - 6 * (i - 5))) & 0x3f;
+        str += char_array.charAt(digit);
     }
     for (var i = 0; i < ((zoom + 8) % 3); ++i) {
-       str += "-";
+        str += "-";
     }
     return str;
 }
index 42f2861..9535caa 100644 (file)
@@ -344,6 +344,27 @@ hr {
   text-align: right;
 }
 
+/* Rules for edit menu */
+
+#editmenu {
+  display: none;
+  z-index: 10000;
+  position: absolute;
+  background-color: #ffffff;
+  border: 1px solid black;
+}
+
+#editmenu ul {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+#editmenu li {
+  list-style-type: none;
+}
+
 /* Rules for attribution text under the main map shown on printouts */
 
 #attribution {