Skip to content

S
SiB Router
Source
Select Git revision
...
Target
Select Git revision
 
Commits (7)
Hide whitespace changes
Inline Side-by-side
Showing with 77 additions and 5 deletions
examples/route-with-id.html 0 → 100644
View file @ 7e22d180
<!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.6"></script>
<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="list" route-prefix="examples/route-with-id.html">
<sib-route name="list">Members list</sib-route>
<sib-route name="member"></sib-route>
</sib-router>
<div id="list">
<h1>Members</h1>
<sib-display
data-src="https://test-paris.happy-dev.fr/users/"
data-fields="username"
next="member">
</sib-display>
</div>
<div id="member">
<h1>Detail</h1>
<sib-display
bind-resources
data-fields="first_name, last_name">
</sib-display>
</div>
</body>
</html>
index.html
View file @ 7e22d180
......@@ -26,6 +26,7 @@
<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/dialog.html">dialog</a></li>
<li><a href="examples/route-with-id.html">route-with-id</a></li>
</ul>
</body>
</html>
src/sib-link.js
View file @ 7e22d180
......@@ -19,4 +19,6 @@ export default class SIBLink extends HTMLElement {
}
}
customElements.define('sib-link', SIBLink);
if (!customElements.get('sib-link')) {
customElements.define('sib-link', SIBLink);
}
\ No newline at end of file
src/sib-route.js
View file @ 7e22d180
export default class SIBRoute extends HTMLElement {
constructor() {
super();
this.slashReplace = '~_';
this.colonReplace = '~@';
this.dotReplace = '~!';
this.tildeReplace = '~~';
}
connectedCallback() {
this.addEventListener('click', event => this.router.navigate(this.name));
......@@ -34,12 +39,19 @@ export default class SIBRoute extends HTMLElement {
encodeId(id) {
if (!id) return '';
return '@' + encodeURIComponent(id);
return '@' + id.replace(/\~/g, this.tildeReplace)
.replace(/\./g, this.dotReplace)
.replace(/\//g, this.slashReplace)
.replace(/\:/g, this.colonReplace);
}
decodeId(id) {
if (!id) return '';
return decodeURIComponent(id.replace(/^@/, ''));
return id.replace(new RegExp(`\\${this.colonReplace}`, 'g'), ':')
.replace(new RegExp(`\\${this.slashReplace}`, 'g'), '/')
.replace(new RegExp(`\\${this.dotReplace}`, 'g'), '.')
.replace(new RegExp(`\\${this.tildeReplace}`, 'g'), '~')
.replace(/^@/, '');
}
getPath(prefix, name, id = '') {
......@@ -95,4 +107,6 @@ export default class SIBRoute extends HTMLElement {
}
}
customElements.define('sib-route', SIBRoute);
if (!customElements.get('sib-route')) {
customElements.define('sib-route', SIBRoute);
}
\ No newline at end of file
src/sib-router.js
View file @ 7e22d180
......@@ -85,7 +85,10 @@ export default class SIBRouter extends HTMLElement {
this.display(routeName, keepURL);
}
}
customElements.define('sib-router', SIBRouter);
if (!customElements.get('sib-router')) {
customElements.define('sib-router', SIBRouter);
}
function stripSlashes(str) {
return str.replace(/^\/+|\/+$/g, '');
......