d3.combobox should be called on input element

This commit is contained in:
John Firebaugh
2013-03-25 11:43:04 -07:00
parent 8bbd828324
commit afe5aa788c
4 changed files with 31 additions and 32 deletions

View File

@@ -69,7 +69,8 @@ iD.ui.preset.address = function(field, context) {
.attr('placeholder', field.t('placeholders.street'))
.attr('class', 'addr-street')
.on('blur', change)
.on('change', change);
.on('change', change)
.call(d3.combobox().data(getStreets()));
city = wrap.append('input')
.property('type', 'text')
@@ -78,8 +79,6 @@ iD.ui.preset.address = function(field, context) {
.on('blur', change)
.on('change', change)
.call(close());
streetwrap.call(d3.combobox().data(getStreets()));
}
function change() {

View File

@@ -10,9 +10,7 @@ iD.ui.preset.combo = function(field) {
.attr('type', 'text')
.attr('id', 'preset-input-' + field.id)
.on('change', change)
.on('blur', change);
selection
.on('blur', change)
.call(combobox);
if (field.options) {

View File

@@ -121,8 +121,8 @@ iD.ui.Taglist = function(context, entity) {
function bindTypeahead() {
var geometry = entity.geometry(context.graph()),
row = d3.select(this),
key = row.selectAll('.key-wrap'),
value = row.selectAll('.input-wrap-position');
key = row.selectAll('input.key'),
value = row.selectAll('input.value');
function sort(value, data) {
var sameletter = [],
@@ -137,28 +137,26 @@ iD.ui.Taglist = function(context, entity) {
return sameletter.concat(other);
}
var keyinput = key.select('input');
key.call(d3.combobox()
.fetcher(function(_, __, callback) {
.fetcher(function(value, __, callback) {
taginfo.keys({
debounce: true,
geometry: geometry,
query: keyinput.property('value')
query: value
}, function(err, data) {
if (!err) callback(sort(keyinput.property('value'), data));
if (!err) callback(sort(value, data));
});
}));
var valueinput = value.select('input');
value.call(d3.combobox()
.fetcher(function(_, __, callback) {
.fetcher(function(value, __, callback) {
taginfo.values({
debounce: true,
key: keyinput.property('value'),
key: key.property('value'),
geometry: geometry,
query: valueinput.property('value')
query: value
}, function(err, data) {
if (!err) callback(sort(valueinput.property('value'), data));
if (!err) callback(sort(value, data));
});
}));
}

View File

@@ -1,7 +1,7 @@
d3.combobox = function() {
var event = d3.dispatch('accept'),
id = d3.combobox.id ++,
container, input, shown = false, data = [];
data = [];
var fetcher = function(val, data, cb) {
cb(data.filter(function(d) {
@@ -12,20 +12,24 @@ d3.combobox = function() {
}));
};
var typeahead = function(selection) {
var idx = -1;
var typeahead = function(input) {
var idx = -1, container, shown = false;
input = selection.select('input')
.classed('combobox-input', true);
selection.append('div', input)
.attr('class', 'combobox-carat')
.on('mousedown', function() {
// prevent the form element from blurring. it blurs
// on mousedown
d3.event.stopPropagation();
d3.event.preventDefault();
mousedown();
input
.classed('combobox-input', true)
.each(function() {
var parent = this.parentNode,
sibling = this.nextSibling;
d3.select(parent)
.insert('div', function() { return sibling; })
.attr('class', 'combobox-carat')
.on('mousedown', function () {
// prevent the form element from blurring. it blurs
// on mousedown
d3.event.stopPropagation();
d3.event.preventDefault();
mousedown();
});
});
function updateSize() {
@@ -205,7 +209,7 @@ d3.combobox = function() {
.order();
}
fetcher.apply(selection, [value, data, render]);
fetcher.apply(input, [value, data, render]);
}
// select the choice given as d