Merge pull request #1392 from thecodingmachine/iframeMenuScript

Iframe menu script

front/src/Api/iframe/Ui/Menu.ts

@@ -0,0 +1,17 @@
+import { sendToWorkadventure } from "../IframeApiContribution";
+
+export class Menu {
+    constructor(private menuName: string) {}
+
+    /**
+     * remove the menu
+     */
+    public remove() {
+        sendToWorkadventure({
+            type: "unregisterMenu",
+            data: {
+                name: this.menuName,
+            },
+        });
+    }
+}

front/src/Api/iframe/ui.ts

@@ -6,6 +6,8 @@ import type { ButtonClickedCallback, ButtonDescriptor } from "./Ui/ButtonDescrip
 import { Popup } from "./Ui/Popup";
 import { ActionMessage } from "./Ui/ActionMessage";
 import { isMessageReferenceEvent } from "../Events/ui/TriggerActionMessageEvent";
+import { Menu } from "./Ui/Menu";
+import type { RequireOnlyOne } from "../types";
 
 let popupId = 0;
 const popups: Map<number, Popup> = new Map<number, Popup>();
@@ -14,9 +16,18 @@ const popupCallbacks: Map<number, Map<number, ButtonClickedCallback>> = new Map<
     Map<number, ButtonClickedCallback>
 >();
 
+const menus: Map<string, Menu> = new Map<string, Menu>();
 const menuCallbacks: Map<string, (command: string) => void> = new Map();
 const actionMessages = new Map<string, ActionMessage>();
 
+interface MenuDescriptor {
+    callback?: (commandDescriptor: string) => void;
+    iframe?: string;
+    allowApi?: boolean;
+}
+
+export type MenuOptions = RequireOnlyOne<MenuDescriptor, "callback" | "iframe">;
+
 interface ZonedPopupOptions {
     zone: string;
     objectLayerName?: string;
@@ -52,6 +63,10 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
             typeChecker: isMenuItemClickedEvent,
             callback: (event) => {
                 const callback = menuCallbacks.get(event.menuItem);
+                const menu = menus.get(event.menuItem);
+                if (menu === undefined) {
+                    throw new Error('Could not find menu named "' + event.menuItem + '"');
+                }
                 if (callback) {
                     callback(event.menuItem);
                 }
@@ -104,14 +119,53 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
         return popup;
     }
 
-    registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void) {
-        menuCallbacks.set(commandDescriptor, callback);
-        sendToWorkadventure({
-            type: "registerMenuCommand",
-            data: {
-                menutItem: commandDescriptor,
-            },
-        });
+    registerMenuCommand(commandDescriptor: string, options: MenuOptions | ((commandDescriptor: string) => void)): Menu {
+        const menu = new Menu(commandDescriptor);
+
+        if (typeof options === "function") {
+            menuCallbacks.set(commandDescriptor, options);
+            sendToWorkadventure({
+                type: "registerMenu",
+                data: {
+                    name: commandDescriptor,
+                    options: {
+                        allowApi: false,
+                    },
+                },
+            });
+        } else {
+            options.allowApi = options.allowApi === undefined ? options.iframe !== undefined : options.allowApi;
+
+            if (options.iframe !== undefined) {
+                sendToWorkadventure({
+                    type: "registerMenu",
+                    data: {
+                        name: commandDescriptor,
+                        iframe: options.iframe,
+                        options: {
+                            allowApi: options.allowApi,
+                        },
+                    },
+                });
+            } else if (options.callback !== undefined) {
+                menuCallbacks.set(commandDescriptor, options.callback);
+                sendToWorkadventure({
+                    type: "registerMenu",
+                    data: {
+                        name: commandDescriptor,
+                        options: {
+                            allowApi: options.allowApi,
+                        },
+                    },
+                });
+            } else {
+                throw new Error(
+                    "When adding a menu with WA.ui.registerMenuCommand, you must pass either an iframe or a callback"
+                );
+            }
+        }
+        menus.set(commandDescriptor, menu);
+        return menu;
     }
 
     displayBubble(): void {