From 2fdd99935e93a593eec303b1598344444f15ed3b Mon Sep 17 00:00:00 2001 From: Gennaro Landolfi Date: Fri, 23 May 2025 22:26:03 +0200 Subject: [PATCH 1/3] Documented context menu in application-menu.md (Desktop) --- .../desktop/1/the-basics/application-menu.md | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/resources/views/docs/desktop/1/the-basics/application-menu.md b/resources/views/docs/desktop/1/the-basics/application-menu.md index bc2fa7fa..f4cf5014 100644 --- a/resources/views/docs/desktop/1/the-basics/application-menu.md +++ b/resources/views/docs/desktop/1/the-basics/application-menu.md @@ -425,3 +425,60 @@ Menu::make() Menu::quit(), ); ``` + +## Context Menu + +You may need to add custom context menu to the elements in the views of your application and override the default one. + +You can use the `Native` JavaScript object provvided by NativePHP's preload script. + +This object exposes the `contextMenu()` method which takes an array of objects that matches the +[MenuItem](https://www.electronjs.org/docs/latest/api/menu-item) constructor's `options` argument. + +```js +Native.contextMenu([ + { + label: 'Edit', + accelerator: 'e', + click(menuItem, window, event) { + // Code to execute when the menu item is clicked + }, + }, + // Other options +]); +``` + +You can use the `contextmenu` event to capture the user's action and show your menu: + +```js +const element = document.getElementById('your-element'); + +element.addEventListener('contextmenu', (event) => { + event.preventDefault(); + + Native.contextMenu([ + { + label: 'Duplicate', + accelerator: 'd', + click() { + duplicateEntry(element.dataset.id); + }, + }, + { + label: 'Edit', + accelerator: 'e', + click() { + showEditForm(element.dataset.id); + }, + }, + { + label: 'Delete', + click() { + if (confirm('Are you sure you want to delete this entry?')) { + deleteEntry(element.dataset.id); + } + }, + }, + ]); +}); +``` From f58486c571473ea37641af068ed05bd1ddc54fa1 Mon Sep 17 00:00:00 2001 From: Gennaro Landolfi Date: Fri, 23 May 2025 22:31:42 +0200 Subject: [PATCH 2/3] Slightly improved context menu docs Written explicitly that the type of menu is a native one. --- resources/views/docs/desktop/1/the-basics/application-menu.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/views/docs/desktop/1/the-basics/application-menu.md b/resources/views/docs/desktop/1/the-basics/application-menu.md index f4cf5014..8e39fa26 100644 --- a/resources/views/docs/desktop/1/the-basics/application-menu.md +++ b/resources/views/docs/desktop/1/the-basics/application-menu.md @@ -428,7 +428,7 @@ Menu::make() ## Context Menu -You may need to add custom context menu to the elements in the views of your application and override the default one. +You may need to add custom native context menu to the elements in the views of your application and override the default one. You can use the `Native` JavaScript object provvided by NativePHP's preload script. From d9950261b7a1a5922219fb0a70bb66ba9c8b3734 Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Mon, 23 Jun 2025 14:28:54 +0100 Subject: [PATCH 3/3] tweak --- .../views/docs/desktop/1/the-basics/application-menu.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/views/docs/desktop/1/the-basics/application-menu.md b/resources/views/docs/desktop/1/the-basics/application-menu.md index 8e39fa26..346963b0 100644 --- a/resources/views/docs/desktop/1/the-basics/application-menu.md +++ b/resources/views/docs/desktop/1/the-basics/application-menu.md @@ -428,9 +428,9 @@ Menu::make() ## Context Menu -You may need to add custom native context menu to the elements in the views of your application and override the default one. +You may wish to add a custom native context menu to the elements in the views of your application and override the default one. -You can use the `Native` JavaScript object provvided by NativePHP's preload script. +You can use the `Native` JavaScript helper provided by NativePHP's preload script. This object exposes the `contextMenu()` method which takes an array of objects that matches the [MenuItem](https://www.electronjs.org/docs/latest/api/menu-item) constructor's `options` argument. @@ -448,7 +448,7 @@ Native.contextMenu([ ]); ``` -You can use the `contextmenu` event to capture the user's action and show your menu: +You can listen for the `contextmenu` event to show your custom context menu: ```js const element = document.getElementById('your-element');