Add "zoom to this" quicklink and keybind for note editor

(closes #5169)

css/80_app.css

@@ -1165,6 +1165,10 @@ img.tag-reference-wiki-image {
     margin: 0 5px;
 }
 
+.note-editor .quick-links {
+    padding: 5px 0 0 0;
+}
+
 
 /* Entity/Preset Editor
 ------------------------------------------------------- */

dist/locales/en.json

@@ -1683,7 +1683,7 @@
                 "with_selected": {
                     "title": "With feature selected",
                     "edit_menu": "Toggle edit menu",
-                    "zoom_to": "Zoom in on selected feature"
+                    "zoom_to": "Zoom to selected feature"
                 },
                 "vertex_selected": {
                     "title": "With node selected",

modules/modes/select_note.js

@@ -10,6 +10,8 @@ import {
     behaviorSelect
 } from '../behavior';
 
+import { t } from '../util/locale';
+
 import { modeBrowse, modeDragNode, modeDragNote } from '../modes';
 import { services } from '../services';
 import { uiNoteEditor } from '../ui';
@@ -84,9 +86,18 @@ export function modeSelectNote(context, selectedNoteID) {
     }
 
 
-    mode.newFeature = function(_) {
+    mode.zoomToSelected = function() {
+        if (!osm) return;
+        var note = osm.getNote(selectedNoteID);
+        if (note) {
+            context.map().centerZoom(note.loc, 20);
+        }
+    };
+
+
+    mode.newFeature = function(val) {
         if (!arguments.length) return newFeature;
-        newFeature = _;
+        newFeature = val;
         return mode;
     };
 
@@ -96,7 +107,9 @@ export function modeSelectNote(context, selectedNoteID) {
         if (!note) return;
 
         behaviors.forEach(context.install);
-        keybinding.on('⎋', esc, true);
+        keybinding
+            .on(t('inspector.zoom_to.key'), mode.zoomToSelected)
+            .on('⎋', esc, true);
 
         d3_select(document)
             .call(keybinding);

modules/ui/entity_editor.js

@@ -174,11 +174,6 @@ export function uiEntityEditor(context) {
             },
             click: function zoomTo() {
                 context.mode().zoomToSelected();
-                // d3_event.preventDefault();
-                // var entity = context.hasEntity(_entityID);
-                // if (entity) {
-                //     context.map().zoomTo(entity)
-                // }
             }
         }];
 

modules/ui/note_editor.js

@@ -16,6 +16,8 @@ import {
     uiNoteComments,
     uiNoteHeader,
     uiNoteReport,
+    uiQuickLinks,
+    uiTooltipHtml,
     uiViewOnOSM,
 } from './index';
 
@@ -27,6 +29,7 @@ import {
 
 export function uiNoteEditor(context) {
     var dispatch = d3_dispatch('change');
+    var quickLinks = uiQuickLinks();
     var noteComments = uiNoteComments();
     var noteHeader = uiNoteHeader();
 
@@ -37,6 +40,19 @@ export function uiNoteEditor(context) {
 
 
     function noteEditor(selection) {
+        // quick links
+        var choices = [{
+            id: 'zoom_to',
+            label: 'inspector.zoom_to.title',
+            tooltip: function() {
+                return uiTooltipHtml(t('inspector.zoom_to.tooltip_note'), t('inspector.zoom_to.key'));
+            },
+            click: function zoomTo() {
+                context.mode().zoomToSelected();
+            }
+        }];
+
+
         var header = selection.selectAll('.header')
             .data([0]);
 
@@ -73,6 +89,7 @@ export function uiNoteEditor(context) {
             .attr('class', 'modal-section note-editor')
             .merge(editor)
             .call(noteHeader.note(_note))
+            .call(quickLinks.choices(choices))
             .call(noteComments.note(_note))
             .call(noteSaveSection);