From 3249487632bc6bd39d4829a0d9d48717296d9c63 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Tue, 21 May 2013 15:11:28 -0700
Subject: [PATCH] Extract TagReferenceButton

---
 css/app.css                      |  6 +++---
 index.html                       |  1 +
 js/id/ui/preset.js               |  8 ++------
 js/id/ui/preset_grid.js          |  8 ++------
 js/id/ui/tag_reference_button.js | 17 +++++++++++++++++
 js/id/ui/taglist.js              |  8 ++------
 6 files changed, 27 insertions(+), 21 deletions(-)
 create mode 100644 js/id/ui/tag_reference_button.js

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 @@
         <script src='js/id/ui/spinner.js'></script>
         <script src='js/id/ui/restore.js'></script>
         <script src='js/id/ui/tag_reference.js'></script>
+        <script src='js/id/ui/tag_reference_button.js'></script>
         <script src='js/id/ui/preset.js'></script>
         <script src='js/id/ui/preset_icon.js'></script>
         <script src='js/id/ui/lasso.js'></script>
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);