feat: support search and hash strings in Router.go (#400)

* feat: support search and hash strings in Router.go Connected to #56
vaadin · Oct 3, 2019 · 63ee8d6 · 63ee8d6
1 parent 9341511
commit 63ee8d6
Show file tree

Hide file tree

Showing 12 changed files with 611 additions and 152 deletions.
diff --git a/analysis.json b/analysis.json
diff --git a/demo/vaadin-router-redirect-demos.html b/demo/vaadin-router-redirect-demos.html
@@ -115,6 +115,32 @@ <h3>Navigation from JavaScript</h3>
       static <a target="_parent" href="..#/classes/Router#staticmethod-go"><code>
       Router.go('/to/path')</code></a> method on the Vaadin.Router class.
     </p>
+    <p>
+      You can optionally pass search query string and hash to the method, either
+      as in-app URL string:
+    </p>
+    <marked-element>
+      <script type="text/markdown">
+        ```js
+        Router.go('/to/path?paramName=value#sectionName');
+        ```
+      </script>
+    </marked-element>
+      ... or using an object with named parameters:
+    </p>
+    <marked-element>
+      <script type="text/markdown">
+        ```js
+        Router.go({
+          pathname: '/to/path',
+          // optional
+          search: '?paramName=value',
+          // optional
+          hash: '#sectionName'
+        });
+        ```
+      </script>
+    </marked-element>
     <vaadin-demo-snippet id="vaadin-router-redirect-demos-3" iframe-src="iframe.html">
       <template preserve-content>
         <button id="trigger">Open <code>/user/you-know-who</code></button>
@@ -139,13 +165,22 @@ <h3>Navigation from JavaScript</h3>
     <p>
       NOTE: the same effect can be achieved by dispatching a <code>
       vaadin-router-go</code> custom event on the <code>window</code>. The
-      target path should be provided as <code>event.detail.pathname</code>.
+      target path should be provided as <code>event.detail.pathname</code>,
+      the search and hash strings can be optionally provided
+      with <code>event.detail.search</code> and <code>event.detail.hash</code>
+      properties respectively.
     </p>
     <marked-element>
       <script type="text/markdown">
         ```js
         window.dispatchEvent(
-          new CustomEvent('vaadin-router-go', {detail: {pathname: '/to/path'}}));
+          new CustomEvent('vaadin-router-go', {detail: {
+            pathname: '/to/path',
+            // optional search query string
+            search: '?paramName=value',
+            // optional hash string
+            hash: '#sectionName'
+          }}));
         ```
       </script>
     </marked-element>

diff --git a/demo/vaadin-router-url-generation-demos.html b/demo/vaadin-router-url-generation-demos.html
@@ -223,6 +223,69 @@ <h3>Base URL in URL generation</h3>
         </script>
       </template>
     </vaadin-demo-snippet>
+
+    <h3>Generating URLs with search query parameters and hash string</h3>
+    <p>
+      At the moment, Vaadin Router does not provide URL generation APIs for
+      appending search query parameters or hash strings to the generated URLs.
+      However, you could append those with string concatenation.
+    </p>
+    <p>
+      For serialising parameters into a query string, use the native
+      <code>URLSearchParams</code> API.
+    </p>
+    <p>
+      Note: The <code>URLSearchParams</code> API is absent in IE 11, make sure
+      to have <a href="#">the <code>URLSearchParams</code> polyfill</a>.
+    </p>
+    <vaadin-demo-snippet id="vaadin-router-url-generation-demo-search-hash" iframe-src="iframe.html">
+      <template preserve-content>
+        <div id="outlet"></div>
+        <dom-module id="pages-menu">
+          <template>
+            <nav>
+              Pages:
+              <dom-repeat items='[1, 2, 3, 4, 5]' as="pageNumber">
+                <template>
+                  <a href="[[_urlForPageNumber(location, pageNumber)]]">[[pageNumber]]</a>
+                </template>
+              </dom-repeat>
+            </nav>
+            <nav>
+              Sections:
+              <a href="[[_urlForSection(location, 'summary')]]">Summary</a>
+              <a href="[[_urlForSection(location, 'footnotes')]]">Footnotes</a>
+            </nav>
+          </template>
+        </dom-module>
+        <script>
+          // import {Router} from '@vaadin/router'; // for Webpack / Polymer CLI
+          // const Router = Vaadin.Router; // for vaadin-router.umd.js
+
+          class PagesMenuElement extends Polymer.Element {
+            static get is() {
+              return 'pages-menu';
+            }
+
+            _urlForPageNumber(location, pageNumber) {
+              const query = new URLSearchParams({page: pageNumber}).toString();
+              return location.getUrl() + '?' + query;
+            }
+
+            _urlForSection(location, section) {
+              return location.getUrl() + '#' + section;
+            }
+          }
+          customElements.define(PagesMenuElement.is, PagesMenuElement);
+
+          const router = new Router(document.getElementById('outlet'));
+          router.setRoutes([
+            {path: '/', component: 'pages-menu'},
+          ]);
+        </script>
+      </template>
+    </vaadin-demo-snippet>
+
   </template>
   <script>
     class VaadinRouterLinkGenerationDemos extends DemoReadyEventEmitter(ElementDemo(Polymer.Element)) {