From 3440b5523c857e2c71be7c7829283530fe4274c7 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Wed, 6 Dec 2017 01:19:02 -0500 Subject: [PATCH] =?UTF-8?q?Use=20=E2=8C=98F=20to=20focus=20the=20feature?= =?UTF-8?q?=20search=20box=20(closes=20#4545)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data/core.yaml | 1 + data/shortcuts.json | 5 ++- dist/locales/en.json | 3 +- modules/ui/feature_list.js | 80 +++++++++++++++++++++++++++----------- 4 files changed, 63 insertions(+), 26 deletions(-) diff --git a/data/core.yaml b/data/core.yaml index a0842b3ee..851e7dd1f 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -996,6 +996,7 @@ en: select_one: "Select a single feature" select_multi: "Select multiple features" lasso: "Draw a selection lasso around features" + search: "Find features matching search text" with_selected: title: "With feature selected" edit_menu: "Toggle edit menu" diff --git a/data/shortcuts.json b/data/shortcuts.json index e1871dac3..2b562181c 100644 --- a/data/shortcuts.json +++ b/data/shortcuts.json @@ -82,8 +82,9 @@ "gesture": "shortcuts.gesture.drag", "text": "shortcuts.browsing.selecting.lasso" }, { - "shortcuts": [], - "text": "" + "modifiers": ["⌘"], + "shortcuts": ["F"], + "text": "shortcuts.browsing.selecting.search" }, { diff --git a/dist/locales/en.json b/dist/locales/en.json index 29d3b87e6..cf8eb15ba 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -1150,7 +1150,8 @@ "title": "Selecting features", "select_one": "Select a single feature", "select_multi": "Select multiple features", - "lasso": "Draw a selection lasso around features" + "lasso": "Draw a selection lasso around features", + "search": "Find features matching search text" }, "with_selected": { "title": "With feature selected", diff --git a/modules/ui/feature_list.js b/modules/ui/feature_list.js index 378e2f9e3..d5ed9330b 100644 --- a/modules/ui/feature_list.js +++ b/modules/ui/feature_list.js @@ -3,24 +3,28 @@ import { select as d3_select } from 'd3-selection'; +import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js'; + import * as sexagesimal from '@mapbox/sexagesimal'; import { t } from '../util/locale'; -import { geoExtent, geoChooseEdge } from '../geo/index'; -import { modeSelect } from '../modes/index'; -import { osmEntity } from '../osm/index'; -import { svgIcon } from '../svg/index'; -import { services } from '../services/index'; +import { geoExtent, geoChooseEdge } from '../geo'; +import { modeSelect } from '../modes'; +import { osmEntity } from '../osm'; +import { svgIcon } from '../svg'; +import { services } from '../services'; +import { uiCmd } from './cmd'; import { utilDisplayName, utilDisplayType, utilEntityOrMemberSelector, utilNoAuto -} from '../util/index'; +} from '../util'; export function uiFeatureList(context) { - var geocodeResults; + var keybinding = d3_keybinding('feature-list'); + var _geocodeResults; function featureList(selection) { @@ -28,7 +32,8 @@ export function uiFeatureList(context) { .append('div') .attr('class', 'header fillL cf'); - header.append('h3') + header + .append('h3') .text(t('inspector.feature_list')); var searchWrap = selection @@ -41,6 +46,7 @@ export function uiFeatureList(context) { .attr('type', 'search') .call(utilNoAuto) .on('keypress', keypress) + .on('keydown', keydown) .on('input', inputevent); searchWrap @@ -59,18 +65,40 @@ export function uiFeatureList(context) { context.map() .on('drawn.feature-list', mapDrawn); + keybinding + .on(uiCmd('⌘F'), focusSearch); + + d3_select(document) + .call(keybinding); + + + function focusSearch() { + var mode = context.mode() && context.mode().id; + if (mode !== 'browse') return; + + d3_event.preventDefault(); + search.node().focus(); + } + + + function keydown() { + if (d3_event.keyCode === 27) { // escape + search.node().blur(); + } + } + function keypress() { var q = search.property('value'), items = list.selectAll('.feature-list-item'); - if (d3_event.keyCode === 13 && q.length && items.size()) { + if (d3_event.keyCode === 13 && q.length && items.size()) { // return click(items.datum()); } } function inputevent() { - geocodeResults = undefined; + _geocodeResults = undefined; drawList(); } @@ -149,7 +177,7 @@ export function uiFeatureList(context) { addEntity(visible[i].__data__); } - (geocodeResults || []).forEach(function(d) { + (_geocodeResults || []).forEach(function(d) { // https://github.com/openstreetmap/iD/issues/1890 if (d.osm_type && d.osm_id) { result.push({ @@ -175,11 +203,12 @@ export function uiFeatureList(context) { list.classed('filtered', value.length); - var noResultsWorldwide = geocodeResults && geocodeResults.length === 0; + var noResultsWorldwide = _geocodeResults && _geocodeResults.length === 0; var resultsIndicator = list.selectAll('.no-results-item') .data([0]) - .enter().append('button') + .enter() + .append('button') .property('disabled', true) .attr('class', 'no-results-item') .call(svgIcon('#icon-alert', 'pre-text')); @@ -193,7 +222,8 @@ export function uiFeatureList(context) { if (services.geocoder) { list.selectAll('.geocode-item') .data([0]) - .enter().append('button') + .enter() + .append('button') .attr('class', 'geocode-item') .on('click', geocoderSearch) .append('div') @@ -207,7 +237,7 @@ export function uiFeatureList(context) { .style('display', (value.length && !results.length) ? 'block' : 'none'); list.selectAll('.geocode-item') - .style('display', (value && geocodeResults === undefined) ? 'block' : 'none'); + .style('display', (value && _geocodeResults === undefined) ? 'block' : 'none'); list.selectAll('.feature-list-item') .data([-1]) @@ -227,20 +257,24 @@ export function uiFeatureList(context) { .append('div') .attr('class', 'label'); - label.each(function(d) { - d3_select(this) - .call(svgIcon('#icon-' + d.geometry, 'pre-text')); - }); + label + .each(function(d) { + d3_select(this) + .call(svgIcon('#icon-' + d.geometry, 'pre-text')); + }); - label.append('span') + label + .append('span') .attr('class', 'entity-type') .text(function(d) { return d.type; }); - label.append('span') + label + .append('span') .attr('class', 'entity-name') .text(function(d) { return d.name; }); - enter.style('opacity', 0) + enter + .style('opacity', 0) .transition() .style('opacity', 1); @@ -287,7 +321,7 @@ export function uiFeatureList(context) { function geocoderSearch() { services.geocoder.search(search.property('value'), function (err, resp) { - geocodeResults = resp || []; + _geocodeResults = resp || []; drawList(); }); }