@nent/core
Version:
441 lines (440 loc) • 13.2 kB
JavaScript
/*!
* NENT 2022
*/
import { Component, Element, h, Host, Prop, State, } from '@stencil/core';
import { CommonStateSubscriber, slugify } from '../../services/common';
import { debugIf, warn } from '../../services/common/logging';
import { commonState } from '../../services/common/state';
import { replaceHtmlInElement } from '../../services/content/elements';
import { resolveRemoteContentElement } from '../../services/content/remote';
import { DATA_EVENTS } from '../../services/data/interfaces';
import { recordVisit } from '../n-view/services/visits';
import { routingState } from '../n-views/services/state';
/**
* This element represents a specialized child-route for a parent \<n-view\> element.
* It represents a sub-route that has required and workflow behaviors.
*
* They are used to create, wizards, input workflows, or step by step instructions or
* wherever you want guided or automatic navigation.
*
* @system routing
* @extension data
* @extension elements
*/
export class ViewPrompt {
constructor() {
this.match = null;
this.exactMatch = false;
this.contentElement = null;
/**
* The title for this view. This is prefixed
* before the app title configured in n-views
*
*/
this.pageTitle = '';
/**
* The page description for this view.
*
*/
this.pageDescription = '';
/**
* The keywords to add to the keywords meta-tag for this view.
*
*/
this.pageKeywords = '';
/**
* The robots instruction for search indexing
*
*/
this.pageRobots = 'none';
/**
* The url for this route should only be matched
* when it is exact.
*/
this.exact = true;
/**
* The visit strategy for this do.
* once: persist the visit and never force it again
* always: do not persist, but don't don't show again in-session
* optional: do not force this view-do ever. It will be available by URL
*/
this.visit = 'once';
/**
* Cross Origin Mode if the content is pulled from
* a remote location
*/
this.mode = 'cors';
/**
* Before rendering remote HTML, replace any data-tokens with their
* resolved values. This also commands this component to
* re-render it's HTML for data-changes. This can affect
* performance.
*
* IMPORTANT: ONLY WORKS ON REMOTE HTML
*/
this.resolveTokens = false;
/**
* Force render with data & route changes.
*/
this.noCache = false;
/**
* To debug timed elements, set this value to true.
*/
this.debug = false;
}
get parentView() {
return this.el.closest('n-view');
}
componentWillLoad() {
debugIf(this.debug, `n-view-prompt: ${this.path} loading`);
this.contentKey = `rem-content-${slugify(this.contentSrc || 'none')}`;
if (!routingState.router) {
warn(`n-view-prompt: ${this.path} cannot load outside of an n-views element`);
return;
}
if (!this.parentView) {
warn(`n-view-prompt: ${this.path} cannot load outside of an n-views element`);
return;
}
this.route = routingState.router.createRoute(this.el, this.parentView, (match) => {
this.match = match ? Object.assign({}, match) : null;
this.exactMatch = (match === null || match === void 0 ? void 0 : match.isExact) || false;
});
if (commonState.dataEnabled && this.resolveTokens) {
this.dataSubscription = new CommonStateSubscriber(this, 'dataEnabled', DATA_EVENTS.DataChanged);
}
}
async componentWillRender() {
var _a;
debugIf(this.debug, `n-view-prompt: ${this.path} will render`);
if ((_a = this.match) === null || _a === void 0 ? void 0 : _a.isExact) {
debugIf(this.debug, `n-view-prompt: ${this.path} matched exact`);
if (this.contentSrc && this.contentElement == null)
this.contentElement = await resolveRemoteContentElement(window, this.contentSrc, this.mode, this.contentKey, this.resolveTokens, 'content');
await recordVisit(this.visit, this.path);
}
}
render() {
var _a;
debugIf(this.debug, `n-view-prompt: ${this.path} render`);
replaceHtmlInElement(this.el, `#${this.contentKey}`, this.contentElement);
return (h(Host, { hidden: !((_a = this.match) === null || _a === void 0 ? void 0 : _a.isExact) },
h("slot", null),
h("slot", { name: "content" })));
}
async componentDidRender() {
var _a, _b, _c, _d;
if (!((_b = (_a = this.route) === null || _a === void 0 ? void 0 : _a.match) === null || _b === void 0 ? void 0 : _b.isExact)) {
(_c = this.contentElement) === null || _c === void 0 ? void 0 : _c.remove();
if (this.noCache)
this.contentElement = null;
}
await ((_d = this.route) === null || _d === void 0 ? void 0 : _d.loadCompleted());
}
disconnectedCallback() {
var _a, _b;
(_a = this.dataSubscription) === null || _a === void 0 ? void 0 : _a.destroy();
(_b = this.route) === null || _b === void 0 ? void 0 : _b.destroy();
}
static get is() { return "n-view-prompt"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["view-prompt.css"]
}; }
static get styleUrls() { return {
"$": ["view-prompt.css"]
}; }
static get properties() { return {
"route": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "Route",
"resolved": "Route",
"references": {
"Route": {
"location": "import",
"path": "../n-view/services/route"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Route information"
}
},
"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": "''"
},
"pageDescription": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The page description for this view."
},
"attribute": "page-description",
"reflect": false,
"defaultValue": "''"
},
"pageKeywords": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The keywords to add to the keywords meta-tag for this view."
},
"attribute": "page-keywords",
"reflect": false,
"defaultValue": "''"
},
"pageRobots": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'all' | 'noindex' | 'nofollow' | 'none'",
"resolved": "\"all\" | \"nofollow\" | \"noindex\" | \"none\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The robots instruction for search indexing"
},
"attribute": "page-robots",
"reflect": false,
"defaultValue": "'none'"
},
"scrollTopOffset": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Header height or offset for scroll-top on this\nview."
},
"attribute": "scroll-top-offset",
"reflect": false
},
"transition": {
"type": "string",
"mutable": false,
"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
},
"path": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The path for this prompt route, including the parent's\nroutes, excluding the router's root."
},
"attribute": "path",
"reflect": true
},
"exact": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The url for this route should only be matched\nwhen it is exact."
},
"attribute": "exact",
"reflect": false,
"defaultValue": "true"
},
"visit": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'once' | 'always' | 'optional'",
"resolved": "\"always\" | \"once\" | \"optional\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The visit strategy for this do.\nonce: persist the visit and never force it again\nalways: do not persist, but don't don't show again in-session\noptional: do not force this view-do ever. It will be available by URL"
},
"attribute": "visit",
"reflect": false,
"defaultValue": "'once'"
},
"when": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If present, the expression must\nevaluate to true for this route\nto be sequenced by the parent view.\nThe existence of this value overrides\nthe visit strategy"
},
"attribute": "when",
"reflect": false
},
"contentSrc": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Remote URL for HTML content. Content from this\nURL will be assigned the 'content' slot."
},
"attribute": "content-src",
"reflect": false
},
"mode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'cors' | 'navigate' | 'no-cors' | 'same-origin'",
"resolved": "\"cors\" | \"navigate\" | \"no-cors\" | \"same-origin\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Cross Origin Mode if the content is pulled from\na remote location"
},
"attribute": "mode",
"reflect": false,
"defaultValue": "'cors'"
},
"resolveTokens": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Before rendering remote HTML, replace any data-tokens with their\nresolved values. This also commands this component to\nre-render it's HTML for data-changes. This can affect\nperformance.\n\nIMPORTANT: ONLY WORKS ON REMOTE HTML"
},
"attribute": "resolve-tokens",
"reflect": false,
"defaultValue": "false"
},
"noCache": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Force render with data & route changes."
},
"attribute": "no-cache",
"reflect": false,
"defaultValue": "false"
},
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "To debug timed elements, set this value to true."
},
"attribute": "debug",
"reflect": false,
"defaultValue": "false"
}
}; }
static get states() { return {
"match": {},
"exactMatch": {},
"contentElement": {}
}; }
static get elementRef() { return "el"; }
}