...
 
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 @@
<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/keep-url-id.html">keep-url + id</a></li>
<li><a href="examples/dialog.html">dialog</a></li>
<li><a href="examples/route-with-id.html">route-with-id</a></li>
</ul>
......
......@@ -59,28 +59,29 @@ export default class SIBRoute extends HTMLElement {
const encodedId = this.encodeId(id);
return [prefix, name, encodedId].filter(s => s).join('/');
}
updateResource() {
if (this.resourceId) {
updateResource(id = null) {
const resourceId = id || this.resourceId;
if (resourceId) {
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]')) {
element.setAttribute('data-src', this.resourceId);
element.setAttribute('data-src', resourceId);
}
}
}
updateSubRouters() {
updateSubRouters(id = null) {
for (let router of this.view.querySelectorAll('sib-router')) {
const routePrefix = this.getPath(
this.router.prefix,
this.name,
this.resourceId,
id || this.resourceId,
);
router.setAttribute('route-prefix', routePrefix);
router.display();
}
}
activate(keepURL=false) {
activate(id=null, keepURL=false) {
if (this.view.tagName === 'DIALOG') {
dialogPolyfill.registerDialog(this.view)
if (!this.view.hasAttribute('open')) {
......@@ -90,8 +91,8 @@ export default class SIBRoute extends HTMLElement {
this.view.removeAttribute('hidden');
}
this.setAttribute('active', '');
this.updateResource();
if (!keepURL) this.updateSubRouters();
this.updateResource(id);
if (!keepURL) this.updateSubRouters(id);
}
hide() {
if (this.view.tagName === 'DIALOG') {
......
......@@ -38,10 +38,10 @@ export default class SIBRouter extends HTMLElement {
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) {
if (routeName === route.name) {
route.activate(keepURL);
route.activate(id, keepURL);
this.dispatchEvent(
new CustomEvent('navigate', {
detail: { route: routeName, resource: {id: route.resourceId} },
......@@ -83,7 +83,7 @@ export default class SIBRouter extends HTMLElement {
const prefix = this.useHash ? '#' : '/';
history.pushState({}, routeName, prefix + path);
}
this.display(routeName, keepURL);
this.display(routeName, id, keepURL);
}
}
......