summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--client/components/main/popup.js24
-rw-r--r--client/components/main/popup.styl4
-rw-r--r--client/components/main/popup.tpl.jade2
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)