Add simple test page for client-side navigation

1fb12c8c · Robert Knight · c0e02670 · 1fb12c8c · 1fb12c8c
Commit 1fb12c8c authored Jul 04, 2022 by Robert Knight
Show whitespace changes
Inline Side-by-side

Showing with 63 additions and 0 deletions

client-side-navigation.mustache dev-server/documents/html/client-side-navigation.mustache +62 -0

index.mustache dev-server/templates/index.mustache +1 -0

No files found.
--- a/dev-server/documents/html/client-side-navigation.mustache
+++ b/dev-server/documents/html/client-side-navigation.mustache
+<!doctype>
+<html>
+  <title>Client-side navigation test</title>
+  <body>
+  <h1 id="header"></h1>
+  <p id="intro"></p>
+  <hr>
+  <p id="content"></p>
+  <hr>
+  <div id="navLinks">
+    <!-- Omit page param for Page 1, otherwise we'd need a rel-canonical link
+         to make `page=1` equivalent to not setting the param. -->
+    <a href="client-side-navigation">Page 1</a>
+    <a href="client-side-navigation?page=2">Page 2</a>
+    <a href="client-side-navigation?page=3">Page 3</a>
+  </div>
+  <div style="padding-top: 10px;">
+    <label for="replaceStateCheckbox">Use <code>replaceState</code> instead of <code>pushState</code>?</label><input type="checkbox" id="replaceStateCheckbox">
+  </div>
+  <script type="module">
+    const pageContent = [
+      'Some extra content that is only on the first page.',
+      'Word that only appear on the second page.',
+      'Thoughts on the third page',
+    ];
+    const setContent = (url) => {
+      const page = new URL(url).searchParams.get('page') ?? 1;
+      const header = document.querySelector('#header');
+      const intro = document.querySelector('#intro');
+      const content = document.querySelector('#content');
+      header.textContent = `Page ${page}`;
+      intro.textContent =
+        `You are currently on page ${page}. Use the links below to perform a
+         client-side navigation and then try using Back/Forwards.`;
+      const pageText = pageContent[parseInt(page) - 1];
+      content.textContent = pageText || '';
+    };
+    const replaceStateCheckbox = document.querySelector('#replaceStateCheckbox');
+    const navLinks = document.querySelector('#navLinks');
+    navLinks.addEventListener('click', e => {
+      e.preventDefault();
+      if (e.target.href) {
+        if (replaceStateCheckbox.checked) {
+          history.replaceState({}, null, e.target.href);
+        } else {
+          history.pushState({}, null, e.target.href);
+        }
+        setContent(e.target.href);
+      }
+    });
+    setContent(location.href);
+    window.addEventListener('popstate', () => setContent(location.href));
+  </script>
+  {{{ hypothesisScript }}}
+  </body>
+</html>
--- a/dev-server/templates/index.mustache
+++ b/dev-server/templates/index.mustache
@@ -27,6 +27,7 @@
    <h3>Scenario HTML test documents</h3>
    <p>These documents test less common scenarios and edge cases.</p>
    <ul>
+      <li><a href="/document/client-side-navigation">Client-side navigation / SPA</a></li>
      <li><a href="/document/z-index">Content with high <code>z-index</code> style</a></li>
      <li><a href="/document/shadow-dom">Content in shadow DOM</a></li>
      <li><a href="/document/coop-test"><code>Cross-Origin-Opener-Policy</code> test</a></li>