@nent/core
Version:
131 lines (130 loc) • 3.93 kB
JavaScript
/*!
* NENT 2022
*/
import { Component, Element, forceUpdate, h, Host, Prop, } from '@stencil/core';
import { ROUTE_EVENTS } from '../n-views/services/interfaces';
import { routingState } from '../n-views/services/state';
/**
* This element should be placed at the end of the content,
* inside the n-views element. It shows up when no views
* above it resolve.
*
* @system routing
*/
export class ViewNotFound {
constructor() {
/**
* The title for this view. This is prefixed
* before the app title configured in n-views
*
*/
this.pageTitle = 'Not Found';
/**
* Header height or offset for scroll-top on this
* view.
*/
this.scrollTopOffset = 0;
}
async setPageTags(router) {
if (router.hasExactRoute())
return;
await router.setPageTags({
title: this.pageTitle,
robots: 'nofollow',
});
router.scrollTo(this.scrollTopOffset);
}
componentWillLoad() {
const { router } = routingState;
if (!router) {
return;
}
this.transition = this.transition || (router === null || router === void 0 ? void 0 : router.transition);
this.routeChangeStartSubscription = router.eventBus.on(ROUTE_EVENTS.RouteChanged, async () => {
forceUpdate(this);
await this.setPageTags(router);
});
this.routeMatchedSubscription = router.eventBus.on(ROUTE_EVENTS.RouteMatchedExact, async () => {
forceUpdate(this);
await this.setPageTags(router);
});
this.routeFinalizeSubscription = router.eventBus.on(ROUTE_EVENTS.RouteChangeFinish, async () => {
await this.setPageTags(router);
forceUpdate(this);
});
}
render() {
var _a;
const hide = ((_a = routingState.router) === null || _a === void 0 ? void 0 : _a.hasExactRoute()) || false;
return (h(Host, { hidden: hide, class: this.transition },
h("slot", null)));
}
async componentDidLoad() {
await this.setPageTags(routingState.router);
}
disconnectedCallback() {
var _a, _b, _c;
(_a = this.routeChangeStartSubscription) === null || _a === void 0 ? void 0 : _a.call(this);
(_b = this.routeMatchedSubscription) === null || _b === void 0 ? void 0 : _b.call(this);
(_c = this.routeFinalizeSubscription) === null || _c === void 0 ? void 0 : _c.call(this);
}
static get is() { return "n-view-not-found"; }
static get encapsulation() { return "shadow"; }
static get styles() { return ":host { display: block; }"; }
static get properties() { return {
"pageTitle": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The title for this view. This is prefixed\nbefore the app title configured in n-views"
},
"attribute": "page-title",
"reflect": false,
"defaultValue": "'Not Found'"
},
"scrollTopOffset": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Header height or offset for scroll-top on this\nview."
},
"attribute": "scroll-top-offset",
"reflect": false,
"defaultValue": "0"
},
"transition": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Navigation transition between routes.\nThis is a CSS animation class."
},
"attribute": "transition",
"reflect": false
}
}; }
static get elementRef() { return "el"; }
}