Skip to content

Commit 848bb18

Browse files
Add documentation for context menu (#151)
* Documented context menu in application-menu.md (Desktop) * Slightly improved context menu docs Written explicitly that the type of menu is a native one. * tweak --------- Co-authored-by: Simon Hamp <simon.hamp@me.com>
1 parent c022786 commit 848bb18

File tree

1 file changed

+57
-0
lines changed

1 file changed

+57
-0
lines changed

resources/views/docs/desktop/1/the-basics/application-menu.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -425,3 +425,60 @@ Menu::make()
425425
Menu::quit(),
426426
);
427427
```
428+
429+
## Context Menu
430+
431+
You may wish to add a custom native context menu to the elements in the views of your application and override the default one.
432+
433+
You can use the `Native` JavaScript helper provided by NativePHP's preload script.
434+
435+
This object exposes the `contextMenu()` method which takes an array of objects that matches the
436+
[MenuItem](https://www.electronjs.org/docs/latest/api/menu-item) constructor's `options` argument.
437+
438+
```js
439+
Native.contextMenu([
440+
{
441+
label: 'Edit',
442+
accelerator: 'e',
443+
click(menuItem, window, event) {
444+
// Code to execute when the menu item is clicked
445+
},
446+
},
447+
// Other options
448+
]);
449+
```
450+
451+
You can listen for the `contextmenu` event to show your custom context menu:
452+
453+
```js
454+
const element = document.getElementById('your-element');
455+
456+
element.addEventListener('contextmenu', (event) => {
457+
event.preventDefault();
458+
459+
Native.contextMenu([
460+
{
461+
label: 'Duplicate',
462+
accelerator: 'd',
463+
click() {
464+
duplicateEntry(element.dataset.id);
465+
},
466+
},
467+
{
468+
label: 'Edit',
469+
accelerator: 'e',
470+
click() {
471+
showEditForm(element.dataset.id);
472+
},
473+
},
474+
{
475+
label: 'Delete',
476+
click() {
477+
if (confirm('Are you sure you want to delete this entry?')) {
478+
deleteEntry(element.dataset.id);
479+
}
480+
},
481+
},
482+
]);
483+
});
484+
```

0 commit comments

Comments
 (0)