From 5aa588dcfc831c87b9262987e51e5af2d03f3e3f Mon Sep 17 00:00:00 2001
From: Kai Falkowski <kai.falkowski@gmail.com>
Date: Thu, 22 Jun 2017 01:20:43 +0200
Subject: [PATCH] Fix nested reveal and its class adding/removing in JS +
 replace Foundation global with imported transitionend

---
 js/foundation.offcanvas.js       | 17 ++++++++++-------
 scss/components/_off-canvas.scss |  5 +++++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 3d8aeceb9..389f790db 100644
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -27,7 +27,7 @@ class OffCanvas extends Plugin {
   _setup(element, options) {
     this.$element = element;
     this.options = $.extend({}, OffCanvas.defaults, this.$element.data(), options);
-    this.contentClasses = [];
+    this.contentClasses = { base: [], reveal: [] };
     this.$lastTrigger = $();
     this.$triggers = $();
     this.position = 'left';
@@ -36,11 +36,11 @@ class OffCanvas extends Plugin {
 
     // Defines the CSS transition/position classes of the off-canvas content container.
     $(['push', 'overlap']).each((index, val) => {
-      this.contentClasses.push('has-transition-'+val);
+      this.contentClasses.base.push('has-transition-'+val);
     });
     $(['left', 'right', 'top', 'bottom']).each((index, val) => {
-      this.contentClasses.push('has-position-'+val);
-      this.contentClasses.push('has-reveal-'+val);
+      this.contentClasses.base.push('has-position-'+val);
+      this.contentClasses.reveal.push('has-reveal-'+val);
     });
 
     // Triggers init is idempotent, just need to make sure it is initialized
@@ -175,8 +175,11 @@ class OffCanvas extends Plugin {
    * Removing the classes is important when another off-canvas gets opened that uses the same content container.
    * @private
    */
-  _removeContentClasses() {
-    this.$content.removeClass(this.contentClasses.join(' '));
+  _removeContentClasses(hasReveal) {
+    this.$content.removeClass(this.contentClasses.base.join(' '));
+    if (hasReveal === true) {
+      this.$content.removeClass(this.contentClasses.reveal.join(' '));
+    }
   }
 
   /**
@@ -380,7 +383,7 @@ class OffCanvas extends Plugin {
     }
 
     // Listen to transitionEnd and add class when done.
-    this.$element.one(Foundation.transitionend(this.$element), function(e) {
+    this.$element.one(transitionend(this.$element), function(e) {
       _this.$element.addClass('is-closed');
       _this._removeContentClasses();
     });
diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index ba1f9f3ca..37a9d4380 100644
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -333,6 +333,11 @@ $content: $maincontent-class
     display: none;
   }
 
+  // Consider revealed element is nested in content
+  .#{$maincontent-class} & {
+    transform: none;
+  }
+
   @at-root .#{$content}.has-reveal-#{$position} {
     margin-#{$position}: $offcanvas-size;
   }
-- 
2.47.2