Add search-to-add functionality

modules/presets/collection.js

@@ -34,6 +34,14 @@ export function presetCollection(collection) {
             }));
         },
 
+        matchAnyGeometry: function(geometries) {
+            return presetCollection(this.collection.filter(function(d) {
+                return geometries.some(function(geometry) {
+                    return d.matchGeometry(geometry);
+                });
+            }));
+        },
+
 
         search: function(value, geometry) {
             if (!value) return this;
@@ -134,8 +142,6 @@ export function presetCollection(collection) {
                     return a.preset;
                 });
 
-            var other = presets.item(geometry);
-
             var results = leading_name.concat(
                 leading_suggestions,
                 leading_terms,
@@ -145,7 +151,12 @@ export function presetCollection(collection) {
                 similar_terms
             ).slice(0, maxSearchResults - 1);
 
-            return presetCollection(_uniq(results.concat(other)));
+            if (geometry) {
+                var other = presets.item(geometry);
+                results = results.concat(other);
+            }
+
+            return presetCollection(_uniq(results));
         }
     };
 

modules/ui/init.js

@@ -91,7 +91,7 @@ export function uiInit(context) {
         var sidebarButton = leadingArea
             .append('div')
             .append('button')
-            .attr('class', 'sidebar-toggle')
+            .attr('class', 'sidebar-toggle bar-button')
             .attr('tabindex', -1)
             .on('click', ui.sidebar.toggle)
             .call(tooltip()

modules/ui/modes.js

@@ -98,8 +98,6 @@ export function uiModes(context) {
             var favoritePresets = context.getFavoritePresets();
             var favoriteModes = favoritePresets.map(function(d) {
                 var preset = context.presets().item(d.id);
-                var isMaki = /^maki-/.test(preset.icon);
-                var icon = '#' + preset.icon + (isMaki ? '-11' : '');
                 var markerClass = 'add-preset add-' + d.geom + ' add-preset-' + preset.name()
                     .replace(/\s+/g, '_')
                     + '-' + d.geom; //replace spaces with underscores to avoid css interpretation
@@ -117,7 +115,6 @@ export function uiModes(context) {
                     title: presetName,
                     description: t(tooltipTitleID, { feature: presetName }),
                     key: '',
-                    icon: icon,
                     preset: preset,
                     geometry: d.geom
                 };
@@ -145,7 +142,7 @@ export function uiModes(context) {
             var buttonsEnter = buttons.enter()
                 .append('button')
                 .attr('tabindex', -1)
-                .attr('class', function(d) { return d.id + ' add-button'; })
+                .attr('class', function(d) { return d.id + ' add-button bar-button'; })
                 .on('click.mode-buttons', function(d) {
                     if (!enabled(d)) return;
 

modules/ui/preset_icon.js

@@ -128,7 +128,7 @@ export function uiPresetIcon() {
 
         container = container.enter()
             .append('div')
-            .attr('class', 'preset-icon-container')
+            .attr('class', 'preset-icon-container ' + sizeClass)
             .merge(container);
 
         var p = preset.apply(this, arguments);

modules/ui/save.js

@@ -77,7 +77,7 @@ export function uiSave(context) {
 
         var button = selection
             .append('button')
-            .attr('class', 'save disabled')
+            .attr('class', 'save disabled bar-button')
             .attr('tabindex', -1)
             .on('click', save)
             .call(tooltipBehavior);

modules/ui/search_add.js

@@ -6,6 +6,12 @@ import {
     selectAll as d3_selectAll
 } from 'd3-selection';
 
+import {
+    modeAddArea,
+    modeAddLine,
+    modeAddPoint
+} from '../modes';
+
 import { t, textDirection } from '../util/locale';
 import { actionChangePreset } from '../actions/index';
 import { operationDelete } from '../operations/index';
@@ -18,25 +24,142 @@ import { utilKeybinding, utilNoAuto, utilRebind } from '../util';
 
 export function uiSearchAdd(context) {
     var dispatch = d3_dispatch('choose');
+    var presets;
+    var search = d3_select(null), popover = d3_select(null), list = d3_select(null);
 
     function searchAdd(selection) {
 
+        presets = context.presets().matchAnyGeometry(['point', 'line', 'area']);
+
         var searchWrap = selection
             .append('div')
             .attr('class', 'search-wrap');
 
-        var search = searchWrap
+        search = searchWrap
             .append('input')
             .attr('class', 'search-input')
             .attr('placeholder', t('modes.add_feature.title'))
             .attr('type', 'search')
-            .call(utilNoAuto);
-            //.on('keydown', initialKeydown)
-            //.on('keypress', keypress)
-            //.on('input', inputevent);
+            .call(utilNoAuto)
+            .on('focus', function() {
+                popover.classed('hide', false);
+            })
+            .on('blur', function() {
+                popover.classed('hide', true);
+            })
+            .on('input', function () {
+                var value = search.property('value');
+                //list.classed('filtered', value.length);
+                if (value.length) {
+                    var results = presets.search(value);
+                    list.call(drawList, results);
+                } else {
+                    //list.call(drawList, context.presets().defaults(geometry, 36));
+                }
+            });
 
         searchWrap
             .call(svgIcon('#iD-icon-search', 'search-icon pre-text'));
+
+        popover = searchWrap
+            .append('div')
+            .attr('class', 'popover fillL hide')
+            .on('mousedown', function() {
+                // don't blur the search input (and thus close results)
+                d3_event.preventDefault();
+                d3_event.stopPropagation();
+            });
+
+        list = popover
+            .append('div')
+            .attr('class', 'list');//
+            //.call(drawList, context.presets().defaults(geometry, 36));
+    }
+
+    function supportedGeometry(preset) {
+        return preset.geometry.filter(function(geometry) {
+            return ['point', 'line', 'area'].indexOf(geometry) !== -1;
+        });
+    }
+    function defaultGeometry(item) {
+        if (item.geometry.filter) {
+            var supportedGeom = supportedGeometry(item);
+            if (supportedGeom.length === 1) {
+                return supportedGeom[0];
+            }
+        } else {
+            return item.geometry;
+        }
+        return 'point';
+    }
+
+    function drawList(list, presets) {
+        /*var collection = presets.collection.reduce(function(collection, preset) {
+            if (preset.members) {
+                collection.push(CategoryItem(preset));
+            } else if (preset.visible()) {
+                collection.push(PresetItem(preset));
+            }
+            return collection;
+        }, []);*/
+
+        var items = list.selectAll('.list-item')
+            .data(presets.collection, function(d) { return d.id; });
+
+        items.order();
+
+        items.exit()
+            .remove();
+
+        var row = items.enter()
+            .append('div')
+            .attr('class', function(item) { return 'list-item preset-' + item.id.replace('/', '-'); });
+
+        var button = row.append('button')
+            .on('click', function(d) {
+                var geom = defaultGeometry(d);
+                var markerClass = 'add-preset add-' + geom + ' add-preset-' + d.name()
+                    .replace(/\s+/g, '_')
+                    + '-' + geom; //replace spaces with underscores to avoid css interpretation
+                var modeInfo = {
+                    id: markerClass,
+                    button: markerClass,
+                    preset: d,
+                    geometry: geom
+                };
+                var mode;
+                switch (geom) {
+                    case 'point':
+                    case 'vertex':
+                        mode = modeAddPoint(context, modeInfo);
+                        break;
+                    case 'line':
+                        mode = modeAddLine(context, modeInfo);
+                        break;
+                    case 'area':
+                        mode = modeAddArea(context, modeInfo);
+                }
+                search.node().blur();
+                context.enter(mode);
+            });
+
+        row.each(function(d) {
+            d3_select(this).call(
+                uiPresetIcon()
+                    .geometry(defaultGeometry(d))
+                    .preset(d)
+                    .sizeClass('small')
+            );
+        });
+        row.append('div')
+            .attr('class', 'label')
+            .append('div')
+            .attr('class', 'label-inner')
+            .text(function(d) {
+                return d.name();
+            });
+
+        //updateForFeatureHiddenState();
     }
 
     return utilRebind(searchAdd, dispatch, 'on');

modules/ui/undo_redo.js

@@ -46,7 +46,7 @@ export function uiUndoRedo(context) {
             .data(commands)
             .enter()
             .append('button')
-            .attr('class', function(d) { return 'disabled ' + d.id + '-button'; })
+            .attr('class', function(d) { return 'disabled ' + d.id + '-button bar-button'; })
             .on('click', function(d) { return d.action(); })
             .call(tooltipBehavior);