@nent/core
Version:
196 lines (195 loc) • 6.65 kB
JavaScript
/*!
* NENT 2022
*/
import { Component, Element, h, Host, Prop, State, } from '@stencil/core';
import { eventBus } from '../../services/actions';
import { debugIf, warn } from '../../services/common/logging';
import { commonState } from '../../services/common/state';
import { ROUTE_EVENTS } from '../n-views/services/interfaces';
import { routingState } from '../n-views/services/state';
import { PresentationService } from './services/presentation';
/**
* This element encapsulates a timed presentation. This element uses
* a child n-presentation-timer or n-video element to create time-events
* then it delegates those events to time-based action-activators.
*
* If enabled, the n-attributes for time will also get processed. This
* element also has the ability to go to the next route using the active
* route's 'goNext' function.
*
* @system presentation
* @extension elements
*
*/
export class Presentation {
constructor() {
this.elementWithTimer = null;
this.timer = null;
/**
* The element selector for the timer-element to
* bind for interval events. If left blank, it looks
* first an n-timer, then for the first n-video.
*
* If none are found, it creates one manually and starts
* it immediately
*/
this.timerElement = null;
/**
* To debug timed elements, set this value to true.
*/
this.debug = false;
/**
* Go to the next view after the timer ends
*/
this.nextAfter = false;
}
get currentRoute() {
var _a;
const parent = this.el.closest('n-view-prompt') || this.el.closest('n-view');
if (parent)
return parent.route;
return ((_a = routingState.router) === null || _a === void 0 ? void 0 : _a.exactRoute) || null;
}
componentWillLoad() {
debugIf(this.debug, `n-presentation: loading`);
let element = this.timerElement
? this.el.querySelector(this.timerElement) ||
this.el.ownerDocument.querySelector(this.timerElement) ||
null
: this.el.querySelector('n-presentation-timer') ||
this.el.ownerDocument.querySelector('n-presentation-timer') ||
this.el.querySelector('n-video') ||
this.el.ownerDocument.querySelector('n-video') ||
null;
this.elementWithTimer =
element || null;
if (this.elementWithTimer == null) {
warn(`n-presentation: no timer element found`);
return;
}
else {
this.elementWithTimer.addEventListener('ready', () => {
var _a, _b, _c, _d;
debugIf(this.debug, `n-presentation: element ready`);
this.timer = this.elementWithTimer.timer;
this.presentation = new PresentationService(this.el, this.timer, commonState.elementsEnabled, this.analyticsEvent, () => {
var _a;
if (this.currentRoute && this.nextAfter) {
(_a = this.presentation) === null || _a === void 0 ? void 0 : _a.unsubscribe();
if (typeof this.nextAfter == 'string') {
this.currentRoute.router.goToRoute(this.nextAfter);
}
else {
this.currentRoute.router.goNext();
}
}
}, this.debug);
if (this.currentRoute) {
debugIf(this.debug, `n-presentation: syncing to route ${this.currentRoute.path}`);
if ((_b = (_a = this.currentRoute) === null || _a === void 0 ? void 0 : _a.match) === null || _b === void 0 ? void 0 : _b.isExact) {
(_c = this.presentation) === null || _c === void 0 ? void 0 : _c.subscribe();
}
this.navigationSubscription = eventBus.on(ROUTE_EVENTS.RouteChanged, () => {
var _a, _b, _c, _d;
if ((_b = (_a = this.currentRoute) === null || _a === void 0 ? void 0 : _a.match) === null || _b === void 0 ? void 0 : _b.isExact) {
(_c = this.presentation) === null || _c === void 0 ? void 0 : _c.subscribe();
}
else {
(_d = this.presentation) === null || _d === void 0 ? void 0 : _d.unsubscribe();
}
});
}
else {
(_d = this.presentation) === null || _d === void 0 ? void 0 : _d.subscribe();
}
});
}
}
render() {
return h(Host, null);
}
disconnectedCallback() {
var _a, _b;
(_a = this.presentation) === null || _a === void 0 ? void 0 : _a.unsubscribe();
(_b = this.navigationSubscription) === null || _b === void 0 ? void 0 : _b.call(this);
}
static get is() { return "n-presentation"; }
static get properties() { return {
"timerElement": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | null",
"resolved": "null | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The element selector for the timer-element to\nbind for interval events. If left blank, it looks\nfirst an n-timer, then for the first n-video.\n\nIf none are found, it creates one manually and starts\nit immediately"
},
"attribute": "timer-element",
"reflect": false,
"defaultValue": "null"
},
"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"
},
"nextAfter": {
"type": "any",
"mutable": false,
"complexType": {
"original": "boolean | string",
"resolved": "boolean | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Go to the next view after the timer ends"
},
"attribute": "next-after",
"reflect": false,
"defaultValue": "false"
},
"analyticsEvent": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Send analytics view-time percentages for this presentation\nusing the event name"
},
"attribute": "analytics-event",
"reflect": false
}
}; }
static get states() { return {
"elementWithTimer": {},
"timer": {}
}; }
static get elementRef() { return "el"; }
}