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
|
||||
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 {GoToPageEvent, isGoToPageEvent} from "./Events/GoToPageEvent";
|
||||
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>();
|
||||
|
||||
init() {
|
||||
window.addEventListener("message", (message) => {
|
||||
window.addEventListener("message", (message: MessageEvent<IframeEvent<keyof IframeEventMap>>) => {
|
||||
// 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).
|
||||
@ -231,7 +240,7 @@ class IframeListener {
|
||||
/**
|
||||
* Sends the message... to all allowed iframes.
|
||||
*/
|
||||
private postMessage(message: IframeEvent) {
|
||||
private postMessage(message: IframeResponseEvent<keyof IframeResponseEventMap>) {
|
||||
for (const iframe of this.iframes) {
|
||||
iframe.contentWindow?.postMessage(message, '*');
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import {ChatEvent, isChatEvent} from "./Api/Events/ChatEvent";
|
||||
import {isIframeEventWrapper} from "./Api/Events/IframeEvent";
|
||||
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";
|
||||
@ -205,9 +205,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);
|
||||
|
Loading…
Reference in New Issue
Block a user