Skip to content

S
SiB Router
Source
Select Git revision
...
Target
Select Git revision
 
Commits (2)
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 1 deletion
examples/no-route-name.html 0 → 100644
View file @ a76fd57b
<!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" rdf-type="doap:project">2nd page</sib-route>
</sib-router>
<div id="page1" hidden>
<h1>Page 1</h1>
<p>Launch navigation event without routeName, but only resource</p>
<button id="nextPage">requestNavigation</sib-link>
</div>
<div id="page2" hidden>
<h1>Page 2</h1>
<p>Quos, suscipit pariatur! Nulla fugiat excepturi pariatur fuga delectus
corrupti.</p>
</div>
<script>
nextPage.onclick = () => {
window.dispatchEvent(
new CustomEvent('requestNavigation', {
detail: {
resource: {
'@type': 'doap:project'
}
}
}),
);
}
</script>
</body>
</html>
index.html
View file @ a76fd57b
......@@ -23,6 +23,7 @@
<ul>
<li><a href="examples/basic.html">basic</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>
</ul>
</body>
</html>
src/sib-router.js
View file @ a76fd57b
......@@ -44,7 +44,14 @@ export default class SIBRouter extends HTMLElement {
route.hide();
}
navigate(routeName = '', resource) {
const 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
}
if(!route) return; //this route is not for me!
const id = resource ? resource['@id'] : null;
......