Commit 357448db authored by Nicolas Mérigot's avatar Nicolas Mérigot

organization: split into several files

parent 260e22fb
import SIBRouter from './sib-router.js';
import SIBRoute from './sib-route.js';
import SIBLink from './sib-link.js';
export {
SIBRouter,
SIBRoute,
SIBLink,
};
export default class SIBLink extends HTMLElement {
constructor() {
super();
this.addEventListener('click', event => this.trigger());
}
trigger() {
const route = this.getAttribute('next')
const resource = this.dataset.src && { '@id': this.dataset.src }
if(!route && !resource) return;
this.dispatchEvent(
new CustomEvent('requestNavigation', {
bubbles: true,
detail: { route, resource },
}),
);
}
}
customElements.define('sib-link', SIBLink);
export class SIBRoute extends HTMLElement {
export default class SIBRoute extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.addEventListener('click', event => this.router.navigate(this.name));
}
get name() {
return this.getAttribute('name');
}
......@@ -70,7 +70,7 @@ export class SIBRoute extends HTMLElement {
this.view.removeAttribute('hidden');
this.setAttribute('active', '');
this.updateResource();
// Reseting all routers within the selected view
for(let router of this.view.querySelectorAll('sib-router'))
this.updateSubrouter(router);
......@@ -80,90 +80,5 @@ export class SIBRoute extends HTMLElement {
this.removeAttribute('active');
}
}
customElements.define('sib-route', SIBRoute);
export class SIBRouter extends HTMLElement {
constructor() {
super();
window.addEventListener('popstate', event => this.display());
window.addEventListener('requestNavigation', event => {
this.navigate(event.detail.route, event.detail.resource);
})
window.addEventListener('DOMContentLoaded', event => this.display());
}
get useHash() {
return this.hasAttribute('use-hash');
}
get prefix() {
let prefix = this.getAttribute('route-prefix') || '';
if(prefix.slice(-1) == '/')
prefix = prefix.slice(0, -1);
return prefix;
}
get defaultRoute() {
return this.getAttribute('default-route') || '';
}
get currentURL() {
let url = (this.useHash ? location.hash : location.pathname).slice(1);
if(url.startsWith(this.prefix))
url = url.slice(this.prefix.length);
if(url.startsWith('/'))
url = url.slice(1);
return url;
}
get currentRouteName() {
return this.currentURL.split('/')[0] || this.defaultRoute;
}
get routes() {
return this.querySelectorAll('sib-route');
}
display(routeName = this.currentRouteName, resource) {
this.dispatchEvent(new CustomEvent('navigate', {detail: {route: routeName, resource}}));
for(let route of this.routes)
if(routeName == route.name)
route.activate();
else
route.hide();
}
navigate(routeName = '', resource) {
const route = this.querySelector('sib-route[name='+routeName+']');
if(!route) return; //this route is not for me!
const id = resource ? resource['@id'] : null;
const path = route.getPath(this.prefix, routeName, id)
//update current URL
if(this.useHash)
window.location.hash = path;
else
history.pushState({}, routeName, '/' + path);
this.display(routeName, resource);
}
}
customElements.define('sib-router', SIBRouter);
export class SIBLink extends HTMLElement {
constructor() {
super();
this.addEventListener('click', event => this.trigger());
}
trigger() {
const route = this.getAttribute('next')
const resource = this.dataset.src && { '@id': this.dataset.src }
if(!route && !resource) return;
this.dispatchEvent(
new CustomEvent('requestNavigation', {
bubbles: true,
detail: { route, resource },
}),
);
}
}
customElements.define('sib-link', SIBLink);
customElements.define('sib-route', SIBRoute);
export default class SIBRouter extends HTMLElement {
constructor() {
super();
window.addEventListener('popstate', event => this.display());
window.addEventListener('requestNavigation', event => {
this.navigate(event.detail.route, event.detail.resource);
})
window.addEventListener('DOMContentLoaded', event => this.display());
}
get useHash() {
return this.hasAttribute('use-hash');
}
get prefix() {
let prefix = this.getAttribute('route-prefix') || '';
if(prefix.slice(-1) == '/')
prefix = prefix.slice(0, -1);
return prefix;
}
get defaultRoute() {
return this.getAttribute('default-route') || '';
}
get currentURL() {
let url = (this.useHash ? location.hash : location.pathname).slice(1);
if(url.startsWith(this.prefix))
url = url.slice(this.prefix.length);
if(url.startsWith('/'))
url = url.slice(1);
return url;
}
get currentRouteName() {
return this.currentURL.split('/')[0] || this.defaultRoute;
}
get routes() {
return this.querySelectorAll('sib-route');
}
display(routeName = this.currentRouteName, resource) {
this.dispatchEvent(new CustomEvent('navigate', {detail: {route: routeName, resource}}));
for(let route of this.routes)
if(routeName == route.name)
route.activate();
else
route.hide();
}
navigate(routeName = '', resource) {
const route = this.querySelector('sib-route[name='+routeName+']');
if(!route) return; //this route is not for me!
const id = resource ? resource['@id'] : null;
const path = route.getPath(this.prefix, routeName, id)
//update current URL
if(this.useHash)
window.location.hash = path;
else
history.pushState({}, routeName, '/' + path);
this.display(routeName, resource);
}
}
customElements.define('sib-router', SIBRouter);
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