diff --git a/css/app.css b/css/app.css index 46148a605..329e57d0d 100644 --- a/css/app.css +++ b/css/app.css @@ -1269,6 +1269,22 @@ a.success-action { } .preset-section.cf, +.inspector-preset.cf, .preset-section-input.cf { width: 100%; } + +.preset-search-input { + width:100%; +} + +.preset-search-input input { + width: 100%; + padding: 5px; +} + +.preset-search-result { + padding: 0px 10px; + height:30px; + margin: 5px; +} diff --git a/index.html b/index.html index 2ec9d79ee..26a78a853 100644 --- a/index.html +++ b/index.html @@ -73,6 +73,7 @@ + diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js index eae7da717..25eafe747 100644 --- a/js/id/ui/inspector.js +++ b/js/id/ui/inspector.js @@ -9,8 +9,6 @@ iD.ui.inspector = function() { function inspector(selection) { var entity = selection.datum(); - var possiblePresets = presetData.match(entity); - var inspector = selection.append('div') .attr('class','inspector content'); @@ -24,12 +22,18 @@ iD.ui.inspector = function() { var inspectorwrap = inspectorbody.append('div') .attr('class', 'inspector-inner tag-wrap fillL2'); - if (possiblePresets.length) { - var inspectorpreset = inspectorwrap.append('div') - .attr('class', 'inspector-preset cf') - .call(iD.ui.preset() - .preset(possiblePresets[0])); - } + var inspectorpresetsearch = inspectorwrap.append('div') + .attr('class', 'inspector-preset cf') + .call(iD.ui.presetsearch() + .entity(entity) + .presetData(presetData) + .on('choose', function(preset) { + inspectorpreset.call(iD.ui.preset() + .preset(preset)); + })); + + var inspectorpreset = inspectorwrap.append('div') + .attr('class', 'inspector-preset cf'); inspectorwrap.append('h4') diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js index 0521580f4..173599a01 100644 --- a/js/id/ui/preset.js +++ b/js/id/ui/preset.js @@ -66,8 +66,7 @@ iD.ui.preset = function() { var wrap = s.append('div') .attr('class', 'preset-section-input cf'); - wrap - .append('div') + wrap.append('div') .attr('class', 'col6') .text(d.text); diff --git a/js/id/ui/presetsearch.js b/js/id/ui/presetsearch.js new file mode 100644 index 000000000..c1861e67b --- /dev/null +++ b/js/id/ui/presetsearch.js @@ -0,0 +1,61 @@ +iD.ui.presetsearch = function() { + var event = d3.dispatch('choose'), + presetData; + + function search(selection) { + var viable = presetData.match(entity); + + function filter(value) { + value = value.toLowerCase(); + return viable.filter(function(v) { + return v.name.toLowerCase().indexOf(value) !== -1; + }); + } + + function showResults() { + var values = filter(this.value).slice(0, 10); + + var res = search_output.selectAll('div.preset-search-result') + .data(values, function(d) { return d.name; }); + + res.exit().remove(); + + res.enter() + .append('button') + .attr('class', 'preset-search-result') + .text(function(d) { + return d.name; + }) + .on('click', function(d) { + search_output + .selectAll('button.preset-search-result') + .remove(); + event.choose(d); + }); + } + + selection.append('div') + .attr('class', 'preset-search-input') + .append('h3') + .append('input') + .on('keyup', showResults) + .on('change', showResults); + + var search_output = selection.append('div') + .attr('class', 'preset-search-output'); + } + + search.presetData = function(_) { + if (!arguments.length) return presetData; + presetData = _; + return search; + }; + + search.entity = function(_) { + if (!arguments.length) return entity; + entity = _; + return search; + }; + + return d3.rebind(search, event, 'on'); +};