src/sib-link.js

@@ -4,9 +4,9 @@ export default class SIBLink extends HTMLElement {
     this.addEventListener('click', event => this.trigger());
   }
   trigger() {
-        const route = this.getAttribute('next')
-        const resource = this.dataset.src && { '@id': this.dataset.src }
-        if(!route && !resource) return;
+    const route = this.getAttribute('next');
+    const resource = this.dataset.src && { '@id': this.dataset.src };
+    if (!route && !resource) return;
     this.dispatchEvent(
       new CustomEvent('requestNavigation', {
         bubbles: true,

src/sib-route.js

@@ -12,23 +12,23 @@ export default class SIBRoute extends HTMLElement {
   set name(name) {
     this.setAttribute('name', name);
   }
-    get view(){
+  get view() {
     const view = document.getElementById(this.name);
-        if(!view) {
+    if (!view) {
       throw new Error(`view "#${this.name}" is not in document`);
     }
     this.view = view;
     return view;
   }
   set view(value) {
-        Object.defineProperty(this, 'view', {value});
+    Object.defineProperty(this, 'view', { value });
   }
   get router() {
     return this.closest('sib-router');
   }
   get resourceId() {
     const id = this.router.currentURL.split('/')[1];
-        if(!id || !id.startsWith('@')) return '';
+    if (!id || !id.startsWith('@')) return '';
     return this.decodeId(id);
   }
 
@@ -38,7 +38,7 @@ export default class SIBRoute extends HTMLElement {
   }
 
   decodeId(id) {
-        if(!id) return '';
+    if (!id) return '';
     return decodeURIComponent(id.replace(/^@/, ''));
   }
 
@@ -47,25 +47,32 @@ export default class SIBRoute extends HTMLElement {
     return [prefix, name, encodedId].filter(s => s).join('/');
   }
   updateResource() {
-        if(this.resourceId) {
-            if(this.view.hasAttribute('bind-resources')) {
+    if (this.resourceId) {
+      if (this.view.hasAttribute('bind-resources')) {
         this.view.setAttribute('data-src', this.resourceId);
       }
-            for(let element of this.view.querySelectorAll('[bind-resources]')) {
+      for (let element of this.view.querySelectorAll('[bind-resources]')) {
         element.setAttribute('data-src', this.resourceId);
       }
     }
   }
   updateSubRouters() {
-        for(let router of this.view.querySelectorAll('sib-router')){
-            const routePrefix = this.getPath(this.router.prefix, this.name, this.resourceId);
+    for (let router of this.view.querySelectorAll('sib-router')) {
+      const routePrefix = this.getPath(
+        this.router.prefix,
+        this.name,
+        this.resourceId,
+      );
       router.setAttribute('route-prefix', routePrefix);
       router.display();
     }
   }
   activate() {
-        if ('HTMLDialogElement' in window && this.view instanceof window.HTMLDialogElement){
-            if(!this.view.hasAttribute('open')) {
+    if (
+      'HTMLDialogElement' in window &&
+      this.view instanceof window.HTMLDialogElement
+    ) {
+      if (!this.view.hasAttribute('open')) {
         this.view.showModal();
       }
     } else {
@@ -76,8 +83,11 @@ export default class SIBRoute extends HTMLElement {
     this.updateSubRouters();
   }
   hide() {
-        if ('HTMLDialogElement' in window && this.view instanceof window.HTMLDialogElement){
-            this.view.close()
+    if (
+      'HTMLDialogElement' in window &&
+      this.view instanceof window.HTMLDialogElement
+    ) {
+      this.view.close();
     } else {
       this.view.setAttribute('hidden', '');
     }

src/sib-router.js

@@ -2,8 +2,8 @@ export default class SIBRouter extends HTMLElement {
   constructor() {
     super();
     window.addEventListener('popstate', () => this.display());
-        window.addEventListener('requestNavigation', ({detail}) => 
-            this.navigate(detail.route, detail.resource, detail.keepURL)
+    window.addEventListener('requestNavigation', ({ detail }) =>
+      this.navigate(detail.route, detail.resource, detail.keepURL),
     );
     window.addEventListener('DOMContentLoaded', () => {
       for (const route of this.routes) {
@@ -17,8 +17,7 @@ export default class SIBRouter extends HTMLElement {
   }
   get prefix() {
     let prefix = this.getAttribute('route-prefix') || '';
-        if(prefix.slice(-1) == '/')
-            prefix = prefix.slice(0, -1);
+    if (prefix.slice(-1) == '/') prefix = prefix.slice(0, -1);
     return prefix;
   }
   get defaultRoute() {
@@ -27,7 +26,7 @@ export default class SIBRouter extends HTMLElement {
   get currentURL() {
     let url = this.useHash ? location.hash : location.pathname;
     url = url.slice(1);
-        if(url.startsWith(this.prefix)) {
+    if (url.startsWith(this.prefix)) {
       url = url.slice(this.prefix.length);
     }
     return stripSlashes(url);
@@ -39,11 +38,14 @@ export default class SIBRouter extends HTMLElement {
     return this.querySelectorAll('sib-route');
   }
 
-
   display(routeName = this.currentRouteName, resource) {
-        for(let route of this.routes) {
-            if(routeName === route.name) {
-                this.dispatchEvent(new CustomEvent('navigate', {detail: {route: routeName, resource}}));
+    for (let route of this.routes) {
+      if (routeName === route.name) {
+        this.dispatchEvent(
+          new CustomEvent('navigate', {
+            detail: { route: routeName, resource },
+          }),
+        );
         route.activate();
       } else {
         route.hide();
@@ -51,27 +53,31 @@ export default class SIBRouter extends HTMLElement {
     }
   }
   navigate(routeName = '', resource, keepURL) {
-        let route
-        if(routeName) {
-            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
+      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!
-        if(this.prefix) {
+    if (!route) return; //this route is not for me!
+    if (this.prefix) {
       const route = this.prefix.split('/').pop();
       setTimeout(() => {
-                this.dispatchEvent(new CustomEvent('requestNavigation', {
-                    detail: {route: route, keepURL: true},
+        this.dispatchEvent(
+          new CustomEvent('requestNavigation', {
+            detail: { route: route, keepURL: true },
             bubbles: true,
-                }))
+          }),
+        );
       });
     }
     const id = resource ? resource['@id'] : null;
     const path = route.getPath(this.prefix, routeName, id);
-        if(!keepURL && !this.hasAttribute('keep-url')) {
+    if (!keepURL && !this.hasAttribute('keep-url')) {
       //update current URL
       const prefix = this.useHash ? '#' : '/';
       history.pushState({}, routeName, prefix + path);