Commit 62ad7f60 authored by Matthieu Fesselier's avatar Matthieu Fesselier

bugfix: first proposal

parent ead13d6e
Pipeline #3194 passed with stage
in 28 seconds
<!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>
......@@ -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>
export default class SIBRoute extends HTMLElement {
constructor() {
super();
this.slashReplace = '@_';
this.colonReplace = '@~';
this.dotReplace = '@!';
this.atReplace = '@@';
}
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.atReplace)
.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.atReplace}`, 'g'), '@')
.replace(/^@/, '');
}
getPath(prefix, name, id = '') {
......
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