Toggle ui elements gracefully. Refs #449

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>

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')

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) {

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) {

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);
+            });
+    };
+};