Merge branch 'feature/#19-navigate-type' into 'master'

feature: #19 requestNavigation without routeName See merge request !7

Merge branch 'feature/#19-navigate-type' into 'master'
feature: #19 requestNavigation without routeName See merge request !7
a76fd57b · Clément · 58fb751c · 2005b353 · a76fd57b · a76fd57b
Commit a76fd57b authored Mar 08, 2019 by Clément
Hide whitespace changes
Inline Side-by-side

Showing with 70 additions and 1 deletion

examples/no-route-name.html examples/no-route-name.html +61 -0

index.html index.html +1 -0

src/sib-router.js src/sib-router.js +8 -1

No files found.
--- a/examples/no-route-name.html
+++ b/examples/no-route-name.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>SIB test: sib-router</title>
+    <script type="module" src="../src/index.js"></script>
+    <style>
+      sib-router {
+        display: block;
+        text-align: center;
+      }
+      sib-route,
+      sib-link {
+        display: inline-block;
+        padding: 0.5em;
+        margin: 0.2em;
+        background-color: #ccc;
+        cursor: pointer;
+      }
+      [active]{
+        background-color: #afa;
+      }
+    </style>
+  </head>
+
+  <body>
+    <sib-router default-route="page1" use-hash>
+      <sib-route name="page1">1st page</sib-route>
+      <sib-route name="page2" rdf-type="doap:project">2nd page</sib-route>
+    </sib-router>
+
+    <div id="page1" hidden>
+      <h1>Page 1</h1>
+      <p>Launch navigation event without routeName, but only resource</p>
+      <button id="nextPage">requestNavigation</sib-link>
+    </div>
+
+    <div id="page2" hidden>
+      <h1>Page 2</h1>
+      <p>Quos, suscipit pariatur! Nulla fugiat excepturi pariatur fuga delectus
+        corrupti.</p>
+    </div>
+
+
+    <script>
+      nextPage.onclick = () => {
+        window.dispatchEvent(
+          new CustomEvent('requestNavigation', {
+            detail: {
+              resource: {
+                '@type': 'doap:project'
+              }
+            }
+          }),
+        );
+      }
+    </script>
+  </body>
+</html>
--- a/index.html
+++ b/index.html
@@ -23,6 +23,7 @@
    <ul>
      <li><a href="examples/basic.html">basic</a></li>
      <li><a href="examples/sub-menu.html">sub-menu</a></li>
+      <li><a href="examples/no-route-name.html">no-route-name</a></li>
    </ul>
  </body>
 </html>
--- a/src/sib-router.js
+++ b/src/sib-router.js
@@ -44,7 +44,14 @@ export default class SIBRouter extends HTMLElement {
                route.hide();
    }
    navigate(routeName = '', resource) {
-        const route = this.querySelector('sib-route[name="'+routeName+'"]');
+        let route
+        if(routeName) {
+            route = this.querySelector('sib-route[name="'+routeName+'"]');
+        } else if (!routeName && resource && resource['@type']) {
+            route = this.querySelector('sib-route[rdf-type="'+resource['@type']+'"]');
+            routeName = route ? route.attributes.name.value : null
+        }
+
        if(!route) return; //this route is not for me!

        const id = resource ? resource['@id'] : null;