Improve popup animation

When going back wait for the popup transition to end before removing
the DOM element.

3 files changed, 27 insertions, 3 deletions

diff --git a/client/components/main/popup.js b/client/components/main/popup.js
index e6ce8051..dbd99e4d 100644
--- a/client/components/main/popup.js
+++ b/client/components/main/popup.js
@@ -1,3 +1,12 @@
+// XXX This event list should be abstracted somewhere else.
+var endTransitionEvents = [
+  'webkitTransitionEnd',
+  'otransitionend',
+  'oTransitionEnd',
+  'msTransitionEnd',
+  'transitionend'
+].join(' ');
+
 Popup.template.events({
   click: function(evt) {
     if (evt.originalEvent) {
@@ -14,3 +23,18 @@ Popup.template.events({
     this.__afterConfirmAction.call(this);
   }
 });
+
+// When a popup content is removed (ie, when the user press the "back" button),
+// we need to wait for the container translation to end before removing the
+// actual DOM element. For that purpose we use the undocumented `_uihooks` API.
+Popup.template.onRendered(function() {
+  var container = this.find('.content-container');
+  container._uihooks = {
+    removeElement: function(node) {
+      $(node).addClass('no-height');
+      $(container).one(endTransitionEvents, function() {
+        node.parentNode.removeChild(node);
+      });
+    }
+  };
+});
diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl
index 151b4fcb..9faad876 100644
--- a/client/components/main/popup.styl
+++ b/client/components/main/popup.styl
@@ -95,7 +95,7 @@
     width: 100%
 
   .content-container
-    width: 1000px
+    width: 5000px
     max-height: 550px
     transition: transform 0.2s
 
@@ -104,7 +104,7 @@
       padding: 0 10px 10px
       float: left
 
-      &.is-hidden
+      &.no-height
         height: 0
 
   .quiet
diff --git a/client/components/main/popup.tpl.jade b/client/components/main/popup.tpl.jade
index 9e99030d..fa54c713 100644
--- a/client/components/main/popup.tpl.jade
+++ b/client/components/main/popup.tpl.jade
@@ -17,5 +17,5 @@
         //-
           XXX We need a better way to express the "is the last element" condition.
           Hopefully the @last helper will come soon (or at least @index)
-        .content(class="{{#unless $eq popupName ../popupName}}is-hidden{{/unless}}")
+        .content(class="{{#unless $eq popupName ../popupName}}no-height{{/unless}}")
           +Template.dynamic(template=popupName data=dataContext)