diff --git a/docs/maps/api-ui.md b/docs/maps/api-ui.md
index e4b9425d..3239890a 100644
--- a/docs/maps/api-ui.md
+++ b/docs/maps/api-ui.md
@@ -68,25 +68,56 @@ WA.room.onLeaveZone('myZone', () => {
### Add custom menu
-```typescript
-WA.ui.registerMenuCommand(menuCommand: string, callback: (menuCommand: string) => void): void
```
-Add a custom menu item containing the text `commandDescriptor` in the main menu. A click on the menu will trigger the `callback`.
+WA.ui.registerMenuCommand(commandDescriptor: string, options: MenuOptions | ((commandDescriptor: string) => void)): Menu
+```
+Add a custom menu item containing the text `commandDescriptor` in the navbar of the menu.
+`options` attributes can have three values :
+- `(commandDescriptor: string) => void` : That value is deprecated. But will work like the second value.
+- `{callback : (commandDescriptor: string) => void, allowApi?: boolean = true}` : A click on the custom menu will trigger the `callback`. The `allowApi` attribute is not used with the `callback`.
+- `{iframe: string, allowApi?: boolean = true}` : A click on the custom menu will open the `iframe` inside the menu. The `allowApi` attribute allow the `iframe` to use the Scripting API.
+
Custom menu exist only until the map is unloaded, or you leave the iframe zone of the script.
-Example:
+
+
+
+
+
+
+
+
+Example:
```javascript
-
-WA.ui.registerMenuCommand("test", () => {
- WA.chat.sendChatMessage("test clicked", "menu cmd")
+//Add a callback menu in a zone
+let menu: undefined;
+WA.room.onEnterZone('myZone', () => {
+ menu = WA.ui.registerMenuCommand('menu test', {callback: () => {
+ WA.chat.sendChatMessage('test');
+ }})
+})
+//Remove the callback menu when the player leave the zone
+WA.room.onLeaveZone('myZone', () => {
+ menu.remove();
})
+//Add an iframe in the menu
+WA.ui.registerMenuCommand('iframe', {iframe: 'myIframe.html', allowApi: true});
```
-
-
-
+Please note that `registerMenuCommand` returns an object of the `Menu` class.
+
+The `Menu` class contains a single method: `remove(): void`. This will obviously remove the menu when called.
+
+```javascript
+class Menu {
+ /**
+ * Remove the menu
+ */
+ remove() {};
+}
+```
diff --git a/docs/maps/images/custom-menu-iframe.png b/docs/maps/images/custom-menu-iframe.png
new file mode 100644
index 00000000..9df2aa5f
Binary files /dev/null and b/docs/maps/images/custom-menu-iframe.png differ
diff --git a/docs/maps/images/custom-menu-navbar.png b/docs/maps/images/custom-menu-navbar.png
new file mode 100644
index 00000000..c2440956
Binary files /dev/null and b/docs/maps/images/custom-menu-navbar.png differ
diff --git a/maps/tests/MenuSvelte.json b/maps/tests/MenuSvelte.json
deleted file mode 100644
index f65c7c6c..00000000
--- a/maps/tests/MenuSvelte.json
+++ /dev/null
@@ -1,136 +0,0 @@
-{ "compressionlevel":-1,
- "height":20,
- "infinite":false,
- "layers":[
- {
- "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 34, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- "height":20,
- "id":2,
- "name":"start",
- "opacity":1,
- "type":"tilelayer",
- "visible":true,
- "width":20,
- "x":0,
- "y":0
- },
- {
- "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
- "height":20,
- "id":4,
- "name":"floor",
- "opacity":1,
- "type":"tilelayer",
- "visible":true,
- "width":20,
- "x":0,
- "y":0
- },
- {
- "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 23, 23, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 23, 23, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 23, 23, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- "height":20,
- "id":3,
- "name":"playSound",
- "opacity":1,
- "type":"tilelayer",
- "visible":true,
- "width":20,
- "x":0,
- "y":0
- },
- {
- "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 23, 23, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 23, 23, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 23, 23, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
- "height":20,
- "id":6,
- "name":"playSoundLoop",
- "opacity":1,
- "type":"tilelayer",
- "visible":true,
- "width":20,
- "x":0,
- "y":0
- },
- {
- "draworder":"topdown",
- "id":5,
- "name":"floorLayer",
- "objects":[
- {
- "height":19.296875,
- "id":2,
- "name":"",
- "rotation":0,
- "text":
- {
- "text":"Play Sound",
- "wrap":true
- },
- "type":"",
- "visible":true,
- "width":107.109375,
- "x":258.4453125,
- "y":197.018229166667
- },
- {
- "height":19.296875,
- "id":3,
- "name":"",
- "rotation":0,
- "text":
- {
- "text":"Bonjour Monde",
- "wrap":true
- },
- "type":"",
- "visible":true,
- "width":107.109375,
- "x":-348.221354166667,
- "y":257.018229166667
- },
- {
- "height":55.296875,
- "id":4,
- "name":"",
- "rotation":0,
- "text":
- {
- "text":"Play Sound Loop\nexit Zone Stop Sound \n",
- "wrap":true
- },
- "type":"",
- "visible":true,
- "width":176.442708333333,
- "x":243.778645833333,
- "y":368.3515625
- }],
- "opacity":1,
- "type":"objectgroup",
- "visible":true,
- "x":0,
- "y":0
- }],
- "nextlayerid":8,
- "nextobjectid":5,
- "orientation":"orthogonal",
- "renderorder":"right-down",
- "tiledversion":"1.6.0",
- "tileheight":32,
- "tilesets":[
- {
- "columns":11,
- "firstgid":1,
- "image":"tileset1.png",
- "imageheight":352,
- "imagewidth":352,
- "margin":0,
- "name":"tileset1",
- "spacing":0,
- "tilecount":121,
- "tileheight":32,
- "tilewidth":32
- }],
- "tilewidth":32,
- "type":"map",
- "version":"1.6",
- "width":20
-}
\ No newline at end of file
diff --git a/maps/tests/Metadata/customIframeMenu.html b/maps/tests/Metadata/customIframeMenu.html
index 5d01e266..a17457ac 100644
--- a/maps/tests/Metadata/customIframeMenu.html
+++ b/maps/tests/Metadata/customIframeMenu.html
@@ -3,7 +3,7 @@
Custom Iframe Menu
-
-GO TO WA BY IFRAME
+
+ This is an iframe in a custom menu.
\ No newline at end of file
diff --git a/maps/tests/Metadata/customIframeMenuApi.html b/maps/tests/Metadata/customIframeMenuApi.html
index 7b67f087..afe840cc 100644
--- a/maps/tests/Metadata/customIframeMenuApi.html
+++ b/maps/tests/Metadata/customIframeMenuApi.html
@@ -14,7 +14,7 @@
})
-
- This iframe send you a message in the chat.
+
+ This is an iframe in a custom menu.
\ No newline at end of file
diff --git a/maps/tests/Metadata/customMenu.js b/maps/tests/Metadata/customMenu.js
index 11c327ea..ba66ee0d 100644
--- a/maps/tests/Metadata/customMenu.js
+++ b/maps/tests/Metadata/customMenu.js
@@ -1,10 +1,10 @@
let menuIframeApi = undefined;
-WA.ui.registerMenuCommand('TO WA', () => {
+WA.ui.registerMenuCommand('custom callback menu', () => {
WA.nav.openTab("https://workadventu.re/");
})
-WA.ui.registerMenuCommand('TO WA BY IFRAME', {iframe: 'customIframeMenu.html'});
+WA.ui.registerMenuCommand('custom iframe menu', {iframe: 'customIframeMenu.html'});
WA.room.onEnterZone('iframeMenu', () => {
menuIframeApi = WA.ui.registerMenuCommand('IFRAME USE API', {iframe: 'customIframeMenuApi.html', allowApi: true});