Hide tag reference in hover state (fixes #1561)

This commit is contained in:
John Firebaugh
2013-06-03 11:09:08 -07:00
parent b7f29a4407
commit d5910dc97d
4 changed files with 91 additions and 61 deletions
+3 -1
View File
@@ -86,13 +86,15 @@ iD.ui.EntityEditor = function(context) {
.preset(preset)
.entityID(id)
.tags(tags)
.state(state)
.on('change', changeTags));
$body.select('.raw-tag-editor')
.call(rawTagEditor
.preset(preset)
.entityID(id)
.tags(tags));
.tags(tags)
.state(state));
if (entity.type === 'relation') {
$body.select('.raw-member-editor')
+16 -9
View File
@@ -1,5 +1,6 @@
iD.ui.preset = function(context) {
var event = d3.dispatch('change'),
state,
fields,
preset,
tags,
@@ -11,8 +12,6 @@ iD.ui.preset = function(context) {
field.input = iD.ui.preset[field.type](field, context)
.on('change', event.change);
field.reference = iD.ui.TagReference({key: field.key});
if (field.type === 'address' ||
field.type === 'wikipedia' ||
field.type === 'maxspeed') {
@@ -106,20 +105,22 @@ iD.ui.preset = function(context) {
$fields.select('.modified-icon')
.on('click', revert);
$fields.select('.form-label')
.each(function(field) {
d3.select(this)
.call(field.reference.button);
});
$fields
.classed('modified', function(field) {
return field.modified();
})
.each(function(field) {
var reference = iD.ui.TagReference({key: field.key});
if (state === 'hover') {
reference.showing(false);
}
d3.select(this)
.call(field.input)
.call(field.reference.body);
.call(reference.body)
.select('.form-label')
.call(reference.button);
field.input.tags(tags);
});
@@ -170,6 +171,12 @@ iD.ui.preset = function(context) {
return presets;
};
presets.state = function(_) {
if (!arguments.length) return state;
state = _;
return presets;
};
presets.tags = function(_) {
if (!arguments.length) return tags;
tags = _;
+12
View File
@@ -2,6 +2,7 @@ iD.ui.RawTagEditor = function(context) {
var event = d3.dispatch('change'),
taginfo = iD.taginfo(),
showBlank = false,
state,
preset,
tags,
id;
@@ -86,6 +87,11 @@ iD.ui.RawTagEditor = function(context) {
$items.each(function(tag) {
var reference = iD.ui.TagReference({key: tag.key});
if (state === 'hover') {
reference.showing(false);
}
d3.select(this)
.each(bindTypeahead)
.call(reference.button)
@@ -191,6 +197,12 @@ iD.ui.RawTagEditor = function(context) {
}
}
rawTagEditor.state = function(_) {
if (!arguments.length) return state;
state = _;
return rawTagEditor;
};
rawTagEditor.preset = function(_) {
if (!arguments.length) return preset;
preset = _;
+60 -51
View File
@@ -1,9 +1,10 @@
iD.ui.TagReference = function(tag) {
var tagReference = {},
taginfo = iD.taginfo(),
button, body,
loaded = false,
showing = false;
button,
body,
loaded,
showing;
function findLocal(docs) {
var locale = iD.detect().locale.toLowerCase(),
@@ -30,44 +31,7 @@ iD.ui.TagReference = function(tag) {
});
}
tagReference.button = function(selection) {
button = selection.selectAll('.tag-reference-button')
.data([0]);
var enter = button.enter().append('button')
.attr('tabindex', -1)
.attr('class', 'tag-reference-button minor');
enter.append('span')
.attr('class', 'icon inspect');
button.on('click', function () {
d3.event.stopPropagation();
d3.event.preventDefault();
if (showing) {
tagReference.hide();
} else {
tagReference.load();
}
});
};
tagReference.body = function(selection) {
body = selection.selectAll('.tag-reference-body')
.data([0]);
body.enter().append('div')
.attr('class', 'tag-reference-body cf')
.style('max-height', '0')
.style('opacity', '0');
};
tagReference.load = function() {
if (loaded) {
tagReference.show();
return;
}
function load() {
button.classed('tag-reference-loading', true);
taginfo.docs(tag, function(err, docs) {
@@ -79,7 +43,7 @@ iD.ui.TagReference = function(tag) {
if (!docs || !docs.description) {
body.append('p').text(t('inspector.no_documentation_key'));
tagReference.show();
show();
return;
}
@@ -88,10 +52,10 @@ iD.ui.TagReference = function(tag) {
.append('img')
.attr('class', 'wiki-image')
.attr('src', docs.image.thumb_url_prefix + "100" + docs.image.thumb_url_suffix)
.on('load', function() { tagReference.show(); })
.on('error', function() { d3.select(this).remove(); tagReference.show(); });
.on('load', function() { show(); })
.on('error', function() { d3.select(this).remove(); show(); });
} else {
tagReference.show();
show();
}
body
@@ -109,9 +73,9 @@ iD.ui.TagReference = function(tag) {
wikiLink.append('span')
.text(t('inspector.reference'));
});
};
}
tagReference.show = function() {
function show() {
loaded = true;
button.classed('tag-reference-loading', false);
@@ -122,15 +86,60 @@ iD.ui.TagReference = function(tag) {
.style('opacity', '1');
showing = true;
};
}
tagReference.hide = function() {
body.transition()
.duration(200)
function hide(selection) {
selection = selection || body.transition().duration(200);
selection
.style('max-height', '0px')
.style('opacity', '0');
showing = false;
}
tagReference.button = function(selection) {
button = selection.selectAll('.tag-reference-button')
.data([0]);
var enter = button.enter().append('button')
.attr('tabindex', -1)
.attr('class', 'tag-reference-button minor');
enter.append('span')
.attr('class', 'icon inspect');
button.on('click', function () {
d3.event.stopPropagation();
d3.event.preventDefault();
if (showing) {
hide();
} else if (loaded) {
show();
} else {
load();
}
});
};
tagReference.body = function(selection) {
body = selection.selectAll('.tag-reference-body')
.data([0]);
body.enter().append('div')
.attr('class', 'tag-reference-body cf')
.style('max-height', '0')
.style('opacity', '0');
if (showing === false) {
hide(body);
}
};
tagReference.showing = function(_) {
if (!arguments.length) return showing;
showing = _;
return tagReference;
};
return tagReference;