diff --git a/css/80_app.css b/css/80_app.css index 1f2f0259d..06066938f 100644 --- a/css/80_app.css +++ b/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; } diff --git a/modules/modes/select_data.js b/modules/modes/select_data.js index ad257b8e6..744800654 100644 --- a/modules/modes/select_data.js +++ b/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); diff --git a/modules/modes/select_note.js b/modules/modes/select_note.js index 0ef32c58b..099d97a15 100644 --- a/modules/modes/select_note.js +++ b/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); diff --git a/modules/ui/data_editor.js b/modules/ui/data_editor.js index fda6bebd8..59d25bb3f 100644 --- a/modules/ui/data_editor.js +++ b/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]);