Use pull request #10868 from ncoden/fix/off-canvas-reveal-on-option-10867 for v6.5.0

ee3399bc1 Revert "fix: prevent side-effect from .stack-for in media-object"
594cf65aa fix: fix off-canvas option `revealOn` when used without classes #10867
23da69d1e test: add visual test for off-canvas revealOn option
5255360bd fix: fix merge fail in off-canvas
a2d431a76 fix: fix Off-canvas `revealOn` option when used with `revealClass` option
05697a06c fix: fix regexp check for revealClass option in Off-Canvas
72f7e40f7 feat: expose RegExpEscape
13202d033 test: add tests for `RegExpEscape`

Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

diff --git a/dist/js/npm.js b/dist/js/npm.js
index bad4323272a9d2cebd220f46481326f9c28759a1..c5702b300c8c65b6a37fbfbbfca43a9917b65d12 100644 (file)
--- a/dist/js/npm.js
+++ b/dist/js/npm.js
@@ -6,10 +6,11 @@ Foundation.addToJquery($);
 // Add Foundation Utils to Foundation global namespace for backwards
 // compatibility.
 
-import { rtl, GetYoDigits, transitionend } from '../../js/foundation.util.core';
+import { rtl, GetYoDigits, transitionend, RegExpEscape } from '../../js/foundation.util.core';
 Foundation.rtl = rtl;
 Foundation.GetYoDigits = GetYoDigits;
 Foundation.transitionend = transitionend;
+Foundation.RegExpEscape = RegExpEscape;
 
 import { Box } from '../../js/foundation.util.box'
 import { onImagesLoaded } from '../../js/foundation.util.imageLoader';

diff --git a/js/entries/foundation.js b/js/entries/foundation.js
index 71c6622241169df36658de5a4cf55625a8deb07c..e844645bbd98e5ee2d85e41243132549a532ac9f 100644 (file)
--- a/js/entries/foundation.js
+++ b/js/entries/foundation.js
@@ -6,10 +6,11 @@ Foundation.addToJquery($);
 // Add Foundation Utils to Foundation global namespace for backwards
 // compatibility.
 
-import { rtl, GetYoDigits, transitionend } from '../foundation.util.core';
+import { rtl, GetYoDigits, transitionend, RegExpEscape } from '../foundation.util.core';
 Foundation.rtl = rtl;
 Foundation.GetYoDigits = GetYoDigits;
 Foundation.transitionend = transitionend;
+Foundation.RegExpEscape = RegExpEscape;
 
 import { Box } from '../foundation.util.box'
 import { onImagesLoaded } from '../foundation.util.imageLoader';

diff --git a/js/entries/plugins/foundation.core.js b/js/entries/plugins/foundation.core.js
index ecfd89e3c17e4d814129cd314d45fa4709da0257..16b2556adb0b59a1e6487d72f091bcbb7e4bbc6a 100644 (file)
--- a/js/entries/plugins/foundation.core.js
+++ b/js/entries/plugins/foundation.core.js
@@ -6,10 +6,11 @@ Foundation.addToJquery($);
 // These are now separated out, but historically were a part of this module,
 // and since this is here for backwards compatibility we include them in
 // this entry.
-import {rtl, GetYoDigits, transitionend} from '../../foundation.util.core';
+import {rtl, GetYoDigits, transitionend, RegExpEscape} from '../../foundation.util.core';
 Foundation.rtl = rtl;
 Foundation.GetYoDigits = GetYoDigits;
 Foundation.transitionend = transitionend;
+Foundation.RegExpEscape = RegExpEscape;
 
 // Every plugin depends on plugin now, we can include that on the core for the
 // script inclusion path.

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 9fbb0bc0341b6006803b6deebc6dc4f52d2487bd..995bf91d4036568f3e865a33f5dbd0cb6faa64f8 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,10 +118,17 @@ 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 revealOnRegExp = new RegExp(RegExpEscape(this.options.revealClass) + '([^\\s]+)', 'g');
+    var revealOnClass = revealOnRegExp.exec(this.$element[0].className);
+    if (revealOnClass) {
+      this.options.isRevealed = true;
+      this.options.revealOn = this.options.revealOn || revealOnClass[1];
+    }
 
