typed iframe api events
# Conflicts: # front/src/Api/IframeListener.ts # front/src/iframe_api.ts
This commit is contained in:
parent
5605e63e5f
commit
8da5bf9f8e
@ -1,7 +1,59 @@
|
|||||||
export interface IframeEvent {
|
|
||||||
type: string;
|
|
||||||
data: unknown;
|
//import { GameStateEvent } from './ApiGameStateEvent';
|
||||||
|
//import { UpdateTileEvent } from './ApiUpdateTileEvent';
|
||||||
|
import { ButtonClickedEvent } from './ButtonClickedEvent';
|
||||||
|
import { ChatEvent } from './ChatEvent';
|
||||||
|
import { ClosePopupEvent } from './ClosePopupEvent';
|
||||||
|
import { EnterLeaveEvent } from './EnterLeaveEvent';
|
||||||
|
import { GoToPageEvent } from './GoToPageEvent';
|
||||||
|
import { LoadPageEvent } from './LoadPageEvent';
|
||||||
|
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 type IframeEventMap = {
|
||||||
|
//getState: GameStateEvent,
|
||||||
|
// updateTile: UpdateTileEvent
|
||||||
|
chat: ChatEvent,
|
||||||
|
openPopup: OpenPopupEvent
|
||||||
|
closePopup: ClosePopupEvent
|
||||||
|
openTab: OpenTabEvent
|
||||||
|
goToPage: GoToPageEvent
|
||||||
|
openCoWebSite: OpenCoWebSiteEvent
|
||||||
|
closeCoWebSite: null
|
||||||
|
disablePlayerControl: null
|
||||||
|
restorePlayerControl: null
|
||||||
|
displayBubble: null
|
||||||
|
removeBubble: null
|
||||||
|
registerMenuCommand: MenuItemRegisterEvent
|
||||||
|
loadPage: LoadPageEvent
|
||||||
|
}
|
||||||
|
export interface IframeEvent<T extends keyof IframeEventMap> {
|
||||||
|
type: T;
|
||||||
|
data: IframeEventMap[T];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
export const isIframeEventWrapper = (event: any): event is IframeEvent<keyof IframeEventMap> => typeof event.type === 'string';
|
||||||
|
|
||||||
|
export interface IframeResponseEventMap {
|
||||||
|
menuItemClicked: MenuItemClickedEvent
|
||||||
|
userInputChat: UserInputChatEvent
|
||||||
|
enterEvent: EnterLeaveEvent
|
||||||
|
leaveEvent: EnterLeaveEvent
|
||||||
|
buttonClickedEvent: ButtonClickedEvent
|
||||||
|
// gameState: GameStateEvent
|
||||||
|
}
|
||||||
|
export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
|
||||||
|
type: T;
|
||||||
|
data: IframeResponseEventMap[T];
|
||||||
}
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
// 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<keyof IframeResponseEventMap> => typeof event.type === 'string';
|
@ -12,6 +12,15 @@ import {ClosePopupEvent, isClosePopupEvent} from "./Events/ClosePopupEvent";
|
|||||||
import {scriptUtils} from "./ScriptUtils";
|
import {scriptUtils} from "./ScriptUtils";
|
||||||
import {GoToPageEvent, isGoToPageEvent} from "./Events/GoToPageEvent";
|
import {GoToPageEvent, isGoToPageEvent} from "./Events/GoToPageEvent";
|
||||||
import {isOpenCoWebsite, OpenCoWebSiteEvent} from "./Events/OpenCoWebSiteEvent";
|
import {isOpenCoWebsite, OpenCoWebSiteEvent} from "./Events/OpenCoWebSiteEvent";
|
||||||
|
import { IframeEventMap, IframeEvent, IframeResponseEvent, IframeResponseEventMap, isIframeEventWrapper } from "./Events/IframeEvent";
|
||||||
|
import { isLoadPageEvent } from './Events/LoadPageEvent';
|
||||||
|
import { MenuItemClickedEvent } from './Events/MenuItemClickedEvent';
|
||||||
|
import { isMenuItemRegisterEvent } from './Events/MenuItemRegisterEvent';
|
||||||
|
import { isOpenCoWebsite, OpenCoWebSiteEvent } from "./Events/OpenCoWebSiteEvent";
|
||||||
|
import { isOpenPopupEvent, OpenPopupEvent } from "./Events/OpenPopupEvent";
|
||||||
|
import { isOpenTabEvent, OpenTabEvent } from "./Events/OpenTabEvent";
|
||||||
|
import { UserInputChatEvent } from "./Events/UserInputChatEvent";
|
||||||
|
import { scriptUtils } from "./ScriptUtils";
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -56,7 +65,7 @@ class IframeListener {
|
|||||||
private readonly scripts = new Map<string, HTMLIFrameElement>();
|
private readonly scripts = new Map<string, HTMLIFrameElement>();
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
window.addEventListener("message", (message) => {
|
window.addEventListener("message", (message: MessageEvent<IframeEvent<keyof IframeEventMap>>) => {
|
||||||
// Do we trust the sender of this message?
|
// Do we trust the sender of this message?
|
||||||
// Let's only accept messages from the iframe that are allowed.
|
// 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).
|
// Note: maybe we could restrict on the domain too for additional security (in case the iframe goes to another domain).
|
||||||
@ -231,7 +240,7 @@ class IframeListener {
|
|||||||
/**
|
/**
|
||||||
* Sends the message... to all allowed iframes.
|
* Sends the message... to all allowed iframes.
|
||||||
*/
|
*/
|
||||||
private postMessage(message: IframeEvent) {
|
private postMessage(message: IframeResponseEvent<keyof IframeResponseEventMap>) {
|
||||||
for (const iframe of this.iframes) {
|
for (const iframe of this.iframes) {
|
||||||
iframe.contentWindow?.postMessage(message, '*');
|
iframe.contentWindow?.postMessage(message, '*');
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import {ChatEvent, isChatEvent} from "./Api/Events/ChatEvent";
|
import { ChatEvent } from "./Api/Events/ChatEvent";
|
||||||
import {isIframeEventWrapper} from "./Api/Events/IframeEvent";
|
import { isIframeResponseEventWrapper } from "./Api/Events/IframeEvent";
|
||||||
import { isUserInputChatEvent, UserInputChatEvent } from "./Api/Events/UserInputChatEvent";
|
import { isUserInputChatEvent, UserInputChatEvent } from "./Api/Events/UserInputChatEvent";
|
||||||
import { Subject } from "rxjs";
|
import { Subject } from "rxjs";
|
||||||
import { EnterLeaveEvent, isEnterLeaveEvent } from "./Api/Events/EnterLeaveEvent";
|
import { EnterLeaveEvent, isEnterLeaveEvent } from "./Api/Events/EnterLeaveEvent";
|
||||||
@ -205,9 +205,9 @@ window.addEventListener('message', message => {
|
|||||||
|
|
||||||
const payload = message.data;
|
const payload = message.data;
|
||||||
|
|
||||||
console.log(payload);
|
console.debug(payload);
|
||||||
|
|
||||||
if (isIframeEventWrapper(payload)) {
|
if (isIframeResponseEventWrapper(payload)) {
|
||||||
const payloadData = payload.data;
|
const payloadData = payload.data;
|
||||||
if (payload.type === 'userInputChat' && isUserInputChatEvent(payloadData)) {
|
if (payload.type === 'userInputChat' && isUserInputChatEvent(payloadData)) {
|
||||||
userInputChatStream.next(payloadData);
|
userInputChatStream.next(payloadData);
|
||||||
|
Loading…
Reference in New Issue
Block a user