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});