diff --git a/css/app.css b/css/app.css
index 2a01db13c..60b403711 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1413,15 +1413,15 @@ div.combobox {
border-top-width: 1px;
}
-.tag-row:first-child button.tag-help-button {
+.tag-row:first-child .tag-reference-button {
border-top-right-radius: 4px;
}
-.tag-row:last-child button.tag-help-button {
+.tag-row:last-child .tag-reference-button {
border-bottom-right-radius: 4px;
}
-.tag-row button.tag-help-button {
+.tag-row .tag-reference-button {
right: 0;
}
diff --git a/index.html b/index.html
index a1f5cd263..27149eeb6 100644
--- a/index.html
+++ b/index.html
@@ -83,6 +83,7 @@
+
diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js
index d52a820e8..37a10f3df 100644
--- a/js/id/ui/preset.js
+++ b/js/id/ui/preset.js
@@ -125,12 +125,8 @@ iD.ui.preset = function(context, entity, preset) {
.attr('for', function(field) { return 'preset-input-' + field.id; })
.text(function(field) { return field.label(); });
- label.append('button')
- .attr('class', 'tag-reference-button minor')
- .attr('tabindex', -1)
- .on('click', toggleReference)
- .append('span')
- .attr('class', 'icon inspect');
+ label.call(iD.ui.TagReferenceButton()
+ .on('click', toggleReference));
label.append('button')
.attr('class', 'modified-icon minor')
diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js
index 32a3f346e..a16698c46 100644
--- a/js/id/ui/preset_grid.js
+++ b/js/id/ui/preset_grid.js
@@ -214,12 +214,8 @@ iD.ui.PresetGrid = function(context, entity) {
.text(function(d) { return d.name(); });
entered.filter(function(d) { return !d.members; })
- .append('button')
- .attr('tabindex', -1)
- .attr('class', 'tag-reference-button minor')
- .on('click', helpClick)
- .append('span')
- .attr('class', 'icon inspect');
+ .call(iD.ui.TagReferenceButton()
+ .on('click', helpClick));
entries.order();
}
diff --git a/js/id/ui/tag_reference_button.js b/js/id/ui/tag_reference_button.js
new file mode 100644
index 000000000..bec328fa6
--- /dev/null
+++ b/js/id/ui/tag_reference_button.js
@@ -0,0 +1,17 @@
+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 e8abdf2a6..dc100d7d1 100644
--- a/js/id/ui/taglist.js
+++ b/js/id/ui/taglist.js
@@ -100,9 +100,7 @@ iD.ui.Taglist = function(context, entity) {
.append('span')
.attr('class', 'icon delete');
- row.append('button')
- .attr('tabindex', -1)
- .attr('class', 'tag-help-button minor')
+ row.call(iD.ui.TagReferenceButton()
.on('click', function(tag) {
tags.forEach(function(other) {
if (other.key === tag.key) {
@@ -111,9 +109,7 @@ iD.ui.Taglist = function(context, entity) {
other.reference.hide();
}
});
- })
- .append('span')
- .attr('class', 'icon inspect');
+ }));
row.each(function(tag) {
d3.select(this).call(tag.reference);