Work over _addContentClasses() and _removeContentClasses() so classes get toggled...

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 fa2dd30a5dd098bb32893450e2edd8feeb49b84d..9fbb0bc0341b6006803b6deebc6dc4f52d2487bd 100644 (file)
--- 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}`);
     }
   }