diff --git a/front/src/Api/Events/IframeEvent.ts b/front/src/Api/Events/IframeEvent.ts index 883f50fc..5c778643 100644 --- a/front/src/Api/Events/IframeEvent.ts +++ b/front/src/Api/Events/IframeEvent.ts @@ -1,7 +1,59 @@ -export interface IframeEvent { - type: string; - data: unknown; + + +import { ButtonClickedEvent } from './ButtonClickedEvent'; +import { ChatEvent } from './ChatEvent'; +import { ClosePopupEvent } from './ClosePopupEvent'; +import { EnterLeaveEvent } from './EnterLeaveEvent'; +import { GoToPageEvent } from './GoToPageEvent'; +import { MenuItemClickedEvent } from './MenuItemClickedEvent'; +import { MenuItemRegisterEvent } from './MenuItemRegisterEvent'; +import { OpenCoWebSiteEvent } from './OpenCoWebSiteEvent'; +import { OpenPopupEvent } from './OpenPopupEvent'; +import { OpenTabEvent } from './OpenTabEvent'; +import { UserInputChatEvent } from './UserInputChatEvent'; + + +export interface TypedMessageEvent extends MessageEvent { + data: T +} + +export type IframeEventMap = { + //getState: GameStateEvent, + // updateTile: UpdateTileEvent + registerMenuCommand: MenuItemRegisterEvent + chat: ChatEvent, + openPopup: OpenPopupEvent + closePopup: ClosePopupEvent + openTab: OpenTabEvent + goToPage: GoToPageEvent + openCoWebSite: OpenCoWebSiteEvent + closeCoWebSite: null + disablePlayerControl: null + restorePlayerControl: null + displayBubble: null + removeBubble: null +} +export interface IframeEvent { + type: T; + data: IframeEventMap[T]; +} + + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export const isIframeEventWrapper = (event: any): event is IframeEvent => typeof event.type === 'string'; + +export interface IframeResponseEventMap { + userInputChat: UserInputChatEvent + enterEvent: EnterLeaveEvent + leaveEvent: EnterLeaveEvent + buttonClickedEvent: ButtonClickedEvent + menuItemClicked: MenuItemClickedEvent + // gameState: GameStateEvent +} +export interface IframeResponseEvent { + type: T; + data: IframeResponseEventMap[T]; } // eslint-disable-next-line @typescript-eslint/no-explicit-any -export const isIframeEventWrapper = (event: any): event is IframeEvent => typeof event.type === 'string'; +export const isIframeResponseEventWrapper = (event: { type?: string }): event is IframeResponseEvent => typeof event.type === 'string'; \ No newline at end of file diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts index b70ec548..19460625 100644 --- a/front/src/Api/IframeListener.ts +++ b/front/src/Api/IframeListener.ts @@ -1,17 +1,17 @@ -import {Subject} from "rxjs"; -import {ChatEvent, isChatEvent} from "./Events/ChatEvent"; -import {IframeEvent, isIframeEventWrapper} from "./Events/IframeEvent"; -import {UserInputChatEvent} from "./Events/UserInputChatEvent"; +import { Subject } from "rxjs"; +import { ChatEvent, isChatEvent } from "./Events/ChatEvent"; import * as crypto from "crypto"; -import {HtmlUtils} from "../WebRtc/HtmlUtils"; -import {EnterLeaveEvent} from "./Events/EnterLeaveEvent"; -import {isOpenPopupEvent, OpenPopupEvent} from "./Events/OpenPopupEvent"; -import {isOpenTabEvent, OpenTabEvent} from "./Events/OpenTabEvent"; -import {ButtonClickedEvent} from "./Events/ButtonClickedEvent"; -import {ClosePopupEvent, isClosePopupEvent} from "./Events/ClosePopupEvent"; -import {scriptUtils} from "./ScriptUtils"; -import {GoToPageEvent, isGoToPageEvent} from "./Events/GoToPageEvent"; -import {isOpenCoWebsite, OpenCoWebSiteEvent} from "./Events/OpenCoWebSiteEvent"; +import { HtmlUtils } from "../WebRtc/HtmlUtils"; +import { EnterLeaveEvent } from "./Events/EnterLeaveEvent"; +import { isOpenPopupEvent, OpenPopupEvent } from "./Events/OpenPopupEvent"; +import { isOpenTabEvent, OpenTabEvent } from "./Events/OpenTabEvent"; +import { ButtonClickedEvent } from "./Events/ButtonClickedEvent"; +import { ClosePopupEvent, isClosePopupEvent } from "./Events/ClosePopupEvent"; +import { scriptUtils } from "./ScriptUtils"; +import { GoToPageEvent, isGoToPageEvent } from "./Events/GoToPageEvent"; +import { isOpenCoWebsite, OpenCoWebSiteEvent } from "./Events/OpenCoWebSiteEvent"; +import { IframeEventMap, IframeEvent, IframeResponseEvent, IframeResponseEventMap, isIframeEventWrapper, TypedMessageEvent } from "./Events/IframeEvent"; +import { UserInputChatEvent } from "./Events/UserInputChatEvent"; import { isMenuItemRegisterEvent } from './Events/MenuItemRegisterEvent'; import { MenuItemClickedEvent } from './Events/MenuItemClickedEvent'; @@ -60,7 +60,7 @@ class IframeListener { private readonly scripts = new Map(); init() { - window.addEventListener("message", (message) => { + window.addEventListener("message", (message: TypedMessageEvent>) => { // Do we trust the sender of this message? // Let's only accept messages from the iframe that are allowed. // Note: maybe we could restrict on the domain too for additional security (in case the iframe goes to another domain). @@ -84,10 +84,10 @@ class IframeListener { } else if (payload.type === 'closePopup' && isClosePopupEvent(payload.data)) { this._closePopupStream.next(payload.data); } - else if(payload.type === 'openTab' && isOpenTabEvent(payload.data)) { + else if (payload.type === 'openTab' && isOpenTabEvent(payload.data)) { scriptUtils.openTab(payload.data.url); } - else if(payload.type === 'goToPage' && isGoToPageEvent(payload.data)) { + else if (payload.type === 'goToPage' && isGoToPageEvent(payload.data)) { scriptUtils.goToPage(payload.data.url); } else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) { @@ -97,19 +97,19 @@ class IframeListener { scriptUtils.openCoWebsite(payload.data.url, scriptUrl || foundSrc); } - else if(payload.type === 'closeCoWebSite') { + else if (payload.type === 'closeCoWebSite') { scriptUtils.closeCoWebSite(); } - else if (payload.type === 'disablePlayerControl'){ + else if (payload.type === 'disablePlayerControl') { this._disablePlayerControlStream.next(); } - else if (payload.type === 'restorePlayerControl'){ + else if (payload.type === 'restorePlayerControl') { this._enablePlayerControlStream.next(); } - else if (payload.type === 'displayBubble'){ + else if (payload.type === 'displayBubble') { this._displayBubbleStream.next(); } - else if (payload.type === 'removeBubble'){ + else if (payload.type === 'removeBubble') { this._removeBubbleStream.next(); } else if (payload.type == "registerMenuCommand" && isMenuItemRegisterEvent(payload.data)) { this._registerMenuCommandStream.next(payload.data.menutItem) @@ -140,7 +140,7 @@ class IframeListener { const iframe = document.createElement('iframe'); iframe.id = this.getIFrameId(scriptUrl); iframe.style.display = 'none'; - iframe.src = '/iframe.html?script='+encodeURIComponent(scriptUrl); + iframe.src = '/iframe.html?script=' + encodeURIComponent(scriptUrl); // We are putting a sandbox on this script because it will run in the same domain as the main website. iframe.sandbox.add('allow-scripts'); @@ -164,8 +164,8 @@ class IframeListener { '\n' + '\n' + '\n' + - '\n' + - '\n' + + '\n' + + '\n' + '\n' + '\n'; @@ -182,14 +182,14 @@ class IframeListener { } private getIFrameId(scriptUrl: string): string { - return 'script'+crypto.createHash('md5').update(scriptUrl).digest("hex"); + return 'script' + crypto.createHash('md5').update(scriptUrl).digest("hex"); } unregisterScript(scriptUrl: string): void { const iFrameId = this.getIFrameId(scriptUrl); const iframe = HtmlUtils.getElementByIdOrFail(iFrameId); if (!iframe) { - throw new Error('Unknown iframe for script "'+scriptUrl+'"'); + throw new Error('Unknown iframe for script "' + scriptUrl + '"'); } this.unregisterIframe(iframe); iframe.remove(); @@ -246,7 +246,7 @@ class IframeListener { /** * Sends the message... to all allowed iframes. */ - private postMessage(message: IframeEvent) { + private postMessage(message: IframeResponseEvent) { for (const iframe of this.iframes) { iframe.contentWindow?.postMessage(message, '*'); } diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts index 1b68b0c1..1713de4a 100644 --- a/front/src/iframe_api.ts +++ b/front/src/iframe_api.ts @@ -1,14 +1,14 @@ -import {ChatEvent, isChatEvent} from "./Api/Events/ChatEvent"; -import {isIframeEventWrapper} from "./Api/Events/IframeEvent"; -import {isUserInputChatEvent, UserInputChatEvent} from "./Api/Events/UserInputChatEvent"; -import {Subject} from "rxjs"; -import {EnterLeaveEvent, isEnterLeaveEvent} from "./Api/Events/EnterLeaveEvent"; -import {OpenPopupEvent} from "./Api/Events/OpenPopupEvent"; -import {isButtonClickedEvent} from "./Api/Events/ButtonClickedEvent"; -import {ClosePopupEvent} from "./Api/Events/ClosePopupEvent"; -import {OpenTabEvent} from "./Api/Events/OpenTabEvent"; -import {GoToPageEvent} from "./Api/Events/GoToPageEvent"; -import {OpenCoWebSiteEvent} from "./Api/Events/OpenCoWebSiteEvent"; +import { ChatEvent } from "./Api/Events/ChatEvent"; +import { isIframeResponseEventWrapper } from "./Api/Events/IframeEvent"; +import { isUserInputChatEvent, UserInputChatEvent } from "./Api/Events/UserInputChatEvent"; +import { Subject } from "rxjs"; +import { EnterLeaveEvent, isEnterLeaveEvent } from "./Api/Events/EnterLeaveEvent"; +import { OpenPopupEvent } from "./Api/Events/OpenPopupEvent"; +import { isButtonClickedEvent } from "./Api/Events/ButtonClickedEvent"; +import { ClosePopupEvent } from "./Api/Events/ClosePopupEvent"; +import { OpenTabEvent } from "./Api/Events/OpenTabEvent"; +import { GoToPageEvent } from "./Api/Events/GoToPageEvent"; +import { OpenCoWebSiteEvent } from "./Api/Events/OpenCoWebSiteEvent"; import { isMenuItemClickedEvent } from './Api/Events/MenuItemClickedEvent'; import { MenuItemRegisterEvent } from './Api/Events/MenuItemRegisterEvent'; @@ -22,10 +22,10 @@ interface WorkAdventureApi { goToPage(url : string): void; openCoWebSite(url : string): void; closeCoWebSite(): void; - disablePlayerControl() : void; - restorePlayerControl() : void; - displayBubble() : void; - removeBubble() : void; + disablePlayerControl(): void; + restorePlayerControl(): void; + displayBubble(): void; + removeBubble(): void; registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void): void } @@ -53,7 +53,7 @@ interface ButtonDescriptor { /** * The type of the button. Can be one of "normal", "primary", "success", "warning", "error", "disabled" */ - className?: "normal"|"primary"|"success"|"warning"|"error"|"disabled", + className?: "normal" | "primary" | "success" | "warning" | "error" | "disabled", /** * Callback called if the button is pressed */ @@ -91,38 +91,38 @@ window.WA = { } as ChatEvent }, '*'); }, - disablePlayerControl() : void { - window.parent.postMessage({'type' : 'disablePlayerControl'},'*'); + disablePlayerControl(): void { + window.parent.postMessage({ 'type': 'disablePlayerControl' }, '*'); }, - restorePlayerControl() : void { - window.parent.postMessage({'type' : 'restorePlayerControl'},'*'); + restorePlayerControl(): void { + window.parent.postMessage({ 'type': 'restorePlayerControl' }, '*'); }, - displayBubble() : void { - window.parent.postMessage({'type' : 'displayBubble'},'*'); + displayBubble(): void { + window.parent.postMessage({ 'type': 'displayBubble' }, '*'); }, - removeBubble() : void { - window.parent.postMessage({'type' : 'removeBubble'},'*'); + removeBubble(): void { + window.parent.postMessage({ 'type': 'removeBubble' }, '*'); }, - openTab(url : string) : void{ + openTab(url: string): void { window.parent.postMessage({ - "type" : 'openTab', - "data" : { + "type": 'openTab', + "data": { url } as OpenTabEvent - },'*'); + }, '*'); }, - goToPage(url : string) : void{ + goToPage(url: string): void { window.parent.postMessage({ - "type" : 'goToPage', - "data" : { + "type": 'goToPage', + "data": { url } as GoToPageEvent - },'*'); + }, '*'); }, openCoWebSite(url : string) : void{ @@ -131,13 +131,13 @@ window.WA = { "data" : { url } as OpenCoWebSiteEvent - },'*'); + }, '*'); }, - closeCoWebSite() : void{ + closeCoWebSite(): void { window.parent.postMessage({ - "type" : 'closeCoWebSite' - },'*'); + "type": 'closeCoWebSite' + }, '*'); }, openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup { @@ -218,9 +218,9 @@ window.addEventListener('message', message => { const payload = message.data; - console.log(payload); + console.debug(payload); - if (isIframeEventWrapper(payload)) { + if (isIframeResponseEventWrapper(payload)) { const payloadData = payload.data; if (payload.type === 'userInputChat' && isUserInputChatEvent(payloadData)) { userInputChatStream.next(payloadData); @@ -232,7 +232,7 @@ window.addEventListener('message', message => { const callback = popupCallbacks.get(payloadData.popupId)?.get(payloadData.buttonId); const popup = popups.get(payloadData.popupId); if (popup === undefined) { - throw new Error('Could not find popup with ID "'+payloadData.popupId+'"'); + throw new Error('Could not find popup with ID "' + payloadData.popupId + '"'); } if (callback) { callback(popup);