@latitude-data/webcomponents
Version:
Web Components for Latitude
218 lines (217 loc) • 7.07 kB
JavaScript
import { h, } from "@stencil/core";
export class LatitudeEmbed {
constructor() {
this.url = undefined;
this.params = undefined;
this.signedParams = undefined;
this.iframeSrc = undefined;
this.queryOrigin = undefined;
}
rootEl;
paramsChanged;
componentWillLoad() {
this.buildIframeData();
}
componentDidLoad() {
window.addEventListener('message', this.handleMessage);
}
disconnectedCallback() {
window.removeEventListener('message', this.handleMessage);
}
queryChanged() {
// We don't want to re-render the iframe every time the
// params change. We only want to re-render the iframe
// when the query or signupParam change.
this.buildIframeData();
}
signedParamsChanged() {
// We don't want to re-render the iframe every time the
// params change. We only want to re-render the iframe
// when the query or signupParam change.
this.buildIframeData();
}
runHandler(event) {
this.iframe.contentWindow.postMessage(event.detail, {
targetOrigin: this.queryOrigin,
});
}
paramsChangedHander(event) {
this.iframe.contentWindow.postMessage(event.detail, {
targetOrigin: this.queryOrigin,
});
}
customEventHander(event) {
this.iframe.contentWindow.postMessage(event.detail, {
targetOrigin: this.queryOrigin,
});
}
get iframe() {
return this.rootEl.shadowRoot.querySelector('iframe');
}
buildIframeData() {
const queryParams = this.params ?? {};
const params = this.signedParams
? { __token: this.signedParams, ...queryParams }
: queryParams;
const urlParams = new URLSearchParams(params);
this.iframeSrc = this.url ? `${this.url}?${urlParams.toString()}` : null;
this.queryOrigin = this.buildQueryOrigin();
}
buildQueryOrigin() {
if (!this.url)
return '';
const url = new URL(this.url);
return url.origin;
}
handleMessage = (event) => {
if (event.source !== this.iframe.contentWindow)
return;
const type = event.data.type;
switch (type) {
case 'latitude-params-changed':
this.paramsChanged.emit(event.data);
break;
default:
}
};
render() {
return h("iframe", { key: '0ce56ba38a829af7c0af97266034ddd1f85cc409', src: this.iframeSrc });
}
static get is() { return "latitude-embed"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["latitude-embed.css"]
};
}
static get styleUrls() {
return {
"$": ["latitude-embed.css"]
};
}
static get properties() {
return {
"url": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "url",
"reflect": false
},
"params": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "Record<string, string>",
"resolved": "{ [x: string]: string; }",
"references": {
"Record": {
"location": "global",
"id": "global::Record"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"signedParams": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "signed-params",
"reflect": false
}
};
}
static get states() {
return {
"iframeSrc": {},
"queryOrigin": {}
};
}
static get events() {
return [{
"method": "paramsChanged",
"name": "paramsChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "EmbeddingEventData<EmbeddingEvent.ParamsChanged>",
"resolved": "{ type: EmbeddingEvent.ParamsChanged; params: ParamsChangedEventData; }",
"references": {
"EmbeddingEventData": {
"location": "import",
"path": "@latitude-data/embedding",
"id": "../../embedding/dist/index.d.ts::EmbeddingEventData"
},
"EmbeddingEvent": {
"location": "import",
"path": "@latitude-data/embedding",
"id": "../../embedding/dist/index.d.ts::EmbeddingEvent"
}
}
}
}];
}
static get elementRef() { return "rootEl"; }
static get watchers() {
return [{
"propName": "url",
"methodName": "queryChanged"
}, {
"propName": "signedParams",
"methodName": "signedParamsChanged"
}];
}
static get listeners() {
return [{
"name": "latitude-run",
"method": "runHandler",
"target": "document",
"capture": false,
"passive": false
}, {
"name": "latitude-change-param-request",
"method": "paramsChangedHander",
"target": "document",
"capture": false,
"passive": false
}, {
"name": "latitude-custom",
"method": "customEventHander",
"target": "document",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=latitude-embed.js.map