]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: d825292)
Use pull request #11093 from ncoden/fix/nested-reveal-deep-link-history-8012 for...
authorNicolas Coden <nicolas@ncoden.fr>
Sat, 16 Jun 2018 07:42:41 +0000 (09:42 +0200)
committerNicolas Coden <nicolas@ncoden.fr>
Sat, 16 Jun 2018 07:42:41 +0000 (09:42 +0200)
42d267a29 fix: update history when closing Reveal with `replaceState` #8012
88c08bd98 fix: prevent Reveal opening with its hash already set to add history entry
d5fe11436 tests: add visual tests for nested Reveal with deep-linking

Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>
js/foundation.reveal.js patch | blob | blame | history
test/visual/reveal/nested-deep-link.html [new file with mode: 0644] patch | blob

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index 02fe2b950c43e57676ec2064dc149021adeca72d..a68d6d8824c39499da2b00fd4a67326f04459735 100644 (file)
--- a/js/foundation.reveal.js
+++ b/js/foundation.reveal.js
@@ -217,8 +217,8 @@ class Reveal extends Plugin {
    */
   open() {
     // either update or replace browser history
-    if (this.options.deepLink) {
-      var hash = `#${this.id}`;
+    const hash = `#${this.id}`;
+    if (this.options.deepLink && window.location.hash !== hash) {
 
       if (window.history.pushState) {
         if (this.options.updateHistory) {
@@ -438,13 +438,20 @@ class Reveal extends Plugin {
     }
 
     this.isActive = false;
-     if (_this.options.deepLink) {
-       if (window.history.replaceState) {
-         window.history.replaceState('', document.title, window.location.href.replace(`#${this.id}`, ''));
-       } else {
-         window.location.hash = '';
-       }
-     }
+    // If deepLink and we did not switched to an other modal...
+    if (_this.options.deepLink && window.location.hash === `#${this.id}`) {
+      // Remove the history hash
+      if (window.history.replaceState) {
+        const urlWithoutHash = window.location.pathname + window.location.search;
+        if (this.options.updateHistory) {
+          window.history.pushState({}, '', urlWithoutHash); // remove the hash
+        } else {
+          window.history.replaceState('', document.title, urlWithoutHash);
+        }
+      } else {
+        window.location.hash = '';
+      }
+    }
 
     this.$activeAnchor.focus();
   }
diff --git a/test/visual/reveal/nested-deep-link.html b/test/visual/reveal/nested-deep-link.html
new file mode 100644 (file)
index 0000000..cfce4bb
--- /dev/null
+++ b/test/visual/reveal/nested-deep-link.html
@@ -0,0 +1,67 @@
+<!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>Foundation for Sites Testing</title>
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Reveal: Nested modals with Deep linking</h1>
+
+          <p>When going back in history after closing the last modal, modals should all reapear in the reverse order.</p>
+
+          <p><button class="button" data-open="exampleModal1">Click me for modal 1</button></p>
+
+          <!-- This is the first modal -->
+          <div class="reveal" id="exampleModal1" data-reveal data-deep-link="true" data-update-history="true">
+            <h1>Modal 1</h1>
+            <button class="button" data-open="exampleModal2">Click me for modal 2</button>
+            <button class="close-button" data-close aria-label="Close reveal" type="button">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+
+          <!-- This is the nested modal -->
+          <div class="reveal" id="exampleModal2" data-reveal data-deep-link="true" data-update-history="true">
+            <h2>Modal 2</h2>
+            <button class="button" data-open="exampleModal3">Click me for modal 3</button>
+            <button class="close-button" data-close aria-label="Close reveal" type="button">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+
+          <!-- This is the nested modal -->
+          <div class="reveal" id="exampleModal3" data-reveal data-deep-link="true" data-update-history="true">
+            <h2>Modal 3</h2>
+            <button class="button" data-open="exampleModal4">Click me for modal 4</button>
+            <button class="close-button" data-close aria-label="Close reveal" type="button">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+
+          <!-- This is the nested modal -->
+          <div class="reveal" id="exampleModal4" data-reveal data-deep-link="true" data-update-history="true">
+            <h2>Modal 4</h2>
+            <p>Close me, then go back in history. I should reappear, then modals 3, 2 and 1...</p>
+            <button class="close-button" data-close aria-label="Close reveal" type="button">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
Mirror of https://github.com/foundation/foundation-sites.git