fix: fix Off-canvas `revealOn` option when used with `revealClass` option

Note: this add a new core utility `RegExpEscape`

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 7685c11ce840c1ac88727b533eebd16335f7dc11..a9bcdffbae23d0fda029dca918542a6080ce0b23 100644 (file)
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -3,7 +3,7 @@
 import $ from 'jquery';
 import { Keyboard } from './foundation.util.keyboard';
 import { MediaQuery } from './foundation.util.mediaQuery';
-import { transitionend } from './foundation.util.core';
+import { transitionend, RegExpEscape } from './foundation.util.core';
 import { Plugin } from './foundation.plugin';
 
 import { Triggers } from './foundation.util.triggers';
@@ -118,12 +118,16 @@ class OffCanvas extends Plugin {
       }
     }
 
-    this.options.isRevealed = this.options.isRevealed || new RegExp(this.options.revealClass, 'g').test(this.$element[0].className);
+    // Get the revealOn option from the class.
+    var revealOnClass = this.$element[0].className.match(RegExpEscape(this.options.revealClass) + '([^\s])+', 'g');
+    if (revealOnClass) {
+      this.options.isRevealed = true;
+      this.options.revealOn = this.options.revealOn || revealOnClass[1];
+    }
 
-    // Get the revealOn option from the class / ensure the `reveal-on-*` class is set.
-    if (this.options.isRevealed === true) {
-      this.options.revealOn = this.options.revealOn || this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split('-')[2];
-      if (this.options.revealOn) this.$element.first().addClass(`reveal-for-${this.options.revealOn}`);
+    // Ensure the `reveal-on-*` class is set.
+    if (this.options.isRevealed === true && this.options.revealOn) {
+      this.$element.first().addClass(`${this.options.revealClass}${this.options.revealOn}`);
       this._setMQChecker();
     }
 

diff --git a/js/foundation.util.core.js b/js/foundation.util.core.js
index 6ebda695f0f394a73f90515fef0483f6532fa774..23099a57fb51629da0cd9d6bdaeb740e6203d5f5 100644 (file)
--- a/js/foundation.util.core.js
+++ b/js/foundation.util.core.js
@@ -24,6 +24,18 @@ function GetYoDigits(length, namespace){
   return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1) + (namespace ? `-${namespace}` : '');
 }
 
+/**
+ * Escape a string so it can be used as a regexp pattern
+ * @function
+ * @see https://stackoverflow.com/a/9310752/4317384
+ *
+ * @param {String} str - string to escape.
+ * @returns {String} - escaped string
+ */
+function RegExpEscape(str){
+  return str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+}
+
 function transitionend($elem){
   var transitions = {
     'transition': 'transitionend',
@@ -49,4 +61,4 @@ function transitionend($elem){
   }
 }
 
-export {rtl, GetYoDigits, transitionend};
+export {rtl, GetYoDigits, RegExpEscape, transitionend};