From: Nicolas Coden <nicolas@ncoden.fr>
Date: Thu, 18 Jan 2018 10:29:51 +0000 (+0100)
Subject: fix: fix Off-canvas `revealOn` option when used with `revealClass` option
X-Git-Tag: v6.6.0~3^2~316^2~3
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a2d431a76602b399b6afa28f955b142abc7a90e7;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 7685c11ce..a9bcdffba 100644
--- 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 6ebda695f..23099a57f 100644
--- 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};