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 180 additions and 164 deletions
src/sib-link.js
View file @ ceec7547
export default class SIBLink extends HTMLElement { export default class SIBLink extends HTMLElement {
constructor() { constructor() {
super(); super();
this.addEventListener('click', event => this.trigger()); this.addEventListener('click', event => this.trigger());
} }
trigger() { trigger() {
const route = this.getAttribute('next') const route = this.getAttribute('next');
const resource = this.dataset.src && { '@id': this.dataset.src } const resource = this.dataset.src && { '@id': this.dataset.src };
if(!route && !resource) return; if (!route && !resource) return;
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('requestNavigation', { new CustomEvent('requestNavigation', {
bubbles: true, bubbles: true,
detail: { route, resource }, detail: { route, resource },
}), }),
); );
} }
} }
customElements.define('sib-link', SIBLink); customElements.define('sib-link', SIBLink);
src/sib-route.js
View file @ ceec7547
export default class SIBRoute extends HTMLElement { export default class SIBRoute extends HTMLElement {
constructor() { constructor() {
super(); super();
} }
connectedCallback() { connectedCallback() {
this.addEventListener('click', event => this.router.navigate(this.name)); this.addEventListener('click', event => this.router.navigate(this.name));
} }
get name() { get name() {
return this.getAttribute('name'); return this.getAttribute('name');
} }
set name(name) { set name(name) {
this.setAttribute('name', name); this.setAttribute('name', name);
} }
get view(){ get view() {
const view = document.getElementById(this.name); const view = document.getElementById(this.name);
if(!view) { if (!view) {
throw new Error(`view "#${this.name}" is not in document`); throw new Error(`view "#${this.name}" is not in document`);
}
this.view = view;
return view;
}
set view(value) {
Object.defineProperty(this, 'view', {value});
}
get router() {
return this.closest('sib-router');
}
get resourceId() {
const id = this.router.currentURL.split('/')[1];
if(!id || !id.startsWith('@')) return '';
return this.decodeId(id);
} }
this.view = view;
return view;
}
set view(value) {
Object.defineProperty(this, 'view', { value });
}
get router() {
return this.closest('sib-router');
}
get resourceId() {
const id = this.router.currentURL.split('/')[1];
if (!id || !id.startsWith('@')) return '';
return this.decodeId(id);
}
encodeId(id) { encodeId(id) {
if (!id) return ''; if (!id) return '';
return '@' + encodeURIComponent(id); return '@' + encodeURIComponent(id);
} }
decodeId(id) { decodeId(id) {
if(!id) return ''; if (!id) return '';
return decodeURIComponent(id.replace(/^@/, '')); return decodeURIComponent(id.replace(/^@/, ''));
} }
getPath(prefix, name, id = '') { getPath(prefix, name, id = '') {
const encodedId = this.encodeId(id); const encodedId = this.encodeId(id);
return [prefix, name, encodedId].filter(s => s).join('/'); return [prefix, name, encodedId].filter(s => s).join('/');
} }
updateResource() { updateResource() {
if(this.resourceId) { if (this.resourceId) {
if(this.view.hasAttribute('bind-resources')) { if (this.view.hasAttribute('bind-resources')) {
this.view.setAttribute('data-src', this.resourceId); this.view.setAttribute('data-src', this.resourceId);
} }
for(let element of this.view.querySelectorAll('[bind-resources]')) { for (let element of this.view.querySelectorAll('[bind-resources]')) {
element.setAttribute('data-src', this.resourceId); element.setAttribute('data-src', this.resourceId);
} }
}
} }
updateSubRouters() { }
for(let router of this.view.querySelectorAll('sib-router')){ updateSubRouters() {
const routePrefix = this.getPath(this.router.prefix, this.name, this.resourceId); for (let router of this.view.querySelectorAll('sib-router')) {
router.setAttribute('route-prefix', routePrefix); const routePrefix = this.getPath(
router.display(); this.router.prefix,
} this.name,
this.resourceId,
);
router.setAttribute('route-prefix', routePrefix);
router.display();
} }
activate() { }
if ('HTMLDialogElement' in window && this.view instanceof window.HTMLDialogElement){ activate() {
if(!this.view.hasAttribute('open')) { if (
this.view.showModal(); 'HTMLDialogElement' in window &&
} this.view instanceof window.HTMLDialogElement
} else { ) {
this.view.removeAttribute('hidden'); if (!this.view.hasAttribute('open')) {
} this.view.showModal();
this.setAttribute('active', ''); }
this.updateResource(); } else {
this.updateSubRouters(); this.view.removeAttribute('hidden');
} }
hide() { this.setAttribute('active', '');
if ('HTMLDialogElement' in window && this.view instanceof window.HTMLDialogElement){ this.updateResource();
this.view.close() this.updateSubRouters();
} else { }
this.view.setAttribute('hidden', ''); hide() {
} if (
this.removeAttribute('active'); 'HTMLDialogElement' in window &&
this.view instanceof window.HTMLDialogElement
) {
this.view.close();
} else {
this.view.setAttribute('hidden', '');
} }
this.removeAttribute('active');
}
} }
customElements.define('sib-route', SIBRoute); customElements.define('sib-route', SIBRoute);
src/sib-router.js
View file @ ceec7547
export default class SIBRouter extends HTMLElement { export default class SIBRouter extends HTMLElement {
constructor() { constructor() {
super(); super();
window.addEventListener('popstate', () => this.display()); window.addEventListener('popstate', () => this.display());
window.addEventListener('requestNavigation', ({detail}) => window.addEventListener('requestNavigation', ({ detail }) =>
this.navigate(detail.route, detail.resource, detail.keepURL) this.navigate(detail.route, detail.resource, detail.keepURL),
); );
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
for (const route of this.routes) { for (const route of this.routes) {
route.updateSubRouters(); route.updateSubRouters();
} }
this.display(); this.display();
}); });
} }
get useHash() { get useHash() {
return this.hasAttribute('use-hash'); return this.hasAttribute('use-hash');
} }
get prefix() { get prefix() {
let prefix = this.getAttribute('route-prefix') || ''; let prefix = this.getAttribute('route-prefix') || '';
if(prefix.slice(-1) == '/') if (prefix.slice(-1) == '/') prefix = prefix.slice(0, -1);
prefix = prefix.slice(0, -1); return prefix;
return prefix; }
} get defaultRoute() {
get defaultRoute() { return this.getAttribute('default-route') || '';
return this.getAttribute('default-route') || ''; }
} get currentURL() {
get currentURL() { let url = this.useHash ? location.hash : location.pathname;
let url = this.useHash ? location.hash : location.pathname; url = url.slice(1);
url = url.slice(1); if (url.startsWith(this.prefix)) {
if(url.startsWith(this.prefix)) { url = url.slice(this.prefix.length);
url = url.slice(this.prefix.length);
}
return stripSlashes(url);
} }
get currentRouteName() { return stripSlashes(url);
return this.currentURL.split('/')[0] || this.defaultRoute; }
get currentRouteName() {
return this.currentURL.split('/')[0] || this.defaultRoute;
}
get routes() {
return this.querySelectorAll('sib-route');
}
display(routeName = this.currentRouteName, resource) {
for (let route of this.routes) {
if (routeName === route.name) {
this.dispatchEvent(
new CustomEvent('navigate', {
detail: { route: routeName, resource },
}),
);
route.activate();
} else {
route.hide();
}
} }
get routes() { }
return this.querySelectorAll('sib-route'); navigate(routeName = '', resource, keepURL) {
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!
display(routeName = this.currentRouteName, resource) { if (this.prefix) {
for(let route of this.routes) { const route = this.prefix.split('/').pop();
if(routeName === route.name) { setTimeout(() => {
this.dispatchEvent(new CustomEvent('navigate', {detail: {route: routeName, resource}})); this.dispatchEvent(
route.activate(); new CustomEvent('requestNavigation', {
} else { detail: { route: route, keepURL: true },
route.hide(); bubbles: true,
} }),
} );
});
} }
navigate(routeName = '', resource, keepURL) { const id = resource ? resource['@id'] : null;
let route const path = route.getPath(this.prefix, routeName, id);
if(routeName) { if (!keepURL && !this.hasAttribute('keep-url')) {
route = this.querySelector('sib-route[name="'+routeName+'"]'); //update current URL
} else if (!routeName && resource && resource['@type']) { const prefix = this.useHash ? '#' : '/';
route = this.querySelector('sib-route[rdf-type="'+resource['@type']+'"]'); history.pushState({}, routeName, prefix + path);
routeName = route ? route.attributes.name.value : null
}
if(!route) return; //this route is not for me!
if(this.prefix) {
const route = this.prefix.split('/').pop();
setTimeout(() => {
this.dispatchEvent(new CustomEvent('requestNavigation', {
detail: {route: route, keepURL: true},
bubbles: true,
}))
});
}
const id = resource ? resource['@id'] : null;
const path = route.getPath(this.prefix, routeName, id);
if(!keepURL && !this.hasAttribute('keep-url')) {
//update current URL
const prefix = this.useHash ? '#' : '/';
history.pushState({}, routeName, prefix + path);
}
this.display(routeName, resource);
} }
this.display(routeName, resource);
}
} }
customElements.define('sib-router', SIBRouter); customElements.define('sib-router', SIBRouter);
function stripSlashes(str) { function stripSlashes(str) {
return str.replace(/^\/+|\/+$/g, ''); return str.replace(/^\/+|\/+$/g, '');
} }