From: SassNinja <kai.falkowski@gmail.com>
Date: Mon, 17 Jul 2017 20:42:46 +0000 (+0200)
Subject: Work over _addContentClasses() and _removeContentClasses() so classes get toggled... 
X-Git-Tag: v6.4.2-rc2~1^2~12^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10422%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Work over _addContentClasses() and _removeContentClasses() so classes get toggled correctly when using reveal feature

Since several revealed off-canvas elements may share the same content container, each element doesn't toggle all has-reveal-x classes anymore but only its own.
There's now a condition to limit the toggle of has-transition-x & has-position-x classes to cases where no reveal is included.
---

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index fa2dd30a5..9fbb0bc03 100644
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -175,12 +175,14 @@ class OffCanvas extends Plugin {
   /**
    * Removes the CSS transition/position classes of the off-canvas content container.
    * Removing the classes is important when another off-canvas gets opened that uses the same content container.
+   * @param {Boolean} hasReveal - true if related off-canvas element is revealed.
    * @private
    */
   _removeContentClasses(hasReveal) {
-    this.$content.removeClass(this.contentClasses.base.join(' '));
-    if (hasReveal === true) {
-      this.$content.removeClass(this.contentClasses.reveal.join(' '));
+    if (typeof hasReveal !== 'boolean') {
+      this.$content.removeClass(this.contentClasses.base.join(' '));
+    } else if (hasReveal === false) {
+      this.$content.removeClass(`has-reveal-${this.position}`);
     }
   }
 
@@ -192,8 +194,9 @@ class OffCanvas extends Plugin {
    */
   _addContentClasses(hasReveal) {
     this._removeContentClasses(hasReveal);
-    this.$content.addClass(`has-transition-${this.options.transition} has-position-${this.position}`);
-    if (hasReveal === true) {
+    if (typeof hasReveal !== 'boolean') {
+      this.$content.addClass(`has-transition-${this.options.transition} has-position-${this.position}`);
+    } else if (hasReveal === true) {
       this.$content.addClass(`has-reveal-${this.position}`);
     }
   }