Merge branch 'feature/#22-dialog-element' into 'master'

feature: use dialog element as view #22 See merge request !10

Merge branch 'feature/#22-dialog-element' into 'master'
feature: use dialog element as view #22 See merge request !10
2196d04c · Clément · 09f03827 · a3065619 · 2196d04c · 2196d04c
Commit 2196d04c authored Mar 12, 2019 by Clément
Hide whitespace changes
Inline Side-by-side

Showing with 68 additions and 2 deletions

examples/dialog.html examples/dialog.html +55 -0

index.html index.html +1 -0

src/sib-route.js src/sib-route.js +12 -2

No files found.
--- a/examples/dialog.html
+++ b/examples/dialog.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">2nd page</sib-route>
+      <sib-route name="page3">3rd page</sib-route>
+    </sib-router>
+
+    <dialog id="page1">
+      <h1>Page 1</h1>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis,
+        commodi.</p>
+      <sib-link next="page2">page 2 ></sib-link>
+    </dialog>
+
+    <dialog id="page2">
+      <h1>Page 2</h1>
+      <p>Quos, suscipit pariatur! Nulla fugiat excepturi pariatur fuga delectus
+        corrupti.</p>
+      <sib-link next="page3">page 3 ></sib-link>
+    </dialog>
+
+    <dialog id="page3">
+      <h1>Page 3</h1>
+      <p>Rem, veniam repudiandae! Error repudiandae sapiente blanditiis natus
+        libero tenetur.</p>
+    </dialog>
+  </body>
+</html>
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@
      <li><a href="examples/sub-menu.html">sub-menu</a></li>
      <li><a href="examples/no-route-name.html">no-route-name</a></li>
      <li><a href="examples/keep-url.html">keep-url</a></li>
+      <li><a href="examples/dialog.html">dialog</a></li>
    </ul>
  </body>
 </html>
--- a/src/sib-route.js
+++ b/src/sib-route.js
@@ -67,7 +67,13 @@ export default class SIBRoute extends HTMLElement {
        router.display();
    }
    activate() {
-        this.view.removeAttribute('hidden');
+        if ('HTMLDialogElement' in window && this.view instanceof window.HTMLDialogElement){
+            if(!this.view.hasAttribute('open')) {
+                this.view.showModal();
+            }
+        } else {
+            this.view.removeAttribute('hidden');
+        }
        this.setAttribute('active', '');
        this.updateResource();

@@ -76,7 +82,11 @@ export default class SIBRoute extends HTMLElement {
            this.updateSubrouter(router);
    }
    hide() {
-        this.view.setAttribute('hidden', '');
+        if ('HTMLDialogElement' in window && this.view instanceof window.HTMLDialogElement){
+            this.view.close()
+        } else {
+            this.view.setAttribute('hidden', '');
+        }
        this.removeAttribute('active');
    }
 }