typed iframe api events
# Conflicts: # front/src/Api/IframeListener.ts # front/src/iframe_api.ts
This commit is contained in:
parent
5605e63e5f
commit
8da5bf9f8e
3 changed files with 106 additions and 45 deletions
|
@ -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, '*');
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue