mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-15 13:38:26 +02:00
Hide tag reference in hover state (fixes #1561)
This commit is contained in:
@@ -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
@@ -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 = _;
|
||||
|
||||
@@ -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
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user