51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
import { router } from '../router.js';
|
|
import { i18n } from '../i18n.js';
|
|
import './app-header.js';
|
|
import './app-footer.js';
|
|
import './pages/page-home.js';
|
|
import './pages/page-search.js';
|
|
import './pages/page-listing.js';
|
|
import './pages/page-create.js';
|
|
import './pages/page-not-found.js';
|
|
|
|
class AppShell extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.main = null;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
this.setupRouter();
|
|
|
|
i18n.subscribe(() => {
|
|
this.querySelector('app-header').updateTranslations();
|
|
this.querySelector('app-footer').updateTranslations();
|
|
});
|
|
}
|
|
|
|
render() {
|
|
this.innerHTML = /* html */ `
|
|
<app-header></app-header>
|
|
<main class="container" id="router-outlet"></main>
|
|
<app-footer></app-footer>
|
|
`;
|
|
|
|
this.main = this.querySelector('#router-outlet');
|
|
}
|
|
|
|
setupRouter() {
|
|
router.setOutlet(this.main);
|
|
|
|
router
|
|
.register('/', 'page-home')
|
|
.register('/search', 'page-search')
|
|
.register('/listing/:id', 'page-listing')
|
|
.register('/create', 'page-create');
|
|
|
|
router.handleRouteChange();
|
|
}
|
|
}
|
|
|
|
customElements.define('app-shell', AppShell);
|