-    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];
+    // 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};

diff --git a/test/javascript/util/core.js b/test/javascript/util/core.js
index b2cba9aa002aefa710ff060251c2e57aee88ab72..cd78116a8794e690c361e33db425df77d53265c2 100644 (file)
--- a/test/javascript/util/core.js
+++ b/test/javascript/util/core.js
@@ -69,6 +69,17 @@ describe('Foundation core', function() {
     });
   });
 
+  describe('RegExpEscape()', function() {
+    it('escape all special characters in a string for RegExp', function () {
+      const str = 'abc012-[]{}()*+?.,\\^$|#\s\t\r\n';
+      const notstr = 'abc012-[]{}not-the-escaped-string';
+      const reg = new RegExp(Foundation.RegExpEscape(str), 'g');
+
+      reg.test(str).should.be.true;
+      reg.test(notstr).should.be.false;
+    });
+  });
+
   describe('reflow()', function() {
   });
 

diff --git a/test/visual/offcanvas/reveal-on-option.html b/test/visual/offcanvas/reveal-on-option.html
new file mode 100644 (file)
index 0000000..f33c05f
--- /dev/null
+++ b/test/visual/offcanvas/reveal-on-option.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Off canvas revealOn option</title>
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="grid-x grid-padding-x">
+      <div class="cell">
+        <div class="off-canvas-wrapper">
+
+          <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-is-revealed="true" data-reveal-on="large">
+            <button class="close-button" aria-label="Close panel" type="button" data-close>
+              <span aria-hidden="true">&times;</span>
+            </button>
+            <h3>This is a left off-canvas panel with <code>[data-reveal-on="large"]</code>. It should reveal on large and up screens.</h3>
+          </div>
+
+          <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-is-revealed="true" data-reveal-on="medium">
+            <button class="close-button" aria-label="Close panel" type="button" data-close>
+              <span aria-hidden="true">&times;</span>
+            </button>
+            <h3>This is a right off-canvas panel with a <code>[data-reveal-on="medium"]</code> class. It should reveal on medium and up screens.</h3>
+          </div>
+
+          <div class="off-canvas-content" data-off-canvas-content>
+            <div class="row column">
+
+              <div class="button-group expanded">
+                <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
+                <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
+              </div>
+
+              <h1>This test demonstrates the [reveal-on] option.</h1>
+
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
+              Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+
+              Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+
+              Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
+              Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+
+              Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+
+              Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
+              Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+
+              Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+
+              Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+            </div>
+            </div>
+
+        </div>
+      </div>
+    </div>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>

diff --git a/test/visual/offcanvas/reveal.html b/test/visual/offcanvas/reveal.html
index 73593d3e5853f8bd1870f30cfcaca715743db9e0..739460b47163d44888c757761b93dfd1bb260ab7 100644 (file)
--- a/test/visual/offcanvas/reveal.html
+++ b/test/visual/offcanvas/reveal.html
@@ -17,14 +17,14 @@
             <button class="close-button" aria-label="Close panel" type="button" data-close>
               <span aria-hidden="true">&times;</span>
             </button>
-            <h3>This is a left off-canvas panel. It should reveal on large and up screens.</h3>
+            <h3>This is a left off-canvas panel with a <code>reveal-for-large</code> class. It should reveal on large and up screens.</h3>
           </div>
 
           <div class="off-canvas position-right reveal-for-medium" id="offCanvasRight" data-off-canvas>
             <button class="close-button" aria-label="Close panel" type="button" data-close>
               <span aria-hidden="true">&times;</span>
             </button>
-            <h3>This is a right off-canvas panel. It should reveal on medium and up screens.</h3>
+            <h3>This is a right off-canvas panel with a <code>reveal-for-medium</code> class. It should reveal on medium and up screens.</h3>
           </div>
 
           <div class="off-canvas-content" data-off-canvas-content>