Specification: programmatically open/close a contextmenu

[sroucheray]

Request 1

As a user of the @perfectmemory/ngx-contextmenu library, I want to be able to open the contextmenu by other mean than the contextmenu event, to make the contextmenu available on Safari iOS which does not support this event see https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event#browser_compatibility and https://bugs.webkit.org/show_bug.cgi?id=213953. This was requested here https://github.com/PerfectMemory/ngx-contextmenu/issues/8

Request 2

As a user of the @perfectmemory/ngx-contextmenu library, I want to be able to close all contextmenu programmatically, to make sure none of them are displayed when my page layout changes somehow. This was requested here https://github.com/PerfectMemory/ngx-contextmenu/issues/9

Notes

In previous version there was a service that was able to do some kind of this work but it was marked as internal, has been refactored and is not to be used anymore outside the library. Thus it is not documented.

This specification intends to document what we need to add to the library to provide those 2 features.

Implementation

• The methods open and close should be made available on the contextmenu directive.
• The open method won't have any parameter and will open the contextmenu at the bottom left of the DOM element where the directive is attached.
• The close method won't have any parameter and, when called, will completely close the current contextmenu including submenus.
• To access those methods, the directive should be exported with a proper name that won't conflict with other libraries. For example ngxContextMenu

  @Directive({
  selector: '[contextMenu]',
  exportAs: 'ngxContextMenu',
  })

  Usage

Those usage should work:

• Close the menu when the global key combination Shift+Y is pressed

  <div
  [contextMenu]="basicMenu"
  #ngxContextMenu="ngxContextMenu"
  (window:keydown.shift.Y)="ngxContextMenu.close()"
  ></div>

• Open the menu when clicking

  <div
  [contextMenu]="basicMenu"
  #ngxContextMenu="ngxContextMenu"
  (click)="ngxContextMenu.open($event)"
  ></div>

• Open the menu when focused and the key Enter is pressed

  <div
  [contextMenu]="basicMenu"
  #ngxContextMenu="ngxContextMenu"
  tabindex="0"
  (keydown.enter)="ngxContextMenu.open()"
  ></div>

The implementation should include code, associated unit tests and documentation with examples.

EDIT: 2023-06-15 add $event property to the example where required

[sroucheray]

Implemented in 8.1.0 and forward ported to 14.1.0

[michelebenolli]

Are you planning to port it in v16?

[sroucheray]

Hi @michelebenolli, it's here https://www.npmjs.com/package/@perfectmemory/ngx-contextmenu?activeTab=versions

[michelebenolli]

Unfortunately, with v16.0.0 I'm still not able to open the menu with left click, following the instructions above

[sroucheray]

Could you provide a stackblitz with a minimum reproduction of your problem ?

[michelebenolli]

https://stackblitz.com/edit/stackblitz-starters-krwtxe?file=src%2Fapp%2Fapp.component.html

[sroucheray]

OK, there is a subtle error in the example. The exact syntax is

  (click)="contextMenu.open($event)"

for mouse events do not forget the $event parameter

  (keydown.enter)="contextMenu.open()"

for keyboard this is not required

[sroucheray]

Proper documentation is here https://perfectmemory.github.io/ngx-contextmenu/?path=/docs/context-menu-documentation-in-a-nutshell--docs#by-reusing-directive

[michelebenolli]

Thank you (: