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

(re #5169)

css/80_app.css

@@ -1165,6 +1165,7 @@ img.tag-reference-wiki-image {
     margin: 0 5px;
 }
 
+.data-editor .quick-links,
 .note-editor .quick-links {
     padding: 5px 0 0 0;
 }

modules/modes/select_data.js

@@ -12,6 +12,8 @@ import {
     behaviorSelect
 } from '../behavior';
 
+import { t } from '../util/locale';
+
 import { geoExtent } from '../geo';
 import { modeBrowse, modeDragNode, modeDragNote } from '../modes';
 import { uiDataEditor } from '../ui';
@@ -60,9 +62,18 @@ export function modeSelectData(context, selectedDatum) {
     }
 
 
+    mode.zoomToSelected = function() {
+        var extent = geoExtent(d3_geoBounds(selectedDatum));
+        context.map().centerZoom(extent.center(), context.map().trimmedExtentZoom(extent));
+    };
+
+
     mode.enter = function() {
         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/modes/select_note.js

@@ -107,6 +107,7 @@ export function modeSelectNote(context, selectedNoteID) {
         if (!note) return;
 
         behaviors.forEach(context.install);
+
         keybinding
             .on(t('inspector.zoom_to.key'), mode.zoomToSelected)
             .on('⎋', esc, true);

modules/ui/data_editor.js

@@ -4,17 +4,33 @@ import { svgIcon } from '../svg';
 
 import {
     uiDataHeader,
-    uiRawTagEditor
+    uiQuickLinks,
+    uiRawTagEditor,
+    uiTooltipHtml
 } from './index';
 
 
 export function uiDataEditor(context) {
     var dataHeader = uiDataHeader();
+    var quickLinks = uiQuickLinks();
     var rawTagEditor = uiRawTagEditor(context);
     var _datum;
 
 
     function dataEditor(selection) {
+        // quick links
+        var choices = [{
+            id: 'zoom_to',
+            label: 'inspector.zoom_to.title',
+            tooltip: function() {
+                return uiTooltipHtml(t('inspector.zoom_to.tooltip_data'), t('inspector.zoom_to.key'));
+            },
+            click: function zoomTo() {
+                context.mode().zoomToSelected();
+            }
+        }];
+
+
         var header = selection.selectAll('.header')
             .data([0]);
 
@@ -50,7 +66,8 @@ export function uiDataEditor(context) {
             .append('div')
             .attr('class', 'modal-section data-editor')
             .merge(editor)
-            .call(dataHeader.datum(_datum));
+            .call(dataHeader.datum(_datum))
+            .call(quickLinks.choices(choices));
 
         var rte = body.selectAll('.raw-tag-editor')
             .data([0]);