@ribajs/router
Version:
Routing extension for Riba.js inspired by Barba.js
165 lines • 12.8 kB
JavaScript
import { Component } from "@ribajs/core";
import { EventDispatcher } from "@ribajs/events";
import { scrollTo, scrollToPosition } from "@ribajs/utils/src/dom.js";
import { Pjax, Prefetch, RouterService } from "../../services/index.js";
export class RouterViewComponent extends Component {
static tagName = "router-view";
events = EventDispatcher.getInstance("main");
nested = null;
wrapper = null;
pjax = null;
prefetch = null;
static get observedAttributes() {
return [
"id",
"action",
"container-selector",
"scroll-to-top",
"listen-all-links",
"listen-popstate",
"scroll-to-anchor-hash",
"scroll-to-anchor-offset",
"dataset-to-root-scope",
"parse-title",
"change-browser-url",
"prefetch-links",
];
}
scope = {
id: "main",
action: "replace",
scrollToTop: true,
listenAllLinks: true,
listenPopstate: true,
scrollToAnchorHash: true,
scrollToAnchorOffset: RouterService.options.scrollToAnchorOffset,
datasetToRootScope: true,
parseTitle: true,
changeBrowserUrl: true,
prefetchLinks: true,
transition: RouterService.options.defaultTransition,
};
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
this.init(RouterViewComponent.observedAttributes);
}
addEventListeners() {
this.events.on("newPageReady", this.onPageReady, this);
this.events.on("initStateChange", this.onTransitionInit, this);
this.events.on("transitionCompleted", this.onTransitionCompleted, this);
}
removeEventListeners() {
this.events.off("newPageReady", this.onPageReady, this);
this.events.off("initStateChange", this.onTransitionInit, this);
this.events.off("transitionCompleted", this.onTransitionCompleted, this);
}
getContainerSelector() {
if (this.scope.id === "main") {
return `${RouterViewComponent.tagName} > *:first-child`;
}
else {
return `${RouterViewComponent.tagName}#${this.scope.id} > *:first-child`;
}
}
initAndStartPjax() {
if (!this.scope.id) {
console.error("Id attribute is required!");
return;
}
const pjaxOptions = {
id: this.scope.id,
action: this.scope.action,
wrapper: this,
containerSelector: this.getContainerSelector(),
listenAllLinks: !!this.scope.listenAllLinks,
listenPopstate: !!this.scope.listenPopstate,
transition: this.scope.transition,
parseTitle: !!this.scope.parseTitle,
changeBrowserUrl: !!this.scope.changeBrowserUrl,
prefetchLinks: !!this.scope.prefetchLinks,
scrollToTop: !!this.scope.scrollToTop,
};
this.pjax = new Pjax(pjaxOptions);
this.pjax.setActiveWrapper(this);
this.prefetch = new Prefetch(this.scope.id);
this.prefetch.init(pjaxOptions.prefetchLinks);
this.pjax.start();
}
onPageReady(viewId, currentStatus, prevStatus, container, newPageRawHTML, dataset, isInit) {
if (viewId !== this.scope.id) {
console.warn("not the right view", this.scope.id, viewId, dataset);
return;
}
this.debug("New page ready!", this.innerHTML);
if (this.scope.datasetToRootScope) {
if (!this.scope.$root) {
this.scope.$root = {};
}
this.scope.$root.dataset = dataset;
}
if (isInit) {
return;
}
this.view = this.getView();
if (!this.view) {
console.warn("View ist not ready!");
return;
}
this.view.bind();
}
async onTransitionInit(viewId) {
if (viewId !== this.scope.id) {
return;
}
this.setTransitionClass("init");
}
async onTransitionCompleted(viewId) {
if (viewId !== this.scope.id) {
return;
}
this.setTransitionClass("complete");
if (this.scope.scrollToAnchorHash) {
let scrollToElement = null;
const hash = window.location.hash.substr(1);
if (hash) {
scrollToElement = document.getElementById(window.location.hash.substr(1));
if (scrollToElement) {
return await scrollTo(scrollToElement, this.scope.scrollToAnchorOffset, window);
}
}
}
if (this.scope.scrollToTop) {
return await scrollToPosition(window, "start", "vertical", "smooth");
}
}
setTransitionClass(state) {
this.classList.remove("transition-init");
this.classList.remove("transition-complete");
this.classList.add(`transition-${state}`);
}
requiredAttributes() {
return [];
}
parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace) {
super.parsedAttributeChangedCallback(attributeName, oldValue, newValue, namespace);
switch (attributeName) {
case "id":
this.events = EventDispatcher.getInstance(this.scope.id);
break;
default:
break;
}
}
async beforeBind() {
await super.beforeBind();
this.addEventListeners();
this.initAndStartPjax();
}
template() {
return null;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy92aWV3L3ZpZXcuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQXFDLE1BQU0sY0FBYyxDQUFDO0FBQzVFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNqRCxPQUFPLEVBQUUsUUFBUSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFFdEUsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsYUFBYSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFTeEUsTUFBTSxPQUFPLG1CQUFvQixTQUFRLFNBQVM7SUFDekMsTUFBTSxDQUFDLE9BQU8sR0FBRyxhQUFhLENBQUM7SUFDNUIsTUFBTSxHQUFHLGVBQWUsQ0FBQyxXQUFXLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDN0MsTUFBTSxHQUFnQixJQUFJLENBQUM7SUFDM0IsT0FBTyxHQUF1QixJQUFJLENBQUM7SUFDbkMsSUFBSSxHQUFnQixJQUFJLENBQUM7SUFDekIsUUFBUSxHQUFvQixJQUFJLENBQUM7SUFFM0MsTUFBTSxLQUFLLGtCQUFrQjtRQUMzQixPQUFPO1lBQ0wsSUFBSTtZQUNKLFFBQVE7WUFDUixvQkFBb0I7WUFDcEIsZUFBZTtZQUNmLGtCQUFrQjtZQUNsQixpQkFBaUI7WUFDakIsdUJBQXVCO1lBQ3ZCLHlCQUF5QjtZQUN6Qix1QkFBdUI7WUFDdkIsYUFBYTtZQUNiLG9CQUFvQjtZQUNwQixnQkFBZ0I7U0FDakIsQ0FBQztJQUNKLENBQUM7SUFFTSxLQUFLLEdBQW9CO1FBQzlCLEVBQUUsRUFBRSxNQUFNO1FBQ1YsTUFBTSxFQUFFLFNBQVM7UUFDakIsV0FBVyxFQUFFLElBQUk7UUFDakIsY0FBYyxFQUFFLElBQUk7UUFDcEIsY0FBYyxFQUFFLElBQUk7UUFDcEIsa0JBQWtC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