From 4ef6299d9dbbbae711a11f82ec1f0b9e0de2fd9c Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Tue, 26 Mar 2013 19:09:00 -0400
Subject: [PATCH] better modal transitions.

---
 js/id/ui/modal.js  | 53 ++++++++++++++++++++++++++++++++++++----------
 js/id/ui/splash.js |  4 ++--
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/js/id/ui/modal.js b/js/id/ui/modal.js
index 44ef6a25a..1888ac835 100644
--- a/js/id/ui/modal.js
+++ b/js/id/ui/modal.js
@@ -10,23 +10,46 @@ iD.ui.modal = function(selection, blocking) {
     d3.select(document).call(keybinding);
 
     previous.transition()
-        .style('opacity', 0).remove();
+        .duration(200)
+        .style('opacity', 0)
+        .remove();
 
     var shaded = selection
         .append('div')
         .attr('class', 'shaded')
-        .style('opacity', 0)
-        .on('click.remove-modal', function() {
-            if (d3.event.target == this && !blocking) d3.select(this).remove();
-        });
+        .style('opacity', 0);
 
     var modal = shaded.append('div')
         .attr('class', 'modal fillL col6');
 
+        shaded.on('click.remove-modal', function() {
+            if (d3.event.target == this && !blocking) {
+                shaded
+                    .transition()
+                    .duration(200)
+                    .style('opacity',0)
+                    .remove();
+                modal
+                    .transition()
+                    .duration(200)
+                    .style('top','0px');
+            }
+        });
+
     modal.append('button')
         .attr('class', 'close')
         .on('click', function() {
-            if (!blocking) shaded.remove();
+            if (!blocking) {
+                shaded
+                    .transition()
+                    .duration(200)
+                    .style('opacity',0)
+                    .remove();
+                modal
+                    .transition()
+                    .duration(200)
+                    .style('top','0px');
+            }
         })
         .append('div')
             .attr('class','icon close');
@@ -37,16 +60,24 @@ iD.ui.modal = function(selection, blocking) {
     if (animate) {
         shaded.transition().style('opacity', 1);
         modal
-        .style('top','0px')
-        .transition()
-        .duration(200)
-        .style('top','40px')
+            .style('top','0px')
+            .transition()
+            .duration(200)
+            .style('top','40px');
     } else {
         shaded.style('opacity', 1);
     }
 
     function close() {
-        shaded.remove();
+        shaded
+            .transition()
+            .duration(200)
+            .style('opacity',0)
+            .remove();
+        modal
+            .transition()
+            .duration(200)
+            .style('top','0px');
         keybinding.off();
     }
 
diff --git a/js/id/ui/splash.js b/js/id/ui/splash.js
index 09b2a6432..7c96171ef 100644
--- a/js/id/ui/splash.js
+++ b/js/id/ui/splash.js
@@ -1,7 +1,7 @@
 iD.ui.Splash = function(context) {
     return function(selection) {
-        if (context.storage('sawSplash'))
-            return;
+        // if (context.storage('sawSplash'))
+        //     return;
 
         context.storage('sawSplash', true);