From 160f3e7e4c5628e367c09af7a6e98a8ef30e5524 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 27 Mar 2013 18:40:57 -0700
Subject: [PATCH] Extract preset icon component (fixes #1176)

---
 css/app.css             | 22 ++++++----------------
 index.html              |  1 +
 js/id/ui/preset_grid.js | 24 ++----------------------
 js/id/ui/preset_icon.js | 23 +++++++++++++++++++++++
 js/id/ui/tag_editor.js  |  9 +++++----
 test/index.html         |  1 +
 6 files changed, 38 insertions(+), 42 deletions(-)
 create mode 100644 js/id/ui/preset_icon.js

diff --git a/css/app.css b/css/app.css
index aafed2b2e..95638ca84 100644
--- a/css/app.css
+++ b/css/app.css
@@ -675,13 +675,15 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     background: #ececec;
 }
 
-.grid-entry > .icon {
+.preset-icon {
     position: absolute;
-    top: 30px;left: 0px; right: 0px;
+    top: 30px;
+    left: 0px;
+    right: 0px;
     margin: auto;
 }
 
-.inspector-body-line .grid-entry > .icon {
+.preset-icon-line {
     top: 15px;
     left: -10px;
     right: -10px;
@@ -863,7 +865,7 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     border-bottom-color: #CCC;
 }
 
-.tag-wrap .preset-icon-wrap div {
+.tag-wrap .preset-icon-wrap > div {
     height: 80px;
     width: 33.3333%;
     width: -webkit-calc(33.3333% - 10px);
@@ -874,18 +876,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     position: relative;
 }
 
-.tag-wrap .preset-icon-wrap .preset-icon {
-    position: absolute;
-    top: 30px;
-    left: 0px;
-    right: 0px;
-    margin: auto;
-}
-
-.tag-wrap .preset-icon-wrap .preset-icon.line {
-    top: 15px;
-}
-
 .inspector-preset .form-field {
     padding-left: 20px;
     padding-right: 20px;
diff --git a/index.html b/index.html
index bb7b691c1..f4fc3d00a 100644
--- a/index.html
+++ b/index.html
@@ -85,6 +85,7 @@
         <script src='js/id/ui/restore.js'></script>
         <script src='js/id/ui/tag_reference.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>
         <script src='js/id/ui/source_switch.js'></script>
         <script src='js/id/ui/toggle.js'></script>
diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js
index e26281ed9..242bc618b 100644
--- a/js/id/ui/preset_grid.js
+++ b/js/id/ui/preset_grid.js
@@ -135,18 +135,6 @@ iD.ui.PresetGrid = function(context, entity) {
 
         function name(d) { return d.name(); }
 
-        function presetClass(d) {
-            var s = 'preset-icon-fill ' + entity.geometry(context.graph());
-            if (d.members) {
-                s += 'category';
-            } else {
-                for (var i in d.tags) {
-                    s += ' tag-' + i + ' tag-' + i + '-' + d.tags[i];
-                }
-            }
-            return s;
-        }
-
         // Inserts a div inline after the entry for the provided entity
         // Used for preset descriptions, and for expanding categories
         function insertBox(grid, entity, klass) {
@@ -235,16 +223,8 @@ iD.ui.PresetGrid = function(context, entity) {
                 .transition()
                 .style('opacity', 1);
 
-            buttonInner.append('div')
-                .attr('class', presetClass);
-
-            var geometry = entity.geometry(context.graph()),
-                fallbackIcon = geometry === 'line' ? 'other-line' : 'marker-stroked';
-
-            buttonInner.append('div')
-                .attr('class', function(d) {
-                    return 'feature-' + (d.icon || fallbackIcon) + ' icon';
-                });
+            buttonInner
+                .call(iD.ui.PresetIcon(context.geometry(entity.id)));
 
             var label = buttonInner.append('div')
                 .attr('class','label')
diff --git a/js/id/ui/preset_icon.js b/js/id/ui/preset_icon.js
new file mode 100644
index 000000000..8c06536cc
--- /dev/null
+++ b/js/id/ui/preset_icon.js
@@ -0,0 +1,23 @@
+iD.ui.PresetIcon = function(geometry) {
+    return function(selection) {
+        selection.append('div')
+            .attr('class', function(preset) {
+                var s = 'preset-icon-fill ' + geometry;
+                if (preset.members) {
+                    s += 'category';
+                } else {
+                    for (var i in preset.tags) {
+                        s += ' tag-' + i + ' tag-' + i + '-' + preset.tags[i];
+                    }
+                }
+                return s;
+            });
+
+        var fallbackIcon = geometry === 'line' ? 'other-line' : 'marker-stroked';
+
+        selection.append('div')
+            .attr('class', function(preset) {
+                return 'feature-' + (preset.icon || fallbackIcon) + ' icon preset-icon preset-icon-' + geometry;
+            });
+    }
+};
diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js
index 408a3cd17..602ccee50 100644
--- a/js/id/ui/tag_editor.js
+++ b/js/id/ui/tag_editor.js
@@ -21,7 +21,9 @@ iD.ui.TagEditor = function(context, entity) {
             preset = newpreset;
         }
 
-        selection.html('');
+        selection
+            .datum(preset)
+            .html('');
 
         var messagewrap = selection.append('div')
             .attr('class', 'header fillL cf');
@@ -52,9 +54,8 @@ iD.ui.TagEditor = function(context, entity) {
         editorwrap.append('div')
             .attr('class', 'col12 inspector-inner preset-icon-wrap fillL3')
             .append('div')
-                .attr('class','fillL')
-                .append('span')
-                    .attr('class', geometry + ' preset-icon icon feature-' + icon);
+            .attr('class','fillL')
+            .call(iD.ui.PresetIcon(context.geometry(entity.id)));
 
         presetUI = iD.ui.preset(context, entity, preset)
             .on('change', changeTags)
diff --git a/test/index.html b/test/index.html
index c0f7be5f2..bf79c84bc 100644
--- a/test/index.html
+++ b/test/index.html
@@ -83,6 +83,7 @@
     <script src='../js/id/ui/restore.js'></script>
     <script src='../js/id/ui/tag_reference.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>
     <script src='../js/id/ui/source_switch.js'></script>
     <script src='../js/id/ui/toggle.js'></script>