CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-20 23:44:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve typeahead

Browse Source
This commit is contained in:
Tom MacWright
2012-12-05 11:12:56 -05:00
parent 433dced53d
commit f381693f2b
3 changed files with 54 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+5 -1
View File
@@ -240,15 +240,19 @@ input#geocode-location {
div.typeahead {
background:#fff;
padding:2px 4px;
width:148px;
border:1px solid #ccc;
}
div.typeahead a {
padding:1px 4px;
display:block;
}
div.typeahead a.active {
background:#DDE4FF;
}
.modal {
width:640px;
height:550px;
js/id/ui/inspector.js
+10 -8
View File
@@ -70,18 +70,20 @@ iD.Inspector = function() {
.data(function(d) { return [d, d]; });
valuetds.enter().append('td').append('input')
.property('value', function(d, i) { return d[i ? 'value' : 'key']; })
.on('keyup', function(d, i) {
.on('keyup.update', function(d, i) {
d[i ? 'value' : 'key'] = this.value;
update();
})
.each(function(d, i) {
var selection = this;
if (i == 1) {
taginfo.values(d.key, function(err, data) {
d3.select(selection).call(d3.typeahead()
.data(data.data));
});
}
if (!i) return;
var selection = d3.select(this);
selection.call(d3.typeahead()
.data(function(selection, callback) {
update();
taginfo.values(selection.datum().key, function(err, data) {
callback(data.data);
});
}));
});
row.append('td').attr('class', 'tag-help').append('a')
js/lib/d3.typeahead.js
+39 -23
View File
@@ -1,11 +1,11 @@
d3.typeahead = function() {
var data;
var data, hidden;
var typeahead = function(selection) {
var container;
function setup() {
var rect = selection.node().getBoundingClientRect();
d3.select(document.body)
container = d3.select(document.body)
.append('div').attr('class', 'typeahead')
.style({
position: 'absolute',
@@ -13,12 +13,15 @@ d3.typeahead = function() {
top: rect.bottom + 'px'
});
selection
.on('keyup', update);
.on('keyup.update', update);
hidden = false;
}
function hide() {
window.setTimeout(function() {
d3.selectAll('div.typeahead').remove();
container.remove();
idx = 0;
hidden = true;
}, 500);
}
@@ -26,29 +29,42 @@ d3.typeahead = function() {
.on('focus', setup)
.on('blur', hide);
var idx = 0;
function update() {
var val = selection.property('value'),
matches = data.filter(function(d) {
return d.value.toLowerCase().indexOf(val) === 0;
}).map(function(d) {
return { value: d.value, description: d.description };
}),
container = d3.select('div.typeahead')
.style('display', function() {
return matches.length ? 'block' : 'none';
}),
options = container
if (hidden) setup();
if (d3.event.keyCode === 40) idx++;
if (d3.event.keyCode === 38) idx--;
if (d3.event.keyCode === 13) {
selection.property('value', container.select('a.active').datum().value);
hide();
}
container
.selectAll('a')
.classed('active', function(d, i) { return i == idx; });
// if (d3.event.keyCode === 13) // return
data(selection, function(data) {
var val = selection.property('value'),
matches = data.filter(function(d) {
return d.value.toLowerCase().indexOf(val) === 0;
}).map(function(d) {
return { value: d.value, description: d.description };
});
container.style('display', function() {
return matches.length ? 'block' : 'none';
});
var options = container
.selectAll('a')
.data(matches, function(d) { return d.value; });
options.enter()
.append('a')
.text(function(d) { return d.value; })
.attr('title', function(d) { return d.description; })
.on('click', function(d) {
selection.property('value', d.value);
});
options.exit().remove();
options.enter()
.append('a')
.text(function(d) { return d.value; })
.attr('title', function(d) { return d.description; })
.on('click', function(d) {
selection.property('value', d.value);
});
options.exit().remove();
});
}
};