Commit 8813ab5d authored by Clément's avatar Clément

update sub-routers on connectedCallback

parent d6f0e0cc
......@@ -6,6 +6,15 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SIB test: sib-router</title>
<script type="module" src="../src/index.js"></script>
<a href="." id="reload">reload</a>
<script>
reload.href = location.pathname;
window.addEventListener('keydown', ev => {
if(!ev.ctrlKey || ev.key !== 'r') return;
ev.preventDefault();
reload.click();
});
</script>
<style>
sib-router {
display: block;
......@@ -26,47 +35,66 @@
</head>
<body>
<h1>Musical Instruments</h1>
<sib-link next="ukulele">→ Go to ukulele</sib-link>
<sib-router default-route="keyboard">
<sib-route name="keyboard">Keyboard</sib-route>
<sib-route name="string">String</sib-route>
<sib-route name="brass">Brass</sib-route>
</sib-router>
<div id="keyboard" hidden>
<sib-router default-route="piano">
<sib-route name="piano">Piano</sib-route>
<sib-route name="harpsichord">Harpsichord</sib-route>
<sib-route name="organ">Organ</sib-route>
<details>
<summary>use-hash</summary>
<h1>Musical Instruments</h1>
<sib-link next="ukulele">→ Go to ukulele</sib-link>
<sib-router default-route="keyboard" route-prefix="examples/sub-menu.html" use-hash>
<sib-route name="keyboard">Keyboard</sib-route>
<sib-route name="string">String</sib-route>
<sib-route name="brass">Brass</sib-route>
</sib-router>
<div hidden id="piano"><h2>Piano</h2></div>
<div hidden id="harpsichord"><h2>Harpsichord</h2></div>
<div hidden id="organ"><h2>Organ</h2></div>
</div>
<div id="string" hidden>
<sib-router default-route="violin">
<sib-route name="violin">Violin</sib-route>
<sib-route name="contrabass">Contrabass</sib-route>
<sib-route name="guitar">Guitar</sib-route>
<sib-route name="ukulele">Ukulele</sib-route>
</sib-router>
<div hidden id="violin"><h2>Violin</h2></div>
<div hidden id="contrabass"><h2>Contrabass</h2></div>
<div hidden id="guitar"><h2>Guitar</h2></div>
<div hidden id="ukulele"><h2>Ukulele</h2></div>
</div>
<div id="keyboard" hidden>
<sib-router default-route="piano" route-prefix="titi" use-hash>
<sib-route name="piano">Piano</sib-route>
<sib-route name="harpsichord">Harpsichord</sib-route>
<sib-route name="organ">Organ</sib-route>
</sib-router>
<div hidden id="piano"><h2>Piano</h2></div>
<div hidden id="harpsichord"><h2>Harpsichord</h2></div>
<div hidden id="organ"><h2>Organ</h2></div>
</div>
<div id="brass" hidden>
<sib-router default-route="trumpet">
<sib-route name="trumpet">Trumpet</sib-route>
<sib-route name="trombone">Trombone</sib-route>
<sib-route name="tuba">Tuba</sib-route>
</sib-router>
<div hidden id="trumpet"><h2>Trumpet</h2></div>
<div hidden id="trombone"><h2>Trombone</h2></div>
<div hidden id="tuba"><h2>Tuba</h2></div>
</div>
<div id="string" hidden>
<sib-router default-route="violin" use-hash>
<sib-route name="violin">Violin</sib-route>
<sib-route name="contrabass">Contrabass</sib-route>
<sib-route name="guitar">Guitar</sib-route>
<sib-route name="ukulele">Ukulele</sib-route>
</sib-router>
<div hidden id="violin"><h2>Violin</h2></div>
<div hidden id="contrabass"><h2>Contrabass</h2></div>
<div hidden id="guitar"><h2>Guitar</h2></div>
<div hidden id="ukulele"><h2>Ukulele</h2></div>
</div>
<div id="brass" hidden>
<sib-router default-route="trumpet" use-hash>
<sib-route name="trumpet">Trumpet</sib-route>
<sib-route name="trombone">Trombone</sib-route>
<sib-route name="tuba">Tuba</sib-route>
</sib-router>
<div hidden id="trumpet"><h2>Trumpet</h2></div>
<div hidden id="trombone"><h2>Trombone</h2></div>
<div hidden id="tuba"><h2>Tuba</h2></div>
</div>
</details>
<script>
const details0 = document.querySelector('details');
const details = details0.cloneNode(true);
details.querySelector('summary').textContent = 'no use-hash';
Array.from(details.querySelectorAll('[use-hash]')).forEach(elm =>
elm.removeAttribute('use-hash'),
);
['default-route', 'name', 'id', 'next'].forEach(attr => {
Array.from(details.querySelectorAll(`[${attr}]`)).forEach(elm => {
elm.setAttribute(attr, '_' + elm.getAttribute(attr));
});
});
details0.parentElement.insertBefore(details, details0.nextSibling);
</script>
</body>
</html>
......@@ -4,6 +4,11 @@ export default class SIBRoute extends HTMLElement {
}
connectedCallback() {
this.addEventListener('click', event => this.router.navigate(this.name));
// Resetting all routers within the selected view
Promise.resolve().then(() => {
this.updateSubRouters();
});
}
get name() {
......@@ -27,10 +32,9 @@ export default class SIBRoute extends HTMLElement {
return this.closest('sib-router');
}
get resourceId() {
if(this.router.currentURL.split('/')[1]) {
return this.decodeId(this.router.currentURL.split('/')[1]);
}
return '';
const id = this.router.currentURL.split('/')[1];
if(!id) return '';
return this.decodeId(id);
}
encodeId(id) {
......@@ -62,9 +66,12 @@ export default class SIBRoute extends HTMLElement {
}
}
}
updateSubrouter(router) {
router.setAttribute('route-prefix', this.getPath(this.router.prefix, this.name, this.resourceId));
router.display();
updateSubRouters() {
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){
......@@ -76,10 +83,7 @@ export default class SIBRoute extends HTMLElement {
}
this.setAttribute('active', '');
this.updateResource();
// Reseting all routers within the selected view
for(let router of this.view.querySelectorAll('sib-router'))
this.updateSubrouter(router);
this.updateSubRouters();
}
hide() {
if ('HTMLDialogElement' in window && this.view instanceof window.HTMLDialogElement){
......
export default class SIBRouter extends HTMLElement {
constructor() {
super();
window.addEventListener('popstate', event => this.display());
window.addEventListener('requestNavigation', event => {
this.navigate(event.detail.route, event.detail.resource);
})
window.addEventListener('DOMContentLoaded', event => this.display());
window.addEventListener('popstate', () => this.display());
window.addEventListener('requestNavigation', event =>
this.navigate(event.detail.route, event.detail.resource))
window.addEventListener('DOMContentLoaded', () => this.display());
}
get useHash() {
return this.hasAttribute('use-hash');
......@@ -20,11 +19,14 @@ export default class SIBRouter extends HTMLElement {
return this.getAttribute('default-route') || '';
}
get currentURL() {
let url = (this.useHash ? location.hash : location.pathname).slice(1);
if(url.startsWith(this.prefix))
url = url.slice(this.prefix.length);
if(url.startsWith('/'))
let url = this.useHash ? location.hash : location.pathname;
url = url.slice(1);
if(url.startsWith(this.prefix)) {
url = url.slice(this.prefix.length);
}
if(url.startsWith('/')) {
url = url.slice(1);
}
return url;
}
get currentRouteName() {
......@@ -36,12 +38,14 @@ export default class SIBRouter extends HTMLElement {
display(routeName = this.currentRouteName, resource) {
this.dispatchEvent(new CustomEvent('navigate', {detail: {route: routeName, resource}}));
for(let route of this.routes)
if(routeName == route.name)
for(let route of this.routes){
if(routeName === route.name) {
this.dispatchEvent(new CustomEvent('navigate', {detail: {route: routeName, resource}}));
route.activate();
else
} else {
route.hide();
}
}
}
navigate(routeName = '', resource) {
let route
......@@ -53,18 +57,14 @@ export default class SIBRouter extends HTMLElement {
}
if(!route) return; //this route is not for me!
const id = resource ? resource['@id'] : null;
const path = route.getPath(this.prefix, routeName, id)
const path = route.getPath(this.prefix, routeName, id);
//update current URL
this.display(routeName, resource);
if(this.hasAttribute('keep-url')) return;
if(this.useHash)
window.location.hash = path;
else
history.pushState({}, routeName, '/' + path);
const prefix = this.useHash ? '#' : '/';
history.pushState({}, routeName, prefix + path);
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment