From d34863bfc29f7bafac3cf1540a33541830733cb6 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Mon, 11 Feb 2013 11:02:58 -0500
Subject: [PATCH] Toggle ui elements gracefully. Refs #449

---
 index.html                |  1 +
 js/id/ui/geocoder.js      | 16 +++++++++++-----
 js/id/ui/inspector.js     |  4 +++-
 js/id/ui/layerswitcher.js | 10 +++++++---
 js/id/ui/toggle.js        | 15 +++++++++++++++
 5 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 js/id/ui/toggle.js

diff --git a/index.html b/index.html
index 5d43a890c..08cd1c9db 100644
--- a/index.html
+++ b/index.html
@@ -78,6 +78,7 @@
         <script src='js/id/ui/key_reference.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>
 
         <script src='js/id/actions.js'></script>
         <script src="js/id/actions/add_midpoint.js"></script>
diff --git a/js/id/ui/geocoder.js b/js/id/ui/geocoder.js
index 04f68f1ba..0643c41d1 100644
--- a/js/id/ui/geocoder.js
+++ b/js/id/ui/geocoder.js
@@ -6,6 +6,9 @@ iD.ui.geocoder = function(context) {
     }
 
     function geocoder(selection) {
+
+        var shown = false;
+
         function keydown() {
             if (d3.event.keyCode !== 13) return;
             d3.event.preventDefault();
@@ -59,11 +62,14 @@ iD.ui.geocoder = function(context) {
         function toggle() { setVisible(gcForm.classed('hide')); }
 
         function setVisible(show) {
-            button.classed('active', show);
-            gcForm.classed('hide', !show);
-            if (!show) resultsList.classed('hide', !show);
-            if (show) inputNode.node().focus();
-            else inputNode.node().blur();
+            if (show !== shown) {
+                button.classed('active', show);
+                gcForm.call(iD.ui.toggle(show));
+                if (!show) resultsList.classed('hide', !show);
+                if (show) inputNode.node().focus();
+                else inputNode.node().blur();
+                shown = show;
+            }
         }
 
         var button = selection.append('button')
diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js
index fd29e08a5..836f73cff 100644
--- a/js/id/ui/inspector.js
+++ b/js/id/ui/inspector.js
@@ -9,7 +9,7 @@ iD.ui.inspector = function() {
         var entity = selection.datum();
 
         var inspector = selection.append('div')
-            .attr('class','inspector content');
+            .attr('class','inspector content hide');
 
         inspector.append('div')
             .attr('class', 'head inspector-inner fillL')
@@ -42,6 +42,8 @@ iD.ui.inspector = function() {
         inspectorbody.append('div')
             .attr('class', 'inspector-buttons pad1 fillD')
             .call(drawButtons);
+
+        inspector.call(iD.ui.toggle(true));
     }
 
     function drawHead(selection) {
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index 2007b45fa..9ae4f3fbe 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/layerswitcher.js
@@ -15,7 +15,8 @@ iD.ui.layerswitcher = function(context) {
     function layerswitcher(selection) {
 
         var content = selection
-            .append('div').attr('class', 'content fillD map-overlay hide');
+            .append('div').attr('class', 'content fillD map-overlay hide'),
+            shown = false;
 
         var button = selection
             .append('button')
@@ -30,8 +31,11 @@ iD.ui.layerswitcher = function(context) {
         function toggle() { setVisible(content.classed('hide')); }
 
         function setVisible(show) {
-            button.classed('active', show);
-            content.classed('hide', !show);
+            if (show !== shown) {
+                button.classed('active', show);
+                content.call(iD.ui.toggle(show));
+                shown = show;
+            }
         }
 
         function clickoutside(selection) {
diff --git a/js/id/ui/toggle.js b/js/id/ui/toggle.js
new file mode 100644
index 000000000..96c6af645
--- /dev/null
+++ b/js/id/ui/toggle.js
@@ -0,0 +1,15 @@
+// toggles the visibility of ui elements, using a combination of the
+// hide class, which sets display=none, and a d3 transition for opacity.
+// this will cause blinking when called repeatedly, so check that the
+// value actually changes between calls.
+iD.ui.toggle = function(show) {
+    return function(selection) {
+        selection.style('opacity', show ? 0 : 1)
+            .classed('hide', false)
+            .transition()
+            .style('opacity', show ? 1 : 0)
+            .each('end', function() {
+                d3.select(this).classed('hide', !show);
+            });
+    };
+};