diff --git a/css/app.css b/css/app.css
index 199ef358e..9a59bba16 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1445,29 +1445,28 @@ div.combobox {
position: relative;
}
-.tag-help {
+.tag-reference-loading .icon {
+ background-image: url(img/mini-loader.gif);
+ background-position: 0 0;
+}
+
+.tag-reference-body {
overflow: hidden;
}
-.tag-help a {
+.tag-reference-body p,
+.tag-reference-body img {
+ padding-top: 10px;
+}
+
+.tag-reference-body a {
margin-top: 5px;
+ margin-bottom: 5px;
display: block;
}
-.grid-pane .tag-reference-wrap {
- padding: 10px 0 20px 0;
-}
-
-.tag-pane .tag-reference-wrap {
- padding-top: 20px;
-}
-
-.additional-tags .tag-reference-wrap {
+.additional-tags .tag-reference-body {
border-bottom: 1px solid #ccc;
- padding: 20px 0;
-}
-
-.additional-tags div.tag-help {
float: left;
width: 100%;
}
diff --git a/index.html b/index.html
index c7e5d6f40..1a67cd26f 100644
--- a/index.html
+++ b/index.html
@@ -83,7 +83,6 @@
-
diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js
index 7f84103ce..b585cffcd 100644
--- a/js/id/ui/preset.js
+++ b/js/id/ui/preset.js
@@ -81,15 +81,6 @@ iD.ui.preset = function(context, entity, preset) {
event.change(t);
}
- function toggleReference(field) {
- d3.event.stopPropagation();
- d3.event.preventDefault();
-
- field.reference.toggle();
-
- render();
- }
-
function render() {
var selection = formwrap.selectAll('.form-field')
.data(shown(), fieldKey);
@@ -119,8 +110,10 @@ iD.ui.preset = function(context, entity, preset) {
.attr('for', function(field) { return 'preset-input-' + field.id; })
.text(function(field) { return field.label(); });
- label.call(iD.ui.TagReferenceButton()
- .on('click', toggleReference));
+ label.each(function(field) {
+ d3.select(this)
+ .call(field.reference.button);
+ });
label.append('button')
.attr('class', 'modified-icon minor')
@@ -132,7 +125,7 @@ iD.ui.preset = function(context, entity, preset) {
enter.each(function(field) {
d3.select(this)
.call(field.input)
- .call(field.reference);
+ .call(field.reference.body);
});
selection
diff --git a/js/id/ui/preset_list.js b/js/id/ui/preset_list.js
index e3932e5af..fa587eee7 100644
--- a/js/id/ui/preset_list.js
+++ b/js/id/ui/preset_list.js
@@ -183,13 +183,12 @@ iD.ui.PresetList = function(context, entity) {
.attr('class', 'label')
.text(preset.name());
- wrap.call(iD.ui.TagReferenceButton()
- .on('click', item.help));
+ wrap.call(item.reference.button);
selection.append('div')
.attr('class', 'preset-inspect col12')
.style('max-height', '200px')
- .call(item.reference);
+ .call(item.reference.body);
}
item.choose = function() {
diff --git a/js/id/ui/tag_reference.js b/js/id/ui/tag_reference.js
index b7b9c60f6..880cbc7cd 100644
--- a/js/id/ui/tag_reference.js
+++ b/js/id/ui/tag_reference.js
@@ -1,5 +1,9 @@
iD.ui.TagReference = function(entity, tag) {
- var taginfo = iD.taginfo(), wrap, showing = false;
+ var tagReference = {},
+ taginfo = iD.taginfo(),
+ button, body,
+ loaded = false,
+ showing = false;
function findLocal(docs) {
var locale = iD.detect().locale.toLowerCase(),
@@ -26,53 +30,66 @@ iD.ui.TagReference = function(entity, tag) {
});
}
- function tagReference(selection) {
- wrap = selection.append('div')
- .attr('class', 'tag-help cf');
- }
+ tagReference.button = function(selection) {
+ button = selection.append('button')
+ .attr('tabindex', -1)
+ .attr('class', 'tag-reference-button minor')
+ .on('click', function() {
+ d3.event.stopPropagation();
+ d3.event.preventDefault();
+ if (showing) {
+ tagReference.hide();
+ } else {
+ tagReference.load();
+ }
+ });
- tagReference.show = function() {
+ button.append('span')
+ .attr('class', 'icon inspect');
+ };
- var referenceBody = wrap.selectAll('.tag-reference-wrap')
- .data([this])
- .enter().append('div')
- .attr('class', 'tag-reference-wrap cf')
- .style('opacity', 0);
+ tagReference.body = function(selection) {
+ body = selection.append('div')
+ .attr('class', 'tag-reference-body cf')
+ .style('max-height', '0')
+ .style('opacity', '0');
+ };
- function show() {
- referenceBody
- .transition()
- .style('opacity', 1);
+ tagReference.load = function() {
+ if (loaded) {
+ tagReference.show();
+ return;
}
- taginfo.docs(tag, function(err, docs) {
+ button.classed('tag-reference-loading', true);
+ taginfo.docs(tag, function(err, docs) {
if (!err && docs) {
docs = findLocal(docs);
}
if (!docs || !docs.description) {
- referenceBody.append('p').text(t('inspector.no_documentation_key'));
- show();
+ body.append('p').text(t('inspector.no_documentation_key'));
+ tagReference.show();
return;
}
if (docs.image && docs.image.thumb_url_prefix) {
- referenceBody
+ body
.append('img')
.attr('class', 'wiki-image')
.attr('src', docs.image.thumb_url_prefix + "100" + docs.image.thumb_url_suffix)
- .on('load', function() { show(); })
- .on('error', function() { d3.select(this).remove(); show(); });
+ .on('load', function() { tagReference.show(); })
+ .on('error', function() { d3.select(this).remove(); tagReference.show(); });
} else {
- show();
+ tagReference.show();
}
- referenceBody
+ body
.append('p')
.text(docs.description);
- var wikiLink = referenceBody
+ var wikiLink = body
.append('a')
.attr('target', '_blank')
.attr('href', 'http://wiki.openstreetmap.org/wiki/' + docs.title);
@@ -83,12 +100,15 @@ iD.ui.TagReference = function(entity, tag) {
wikiLink.append('span')
.text(t('inspector.reference'));
});
+ };
- wrap.style('max-height', '0px')
- .style('opacity', '0')
- .transition()
+ tagReference.show = function() {
+ loaded = true;
+
+ button.classed('tag-reference-loading', false);
+
+ body.transition()
.duration(200)
- .delay(100)
.style('max-height', '200px')
.style('opacity', '1');
@@ -96,17 +116,13 @@ iD.ui.TagReference = function(entity, tag) {
};
tagReference.hide = function() {
- wrap.transition()
+ body.transition()
.duration(200)
- .style('max-height', '0px')
+ .style('max-height', '0')
.style('opacity', '0');
showing = false;
};
- tagReference.toggle = function() {
- showing ? tagReference.hide() : tagReference.show();
- };
-
return tagReference;
};
\ No newline at end of file
diff --git a/js/id/ui/tag_reference_button.js b/js/id/ui/tag_reference_button.js
deleted file mode 100644
index bec328fa6..000000000
--- a/js/id/ui/tag_reference_button.js
+++ /dev/null
@@ -1,17 +0,0 @@
-iD.ui.TagReferenceButton = function() {
- var dispatch = d3.dispatch('click');
-
- function button(selection) {
- var button = selection.append('button')
- .attr('tabindex', -1)
- .attr('class', 'tag-reference-button minor')
- .on('click', dispatch.click);
-
- button.append('span')
- .attr('class', 'icon inspect');
-
- return button;
- }
-
- return d3.rebind(button, dispatch, 'on')
-};
diff --git a/js/id/ui/taglist.js b/js/id/ui/taglist.js
index 0230382d7..f8d0433f9 100644
--- a/js/id/ui/taglist.js
+++ b/js/id/ui/taglist.js
@@ -100,13 +100,10 @@ iD.ui.Taglist = function(context, entity) {
.append('span')
.attr('class', 'icon delete');
- row.call(iD.ui.TagReferenceButton()
- .on('click', function(tag) {
- tag.reference.toggle();
- }));
-
row.each(function(tag) {
- d3.select(this).call(tag.reference);
+ d3.select(this)
+ .call(tag.reference.button)
+ .call(tag.reference.body);
});
return li;