Extract iD.ui.Zoom, add tooltips with key hint

index.html

@@ -82,6 +82,7 @@
         <script src='js/id/ui/source_switch.js'></script>
         <script src='js/id/ui/toggle.js'></script>
         <script src='js/id/ui/undo_redo.js'></script>
+        <script src='js/id/ui/zoom.js'></script>
 
         <script src='js/id/actions.js'></script>
         <script src="js/id/actions/add_midpoint.js"></script>

js/id/id.js

@@ -85,6 +85,8 @@ window.iD = function () {
     context.projection = map.projection;
     context.tail = map.tail;
     context.redraw = map.redraw;
+    context.zoomIn = map.zoomIn;
+    context.zoomOut = map.zoomOut;
 
     context.container = function(_) {
         if (!arguments.length) return container;

js/id/ui.js

@@ -37,20 +37,9 @@ iD.ui = function(context) {
             .attr('class', 'button-wrap col1')
             .call(iD.ui.Save(context));
 
-        var zoom = container.append('div')
+        container.append('div')
             .attr('class', 'zoombuttons map-control')
-            .selectAll('button')
-                .data([['zoom-in', '+', map.zoomIn, t('zoom-in')], ['zoom-out', '-', map.zoomOut, t('zoom-out')]])
-                .enter()
-                .append('button')
-                .attr('tabindex', -1)
-                .attr('class', function(d) { return d[0]; })
-                .attr('title', function(d) { return d[3]; })
-                .on('click.editor', function(d) { return d[2](); })
-                .append('span')
-                    .attr('class', function(d) {
-                        return d[0] + ' icon';
-                    });
+            .call(iD.ui.Zoom(context));
 
         if (navigator.geolocation) {
             container.append('div')
@@ -139,11 +128,7 @@ iD.ui = function(context) {
             .on('←', pan([pa, 0]))
             .on('↑', pan([0, pa]))
             .on('→', pan([-pa, 0]))
-            .on('↓', pan([0, -pa]))
-            .on('⇧=', function() { map.zoomIn(); })
-            .on('+', function() { map.zoomIn(); })
-            .on('-', function() { map.zoomOut(); })
-            .on('dash', function() { map.zoomOut(); });
+            .on('↓', pan([0, -pa]));
 
         d3.select(document)
             .call(keybinding);

js/id/ui/zoom.js

@@ -0,0 +1,40 @@
+iD.ui.Zoom = function(context) {
+    var zooms = [{
+        id: 'zoom-in',
+        title: t('zoom.in'),
+        action: context.zoomIn,
+        key: '+'
+    }, {
+        id: 'zoom-out',
+        title: t('zoom.out'),
+        action: context.zoomOut,
+        key: '-'
+    }];
+
+    return function(selection) {
+        var button = selection.selectAll('button')
+            .data(zooms)
+            .enter().append('button')
+            .attr('tabindex', -1)
+            .attr('class', function(d) { return d.id; })
+            .on('click.editor', function(d) { d.action(); })
+            .call(bootstrap.tooltip()
+                .placement('right')
+                .html(true)
+                .title(function(d) {
+                    return iD.ui.tooltipHtml(d.title, d.key);
+                }));
+
+        button.append('span')
+            .attr('class', function(d) { return d.id + ' icon'; });
+
+        var keybinding = d3.keybinding('zoom')
+            .on('+', function() { context.zoomIn(); })
+            .on('-', function() { context.zoomOut(); })
+            .on('⇧=', function() { context.zoomIn(); })
+            .on('dash', function() { context.zoomOut(); });
+
+        d3.select(document)
+            .call(keybinding);
+    }
+};

locale/da.js

@@ -149,9 +149,6 @@ locale.da = {
     just_edited: "Du har lige rettede i OpenStreetMap!",
     okay: "Ok",
 
-    "zoom-in": "Zoom ind",
-    "zoom-out": "Zoom ud",
-
     nothing_to_undo: "Nothing to undo.",
     nothing_to_redo: "Nothing to redo.",
 
@@ -197,5 +194,10 @@ locale.da = {
     source_switch: {
         live: "live",
         dev: "dev"
+    },
+
+    zoom: {
+        in: "Zoom ind",
+        out: "Zoom ud"
     }
 };

locale/de.js

@@ -145,9 +145,6 @@ locale.de = {
     just_edited: "Sie haben gerade OpenStreetMap editiert!",
     okay: "OK",
 
-    "zoom-in": "Hineinzoomen",
-    "zoom-out": "Herauszoomen",
-
     nothing_to_undo: "Nichts zum Rückgängigmachen.",
     nothing_to_redo: "Nichts zum Wiederherstellen.",
 
@@ -193,5 +190,10 @@ locale.de = {
     source_switch: {
         live: "live",
         dev: "dev"
+    },
+
+    zoom: {
+        in: "Hineinzoomen",
+        out: "Herauszoomen"
     }
 };

locale/en.js

@@ -145,9 +145,6 @@ locale.en = {
     just_edited: "You Just Edited OpenStreetMap!",
     okay: "Okay",
 
-    "zoom-in": "Zoom In",
-    "zoom-out": "Zoom Out",
-
     nothing_to_undo: "Nothing to undo.",
     nothing_to_redo: "Nothing to redo.",
 
@@ -193,5 +190,10 @@ locale.en = {
     source_switch: {
         live: "live",
         dev: "dev"
+    },
+
+    zoom: {
+        in: "Zoom In",
+        out: "Zoom Out"
     }
 };

locale/es.js

@@ -145,9 +145,6 @@ locale.es = {
     just_edited: "Acabas de editar OpenStreetMap!", //"You Just Edited OpenStreetMap!",
     okay: "OK", //"Okay",
 
-    "zoom-in": "Aumentar", // "Zoom In",
-    "zoom-out": "Alejar", //"Zoom Out",
-
     nothing_to_undo: "Nada para deshacer", //"Nothing to undo.",
     nothing_to_redo: "Nada para rehacer", //"Nothing to redo.",
 
@@ -193,5 +190,10 @@ locale.es = {
     source_switch: {
         live: "en vivo", //"live",
         dev: "dev"
+    },
+
+    zoom: {
+        in: "Aumentar", // "Zoom In",
+        out: "Alejar" //"Zoom Out",
     }
 };

locale/fr.js

@@ -145,9 +145,6 @@ locale.fr = {
     just_edited: "Vous venez de participer à OpenStreetMap!",
     okay: "Okay",
 
-    "zoom-in": "Zoomer",
-    "zoom-out": "Dézoomer",
-
     nothing_to_undo: "Rien à annuler.",
     nothing_to_redo: "Rien à refaire.",
 
@@ -193,5 +190,10 @@ locale.fr = {
     source_switch: {
         live: "live",
         dev: "dev"
+    },
+
+    zoom: {
+        in: "Zoomer",
+        out: "Dézoomer"
     }
 };

locale/ja.js

@@ -145,9 +145,6 @@ locale.ja = {
     just_edited: "OpenStreetMap編集完了！",
     okay: "OK",
 
-    "zoom-in": "ズームイン",
-    "zoom-out": "ズームアウト",
-
     nothing_to_undo: "やり直す変更点がありません",
     nothing_to_redo: "やり直した変更点がありません",
 
@@ -193,5 +190,10 @@ locale.ja = {
     source_switch: {
         live: "本番サーバ",
         dev: "開発サーバ"
+    },
+
+    zoom: {
+        in: "ズームイン",
+        out: "ズームアウト"
     }
 };

locale/lv.js

@@ -145,9 +145,6 @@ locale.lv = {
     just_edited: "Jūs nupat rediģējāt OpenStreetMap",
     okay: "Labi",
 
-    "zoom-in": "Pietuvināt",
-    "zoom-out": "Attālināt",
-
     nothing_to_undo: "Nav nekā, ko atcelt",
     nothing_to_redo: "Nav nekā, ko atsaukt",
 
@@ -193,5 +190,10 @@ locale.lv = {
     source_switch: {
         live: "live",
         dev: "dev"
+    },
+
+    zoom: {
+        in: "Pietuvināt",
+        out: "Attālināt"
     }
 };

locale/tr.js

@@ -145,9 +145,6 @@ locale.tr = {
     just_edited: "Şu an OpenStreetMap'de bir değişiklik yaptınız!",
     okay: "Tamam",
 
-    "zoom-in": "Yaklaş",
-    "zoom-out": "Uzaklaş",
-
     nothing_to_undo: "Geri alınacak birşey yok.",
     nothing_to_redo: "Tekrar yapılacak birşey yok.",
 
@@ -193,5 +190,10 @@ locale.tr = {
     source_switch: {
         live: "canlı",
         dev: "geliştirme"
+    },
+
+    zoom: {
+        in: "Yaklaş",
+        out: "Uzaklaş"
     }
 };