Move lib/d3.combobox.js -> ui/combobox.js

As with other things from this lib/ folder, little original code remains
and turning these things into reusable d3 plugins is not a priority.

modules/ui/changeset_editor.js

@@ -1,12 +1,10 @@
 import _uniqBy from 'lodash-es/uniqBy';
 
 import { dispatch as d3_dispatch } from 'd3-dispatch';
-import { d3combobox as d3_combobox } from '../lib/d3.combobox.js';
 
 import { t } from '../util/locale';
 import { svgIcon } from '../svg';
-import { uiField } from './field';
-import { uiFormFields } from './form_fields';
+import { uiCombobox, uiField, uiFormFields } from './index';
 import { utilRebind, utilTriggerEvent } from '../util';
 
 
@@ -80,7 +78,7 @@ export function uiChangesetEditor(context) {
                     });
 
                     commentField
-                        .call(d3_combobox()
+                        .call(uiCombobox()
                             .container(context.container())
                             .caseSensitive(true)
                             .data(_uniqBy(comments, 'title'))

modules/ui/combobox.js

@@ -0,0 +1,365 @@
+import {
+    dispatch as d3_dispatch
+} from 'd3-dispatch';
+
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
+import { utilRebind, utilTriggerEvent } from '../util';
+
+
+// This code assumes that the combobox values will not have duplicate entries.
+// It is keyed on the `value` of the entry.
+// Data should be an array of objects like:
+//   [{
+//       title:  'hover text',
+//       value:  'display text'
+//   }, ...]
+
+export function uiCombobox() {
+    var dispatch = d3_dispatch('accept');
+    var _container = d3_select(document.body);
+    var _suggestions = [];
+    var _choice = '';
+    var _canAutocomplete = true;
+    var _caseSensitive = false;
+    var _values = [];
+    var _minItems = 2;
+
+    var _fetcher = function(val, cb) {
+        cb(_values.filter(function(d) {
+            return d.value
+                .toString()
+                .toLowerCase()
+                .indexOf(val.toLowerCase()) !== -1;
+        }));
+    };
+
+    var combobox = function(input, attachTo) {
+        var combo = _container.selectAll('.combobox');
+
+        input
+            .classed('combobox-input', true)
+            .on('focus.typeahead', focus)
+            .on('blur.typeahead', blur)
+            .on('keydown.typeahead', keydown)
+            .on('keyup.typeahead', keyup)
+            .on('input.typeahead', change)
+            .each(function() {
+                var parent = this.parentNode;
+                var sibling = this.nextSibling;
+
+                var caret = d3_select(parent).selectAll('.combobox-caret')
+                    .filter(function(d) { return d === input.node(); })
+                    .data([input.node()]);
+
+                caret = caret.enter()
+                    .insert('div', function() { return sibling; })
+                    .attr('class', 'combobox-caret')
+                    .merge(caret);
+
+                caret
+                    .on('mousedown', function () {
+                        // prevent the form element from blurring. it blurs on mousedown
+                        d3_event.stopPropagation();
+                        d3_event.preventDefault();
+                        var combo = _container.selectAll('.combobox');
+                        if (combo.empty()) {
+                            input.node().focus();
+                            fetch('', render);
+                        } else {
+                            hide();
+                        }
+                    });
+            });
+
+        function focus() {
+            fetch(value(), render);
+        }
+
+        function blur() {
+            window.setTimeout(hide, 150);
+        }
+
+        function show() {
+            hide();   // remove any existing
+
+            _container
+                .insert('div', ':first-child')
+                .datum(input.node())
+                .attr('class', 'combobox')
+                .style('position', 'absolute')
+                .style('display', 'block')
+                .style('left', '0px')
+                .on('mousedown', function () {
+                    // prevent moving focus out of the text field
+                    d3_event.preventDefault();
+                });
+
+            d3_select('body')
+                .on('scroll.combobox', render, true);
+        }
+
+        function hide() {
+            var combo = _container.selectAll('.combobox');
+            if (combo.empty()) return;
+
+            _choice = '';
+            combo.remove();
+
+            d3_select('body')
+                .on('scroll.combobox', null);
+        }
+
+        function keydown() {
+            var shown = !_container.selectAll('.combobox').empty();
+            var tagName = input.node() ? input.node().tagName.toLowerCase() : '';
+
+            switch (d3_event.keyCode) {
+                case 8:   // ⌫ Backspace
+                case 46:  // ⌦ Delete
+                    _choice = '';
+                    render();
+                    input.on('input.typeahead', function() {
+                        var start = input.property('selectionStart');
+                        input.node().setSelectionRange(start, start);
+                        input.on('input.typeahead', change);
+                    });
+                    break;
+
+                case 9:   // ⇥ Tab
+                    _container.selectAll('.combobox-option.selected').each(function (d) {
+                        dispatch.call('accept', this, d);
+                    });
+                    hide();
+                    break;
+
+                case 13:  // ↩ Return
+                    d3_event.preventDefault();
+                    break;
+
+                case 38:  // ↑ Up arrow
+                    if (tagName === 'textarea' && !shown) return;
+                    d3_event.preventDefault();
+                    nav(-1);
+                    break;
+
+                case 40:  // ↓ Down arrow
+                    if (tagName === 'textarea' && !shown) return;
+                    d3_event.preventDefault();
+                    if (tagName === 'input' && !shown) {
+                        show();
+                    }
+                    nav(+1);
+                    break;
+            }
+            d3_event.stopPropagation();
+        }
+
+        function keyup() {
+            switch (d3_event.keyCode) {
+                case 27:  // ⎋ Escape
+                    hide();
+                    break;
+
+                case 13:  // ↩ Return
+                    _container.selectAll('.combobox-option.selected').each(function (d) {
+                       dispatch.call('accept', this, d);
+                    });
+                    hide();
+                    break;
+            }
+        }
+
+        function change() {
+            fetch(value(), function() {
+                if (input.property('selectionEnd') === input.property('value').length) {
+                    doAutocomplete();
+                }
+                render();
+            });
+        }
+
+        function nav(dir) {
+            if (!_suggestions.length) return;
+
+            var index = -1;
+            for (var i = 0; i < _suggestions.length; i++) {
+                if (_choice !== '' && _suggestions[i].value === _choice) {
+                    index = i;
+                    break;
+                }
+            }
+
+            index = Math.max(Math.min(index + dir, _suggestions.length - 1), 0);
+            _choice = _suggestions[index].value;
+            input.property('value', _choice);
+            render();
+            ensureVisible();
+        }
+
+        function value() {
+            var value = input.property('value');
+            var start = input.property('selectionStart');
+            var end = input.property('selectionEnd');
+
+            if (start && end) {
+                value = value.substring(0, start);
+            }
+
+            return value;
+        }
+
+        function fetch(v, cb) {
+            _fetcher.call(input, v, function(results) {
+                _suggestions = results;
+                cb();
+            });
+        }
+
+        function doAutocomplete() {
+            if (!_canAutocomplete) return;
+
+            var v = _caseSensitive ? value() : value().toLowerCase();
+            _choice = '';
+            if (!v) return;
+
+            // Don't autocomplete if user is typing a number - #4935
+            if (!isNaN(parseFloat(v)) && isFinite(v)) return;
+
+            var best = -1;
+            for (var i = 0; i < _suggestions.length; i++) {
+                var suggestion = _suggestions[i].value;
+                var compare = _caseSensitive ? suggestion : suggestion.toLowerCase();
+
+                // if search string matches suggestion exactly, pick it..
+                if (compare === v) {
+                    best = i;
+                    break;
+
+                // otherwise lock in the first result that starts with the search string..
+                } else if (best === -1 && compare.indexOf(v) === 0) {
+                    best = i;
+                }
+            }
+
+            if (best !== -1) {
+                _choice = _suggestions[best].value;
+                input.property('value', _choice);
+                input.node().setSelectionRange(v.length, _choice.length);
+            }
+        }
+
+        function render() {
+            if (_suggestions.length >= _minItems &&
+                document.activeElement === input.node()) {
+                // input.attr('readonly') === null)
+                show();
+            } else {
+                hide();
+                return;
+            }
+
+            var combo = _container.selectAll('.combobox');
+            var options = combo.selectAll('.combobox-option')
+                .data(_suggestions, function(d) { return d.value; });
+
+            options.exit()
+                .remove();
+
+            // enter/update
+            options.enter()
+                .append('a')
+                .attr('class', 'combobox-option')
+                .text(function(d) { return d.value; })
+                .merge(options)
+                .attr('title', function(d) { return d.title; })
+                .classed('selected', function(d) { return d.value === _choice; })
+                .on('click', accept)
+                .order();
+
+
+            var node = attachTo ? attachTo.node() : input.node();
+            var rect = node.getBoundingClientRect();
+
+            combo
+                .style('left', (rect.left + 5) + 'px')
+                .style('width', (rect.width - 10) + 'px')
+                .style('top', rect.height + rect.top + 'px');
+        }
+
+        function ensureVisible() {
+            var node = _container.selectAll('.combobox-option.selected').node();
+            if (node) node.scrollIntoView();
+        }
+
+        function accept(d) {
+            var combo = _container.selectAll('.combobox');
+            if (combo.empty()) return;
+
+            input.property('value', d.value);
+            utilTriggerEvent(input, 'change');
+            dispatch.call('accept', this, d);
+            hide();
+        }
+    };
+
+    combobox.canAutocomplete = function(val) {
+        if (!arguments.length) return _canAutocomplete;
+        _canAutocomplete = val;
+        return combobox;
+    };
+
+    combobox.caseSensitive = function(val) {
+        if (!arguments.length) return _caseSensitive;
+        _caseSensitive = val;
+        return combobox;
+    };
+
+    combobox.container = function(val) {
+        if (!arguments.length) return _container;
+        _container = val;
+        return combobox;
+    };
+
+    combobox.data = function(val) {
+        if (!arguments.length) return _values;
+        _values = val;
+        return combobox;
+    };
+
+    combobox.fetcher = function(val) {
+        if (!arguments.length) return _fetcher;
+        _fetcher = val;
+        return combobox;
+    };
+
+    combobox.minItems = function(val) {
+        if (!arguments.length) return _minItems;
+        _minItems = val;
+        return combobox;
+    };
+
+
+    return utilRebind(combobox, dispatch, 'on');
+}
+
+
+uiCombobox.off = function(input) {
+    input
+        .on('focus.typeahead', null)
+        .on('blur.typeahead', null)
+        .on('keydown.typeahead', null)
+        .on('keyup.typeahead', null)
+        .on('input.typeahead', null)
+        .each(function() {
+            d3_select(this.parentNode).selectAll('.combobox-caret')
+                .filter(function(d) { return d === input.node(); })
+                .on('mousedown', null);
+        });
+
+    d3_select('body')
+        .on('scroll.combobox', null);
+};

modules/ui/fields/access.js

@@ -1,12 +1,8 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { select as d3_select } from 'd3-selection';
-import { d3combobox as d3_combobox } from '../../lib/d3.combobox.js';
 
-import {
-    utilGetSetValue,
-    utilNoAuto,
-    utilRebind
-} from '../../util';
+import { uiCombobox } from '../index';
+import { utilGetSetValue, utilNoAuto, utilRebind } from '../../util';
 
 
 export function uiFieldAccess(field, context) {
@@ -55,7 +51,7 @@ export function uiFieldAccess(field, context) {
             .call(utilNoAuto)
             .each(function(d) {
                 d3_select(this)
-                    .call(d3_combobox()
+                    .call(uiCombobox()
                         .container(context.container())
                         .data(access.options(d))
                     );

modules/ui/fields/address.js

@@ -5,22 +5,12 @@ import _uniqBy from 'lodash-es/uniqBy';
 
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { select as d3_select } from 'd3-selection';
-import { d3combobox as d3_combobox } from '../../lib/d3.combobox.js';
 
 import { dataAddressFormats } from '../../../data';
-
-import {
-    geoExtent,
-    geoChooseEdge,
-    geoSphericalDistance
-} from '../../geo';
-
+import { geoExtent, geoChooseEdge, geoSphericalDistance } from '../../geo';
 import { services } from '../../services';
-import {
-    utilGetSetValue,
-    utilNoAuto,
-    utilRebind
-} from '../../util';
+import { uiCombobox } from '../index';
+import { utilGetSetValue, utilNoAuto, utilRebind } from '../../util';
 
 
 export function uiFieldAddress(field, context) {
@@ -183,7 +173,7 @@ export function uiFieldAddress(field, context) {
                     : getNearValues;
 
             wrap.selectAll('input.addr-' + tag)
-                .call(d3_combobox()
+                .call(uiCombobox()
                     .container(context.container())
                     .minItems(1)
                     .fetcher(function(value, callback) {

modules/ui/fields/combo.js

@@ -14,16 +14,10 @@ import {
     select as d3_select
 } from 'd3-selection';
 
-import { d3combobox as d3_combobox } from '../../lib/d3.combobox.js';
-
 import { t } from '../../util/locale';
 import { services } from '../../services';
-
-import {
-    utilGetSetValue,
-    utilNoAuto,
-    utilRebind
-} from '../../util';
+import { uiCombobox } from '../index';
+import { utilGetSetValue, utilNoAuto, utilRebind } from '../../util';
 
 export {
     uiFieldCombo as uiFieldMultiCombo,
@@ -44,7 +38,7 @@ export function uiFieldCombo(field, context) {
     var optarray = field.options;
     var snake_case = (field.snake_case || (field.snake_case === undefined));
     var caseSensitive = field.caseSensitive;
-    var combobox = d3_combobox()
+    var combobox = uiCombobox()
         .container(context.container())
         .caseSensitive(caseSensitive)
         .minItems(isMulti || isSemi ? 1 : 2);

modules/ui/fields/cycleway.js

@@ -1,12 +1,8 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { select as d3_select } from 'd3-selection';
-import { d3combobox as d3_combobox } from '../../lib/d3.combobox.js';
 
-import {
-    utilGetSetValue,
-    utilNoAuto,
-    utilRebind
-} from '../../util';
+import { uiCombobox } from '../index';
+import { utilGetSetValue, utilNoAuto, utilRebind } from '../../util';
 
 
 export function uiFieldCycleway(field, context) {
@@ -61,7 +57,7 @@ export function uiFieldCycleway(field, context) {
             .call(utilNoAuto)
             .each(function(d) {
                 d3_select(this)
-                    .call(d3_combobox()
+                    .call(uiCombobox()
                         .container(context.container())
                         .data(cycleway.options(d))
                     );

modules/ui/fields/localized.js

@@ -7,20 +7,15 @@ import {
     event as d3_event
 } from 'd3-selection';
 
-import { d3combobox as d3_combobox } from '../../lib/d3.combobox.js';
 
 import { t } from '../../util/locale';
 import { dataWikipedia } from '../../../data';
 import { services } from '../../services';
 import { svgIcon } from '../../svg';
 import { tooltip } from '../../util/tooltip';
+import { uiCombobox } from '../index';
 import { utilDetect } from '../../util/detect';
-import {
-    utilEditDistance,
-    utilGetSetValue,
-    utilNoAuto,
-    utilRebind
-} from '../../util';
+import { utilEditDistance, utilGetSetValue, utilNoAuto, utilRebind } from '../../util';
 
 
 export function uiFieldLocalized(field, context) {
@@ -34,12 +29,12 @@ export function uiFieldLocalized(field, context) {
     });
 
     // reuse these combos
-    var langcombo = d3_combobox()
+    var langcombo = uiCombobox()
         .container(context.container())
         .fetcher(fetchLanguages)
         .minItems(0);
 
-    var brandcombo = d3_combobox()
+    var brandcombo = uiCombobox()
         .container(context.container())
         .canAutocomplete(false)
         .minItems(1);

modules/ui/fields/maxspeed.js

@@ -2,15 +2,11 @@ import _some from 'lodash-es/some';
 
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { select as d3_select } from 'd3-selection';
-import { d3combobox as d3_combobox } from '../../lib/d3.combobox.js';
 
 import { dataImperial } from '../../../data';
 import { geoPointInPolygon } from '../../geo';
-import {
-    utilGetSetValue,
-    utilNoAuto,
-    utilRebind
-} from '../../util';
+import { uiCombobox } from '../index';
+import { utilGetSetValue, utilNoAuto, utilRebind } from '../../util';
 
 
 export function uiFieldMaxspeed(field, context) {
@@ -26,10 +22,10 @@ export function uiFieldMaxspeed(field, context) {
 
 
     function maxspeed(selection) {
-        combobox = d3_combobox()
+        combobox = uiCombobox()
             .container(context.container());
 
-        var unitCombobox = d3_combobox()
+        var unitCombobox = uiCombobox()
             .container(context.container())
             .data(['km/h', 'mph'].map(comboValues));
 

modules/ui/fields/wikipedia.js

@@ -8,19 +8,14 @@ import {
     event as d3_event
 } from 'd3-selection';
 
-import { d3combobox as d3_combobox } from '../../lib/d3.combobox.js';
-
 import { t } from '../../util/locale';
 import { actionChangeTags } from '../../actions/index';
 import { dataWikipedia } from '../../../data/index';
 import { services } from '../../services/index';
 import { svgIcon } from '../../svg/index';
+import { uiCombobox } from '../index';
 import { utilDetect } from '../../util/detect';
-import {
-    utilGetSetValue,
-    utilNoAuto,
-    utilRebind
-} from '../../util';
+import { utilGetSetValue, utilNoAuto, utilRebind } from '../../util';
 
 
 export function uiFieldWikipedia(field, context) {
@@ -34,7 +29,7 @@ export function uiFieldWikipedia(field, context) {
 
 
     function wiki(selection) {
-        var langcombo = d3_combobox()
+        var langcombo = uiCombobox()
             .container(context.container())
             .fetcher(function(value, cb) {
                 var v = value.toLowerCase();
@@ -48,7 +43,7 @@ export function uiFieldWikipedia(field, context) {
                 }));
             });
 
-        var titlecombo = d3_combobox()
+        var titlecombo = uiCombobox()
             .container(context.container())
             .fetcher(function(value, cb) {
                 if (!value) {

modules/ui/form_fields.js

@@ -1,7 +1,7 @@
 import { select as d3_select } from 'd3-selection';
-import { d3combobox as d3_combobox } from '../lib/d3.combobox.js';
 
 import { t } from '../util/locale';
+import { uiCombobox } from './index';
 import { utilGetSetValue, utilNoAuto } from '../util';
 
 
@@ -95,7 +95,7 @@ export function uiFormFields(context) {
                 }
                 return placeholder.slice(0,3).join(', ') + ((placeholder.length > 3) ? '…' : '');
             })
-            .call(d3_combobox()
+            .call(uiCombobox()
                 .container(context.container())
                 .data(notShown)
                 .minItems(1)

modules/ui/index.js

@@ -6,6 +6,7 @@ export { uiBackgroundDisplayOptions } from './background_display_options';
 export { uiBackgroundOffset } from './background_offset';
 export { uiChangesetEditor } from './changeset_editor';
 export { uiCmd } from './cmd';
+export { uiCombobox } from './combobox';
 export { uiCommit } from './commit';
 export { uiCommitChanges } from './commit_changes';
 export { uiCommitWarnings } from './commit_warnings';

modules/ui/raw_member_editor.js

@@ -3,15 +3,13 @@ import {
     select as d3_select
 } from 'd3-selection';
 
-import { d3combobox as d3_combobox } from '../lib/d3.combobox.js';
-
 import { t } from '../util/locale';
 import { actionChangeMember, actionDeleteMember } from '../actions';
 import { modeBrowse, modeSelect } from '../modes';
 import { osmEntity } from '../osm';
 import { svgIcon } from '../svg';
 import { services } from '../services';
-import { uiDisclosure } from './disclosure';
+import { uiCombobox, uiDisclosure } from './index';
 import {
     utilDisplayName,
     utilDisplayType,
@@ -251,7 +249,7 @@ export function uiRawMemberEditor(context) {
                     return sameletter.concat(other);
                 }
 
-                role.call(d3_combobox()
+                role.call(uiCombobox()
                     .container(context.container())
                     .fetcher(function(role, callback) {
                         var rtype = entity.tags.type;
@@ -271,7 +269,7 @@ export function uiRawMemberEditor(context) {
                 var row = d3_select(this);
 
                 row.selectAll('input.member-role')
-                    .call(d3_combobox.off);
+                    .call(uiCombobox.off);
             }
         }
     }

modules/ui/raw_membership_editor.js

@@ -7,8 +7,6 @@ import {
     select as d3_select
 } from 'd3-selection';
 
-import { d3combobox as d3_combobox } from '../lib/d3.combobox.js';
-
 import { t } from '../util/locale';
 
 import {
@@ -22,7 +20,7 @@ import { modeSelect } from '../modes';
 import { osmEntity, osmRelation } from '../osm';
 import { services } from '../services';
 import { svgIcon } from '../svg';
-import { uiDisclosure } from './disclosure';
+import { uiCombobox, uiDisclosure } from './index';
 import { utilDisplayName, utilNoAuto, utilHighlightEntity } from '../util';
 
 
@@ -268,7 +266,7 @@ export function uiRawMembershipEditor(context) {
                 .merge(enter);
 
             newrow.selectAll('.member-entity-input')
-                .call(d3_combobox()
+                .call(uiCombobox()
                     .container(context.container())
                     .minItems(1)
                     .fetcher(function(value, callback) { callback(relations(value)); })
@@ -316,7 +314,7 @@ export function uiRawMembershipEditor(context) {
                     return sameletter.concat(other);
                 }
 
-                role.call(d3_combobox()
+                role.call(uiCombobox()
                     .container(context.container())
                     .fetcher(function(role, callback) {
                         var rtype = d.relation.tags.type;
@@ -336,7 +334,7 @@ export function uiRawMembershipEditor(context) {
                 var row = d3_select(this);
 
                 row.selectAll('input.member-role')
-                    .call(d3_combobox.off);
+                    .call(uiCombobox.off);
             }
         }
     }

modules/ui/raw_tag_editor.js

@@ -9,18 +9,11 @@ import {
     select as d3_select
 } from 'd3-selection';
 
-import { d3combobox as d3_combobox } from '../lib/d3.combobox.js';
-
 import { t } from '../util/locale';
 import { services } from '../services';
 import { svgIcon } from '../svg';
-import { uiDisclosure } from './disclosure';
-import { uiTagReference } from './tag_reference';
-import {
-    utilGetSetValue,
-    utilNoAuto,
-    utilRebind
-} from '../util';
+import { uiCombobox, uiDisclosure, uiTagReference } from './index';
+import { utilGetSetValue, utilNoAuto, utilRebind } from '../util';
 
 
 export function uiRawTagEditor(context) {
@@ -216,7 +209,7 @@ export function uiRawTagEditor(context) {
 
             var geometry = context.geometry(_entityID);
 
-            key.call(d3_combobox()
+            key.call(uiCombobox()
                 .container(context.container())
                 .fetcher(function(value, callback) {
                     taginfo.keys({
@@ -228,7 +221,7 @@ export function uiRawTagEditor(context) {
                     });
                 }));
 
-            value.call(d3_combobox()
+            value.call(uiCombobox()
                 .container(context.container())
                 .fetcher(function(value, callback) {
                     taginfo.values({
@@ -261,10 +254,10 @@ export function uiRawTagEditor(context) {
             var row = d3_select(this);
 
             row.selectAll('input.key')
-                .call(d3_combobox.off);
+                .call(uiCombobox.off);
 
             row.selectAll('input.value')
-                .call(d3_combobox.off);
+                .call(uiCombobox.off);
         }