diff --git a/examples/route-with-id.html b/examples/route-with-id.html new file mode 100644 index 0000000000000000000000000000000000000000..ed91b357f19cc31b0c4dbe2ae16d496f0e49866f --- /dev/null +++ b/examples/route-with-id.html @@ -0,0 +1,52 @@ + + + + + + + SIB test: sib-router + + + + + + + + Members list + + + +
+

Members

+ + +
+ +
+

Detail

+ + +
+ + diff --git a/index.html b/index.html index dbd9909b6a34e5e1d887fc330f975b8a5836aea2..68508d01e178f58fab19a91730a8c54ff54398f8 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,7 @@
  • no-route-name
  • keep-url
  • dialog
  • +
  • route-with-id
  • diff --git a/src/sib-link.js b/src/sib-link.js index ed9dc4445d35622f7fc822a4138b0d56cd3453de..37449750e7994c091db86a0ac7b90b3ca7a03ea4 100644 --- a/src/sib-link.js +++ b/src/sib-link.js @@ -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 diff --git a/src/sib-route.js b/src/sib-route.js index 2ee017e0306a234f2f4fe7380a40b40bb1b7aa34..6da5adca8f58a651ff267974e9e72653ade0b86e 100644 --- a/src/sib-route.js +++ b/src/sib-route.js @@ -1,6 +1,11 @@ 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 diff --git a/src/sib-router.js b/src/sib-router.js index 68bb5f6cc664c9e6e9724f7f0fa3f858430ffdd1..49516878e716a602e5f02968a9b422d5f318d882 100644 --- a/src/sib-router.js +++ b/src/sib-router.js @@ -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, '');