@nent/core
Version:
176 lines (175 loc) • 5.08 kB
JavaScript
/*!
* NENT 2022
*/
import { Component, Element, Event, h, Host, Method, Prop, State, } from '@stencil/core';
import { actionBus, eventBus, } from '../../services/actions';
import { addDataProvider, removeDataProvider, } from '../../services/data/factory';
import { DATA_COMMANDS } from '../n-data/services/interfaces';
import { CookieService } from './services/cookie';
/**
* This element enables the *Cookie Data Provider*,
* after requesting consent from the user. The consent
* message and the accept/reject button are customizable.
*
* @system data
* @extension actions
* @extension provider
*/
export class DataCookie {
constructor() {
this.consentKey = 'consent';
this.hide = false;
/**
* When skipConsent is true, the accept-cookies banner will not
* be displayed before accessing cookie-data.
*/
this.skipConsent = false;
/**
* Provider name to use in nent expressions.
*/
this.name = 'cookie';
}
/**
* Immediately register the provider.
*/
async registerProvider() {
addDataProvider(this.name, this.provider);
this.actionSubscription = actionBus.on(this.name, async (action) => {
if (action.command == DATA_COMMANDS.SetData) {
const { data } = action;
await Promise.all(Object.keys(action.data).map(key => this.provider.set(key, data[key])));
}
});
await this.provider.set(this.consentKey, true.toString());
this.didConsent.emit({ consented: true });
this.hide = true;
}
async componentWillLoad() {
this.provider = new CookieService(this.el.ownerDocument, eventBus, this.name);
if (this.skipConsent) {
this.registerProvider();
this.hide = true;
return;
}
const consented = await this.provider.get(this.consentKey);
if (consented != null) {
this.hide = true;
if (consented == 'true')
this.registerProvider();
}
}
async handleConsentResponse(ev, consented) {
ev.preventDefault();
if (consented) {
await this.registerProvider();
}
else {
this.hide = true;
}
}
disconnectedCallback() {
var _a;
removeDataProvider(this.name);
(_a = this.actionSubscription) === null || _a === void 0 ? void 0 : _a.call(this);
}
render() {
return (h(Host, { hidden: this.hide },
h("slot", null),
h("a", { id: "accept", onClick: async (ev) => await this.handleConsentResponse(ev, true) },
h("slot", { name: "accept" }, "Accept")),
h("a", { id: "reject", onClick: async (ev) => await this.handleConsentResponse(ev, false) },
h("slot", { name: "reject" }, "Reject"))));
}
static get is() { return "n-data-cookie"; }
static get encapsulation() { return "shadow"; }
static get styles() { return ":host {display:block;}"; }
static get properties() { return {
"skipConsent": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When skipConsent is true, the accept-cookies banner will not\nbe displayed before accessing cookie-data."
},
"attribute": "skip-consent",
"reflect": false,
"defaultValue": "false"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provider name to use in nent expressions."
},
"attribute": "name",
"reflect": false,
"defaultValue": "'cookie'"
}
}; }
static get states() { return {
"hide": {}
}; }
static get events() { return [{
"method": "didConsent",
"name": "didConsent",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "This event is raised when the user consents to cookies."
},
"complexType": {
"original": "CookieConsent",
"resolved": "{ consented: boolean; }",
"references": {
"CookieConsent": {
"location": "import",
"path": "./services/interfaces"
}
}
}
}]; }
static get methods() { return {
"registerProvider": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
},
"EventAction": {
"location": "import",
"path": "../../services/actions"
},
"SetData": {
"location": "import",
"path": "../n-data/services/interfaces"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Immediately register the provider.",
"tags": []
}
}
}; }
static get elementRef() { return "el"; }
}