...
 
Commits (3)
<!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="https://unpkg.com/@startinblox/core@0.7"></script>
<script type="module" src="../src/index.js"></script>
</head>
<body>
<sib-router keep-url>
<sib-route use-id name="popupevent"></sib-route>
</sib-router>
<sib-display
data-src="https://api.test-paris.happy-dev.fr/users/"
data-fields="name"
next="popupevent"
>
</sib-display>
<dialog id="popupevent">
<sib-display bind-resources data-fields="name"></sib-display>
</dialog>
</div>
</body>
</html>
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
<li><a href="examples/sub-menu.html">sub-menu</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> <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/keep-url.html">keep-url</a></li>
<li><a href="examples/keep-url-id.html">keep-url + id</a></li>
<li><a href="examples/dialog.html">dialog</a></li> <li><a href="examples/dialog.html">dialog</a></li>
<li><a href="examples/route-with-id.html">route-with-id</a></li> <li><a href="examples/route-with-id.html">route-with-id</a></li>
</ul> </ul>
......
...@@ -59,28 +59,29 @@ export default class SIBRoute extends HTMLElement { ...@@ -59,28 +59,29 @@ export default class SIBRoute extends HTMLElement {
const encodedId = this.encodeId(id); const encodedId = this.encodeId(id);
return [prefix, name, encodedId].filter(s => s).join('/'); return [prefix, name, encodedId].filter(s => s).join('/');
} }
updateResource() { updateResource(id = null) {
if (this.resourceId) { const resourceId = id || this.resourceId;
if (resourceId) {
if (this.view.hasAttribute('bind-resources')) { if (this.view.hasAttribute('bind-resources')) {
this.view.setAttribute('data-src', this.resourceId); this.view.setAttribute('data-src', 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); element.setAttribute('data-src', resourceId);
} }
} }
} }
updateSubRouters() { updateSubRouters(id = null) {
for (let router of this.view.querySelectorAll('sib-router')) { for (let router of this.view.querySelectorAll('sib-router')) {
const routePrefix = this.getPath( const routePrefix = this.getPath(
this.router.prefix, this.router.prefix,
this.name, this.name,
this.resourceId, id || this.resourceId,
); );
router.setAttribute('route-prefix', routePrefix); router.setAttribute('route-prefix', routePrefix);
router.display(); router.display();
} }
} }
activate(keepURL=false) { activate(id=null, keepURL=false) {
if (this.view.tagName === 'DIALOG') { if (this.view.tagName === 'DIALOG') {
dialogPolyfill.registerDialog(this.view) dialogPolyfill.registerDialog(this.view)
if (!this.view.hasAttribute('open')) { if (!this.view.hasAttribute('open')) {
...@@ -90,8 +91,8 @@ export default class SIBRoute extends HTMLElement { ...@@ -90,8 +91,8 @@ export default class SIBRoute extends HTMLElement {
this.view.removeAttribute('hidden'); this.view.removeAttribute('hidden');
} }
this.setAttribute('active', ''); this.setAttribute('active', '');
this.updateResource(); this.updateResource(id);
if (!keepURL) this.updateSubRouters(); if (!keepURL) this.updateSubRouters(id);
} }
hide() { hide() {
if (this.view.tagName === 'DIALOG') { if (this.view.tagName === 'DIALOG') {
......
...@@ -38,10 +38,10 @@ export default class SIBRouter extends HTMLElement { ...@@ -38,10 +38,10 @@ export default class SIBRouter extends HTMLElement {
return this.querySelectorAll('sib-route'); return this.querySelectorAll('sib-route');
} }
display(routeName = this.currentRouteName, keepURL=false) { display(routeName = this.currentRouteName, id = null, keepURL = false) {
for (let route of this.routes) { for (let route of this.routes) {
if (routeName === route.name) { if (routeName === route.name) {
route.activate(keepURL); route.activate(id, keepURL);
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('navigate', { new CustomEvent('navigate', {
detail: { route: routeName, resource: {id: route.resourceId} }, detail: { route: routeName, resource: {id: route.resourceId} },
...@@ -83,7 +83,7 @@ export default class SIBRouter extends HTMLElement { ...@@ -83,7 +83,7 @@ export default class SIBRouter extends HTMLElement {
const prefix = this.useHash ? '#' : '/'; const prefix = this.useHash ? '#' : '/';
history.pushState({}, routeName, prefix + path); history.pushState({}, routeName, prefix + path);
} }
this.display(routeName, keepURL); this.display(routeName, id, keepURL);
} }
} }
......