Use ⌘F to focus the feature search box

(closes #4545)

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"

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"
                     },
 
                     {

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",

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();
             });
         }