Contextmenu

[BContextMenu]{#BContextMenu data-4search="ui/b/contextmenu.js:BContextMenu;section"}

The element implements a modal popup that displays contextmenu choices, based on <button uri=... ic=... kbd=.../> elements, see also BMenuRow, BMenuTitle and BMenuSeparator. Menu actions are identified via URI attributes, they can be activated by calling a handler which is assigned via the .activate property, or the actions can be checked for being disabled by calling a handler which is assigned via the .isactivate property. The ic attribute on buttons embeds a <b-icon ic=.../> inside the buttons that are children of a . Using the popup() method, the menu can be popped up via HTMLDialogElement.showModal. Example:

<div @contextmenu="e => querySelector('b-contextmenu').popup (e)">
  <b-contextmenu .activate="menuactivation">
    <button ic="mi-close" kbd="Shift+Ctrl+Q" uri="quit" > Quit </button>
  </b-contextmenu>
</div>

Note that keyboard presses, mouse clicks, drag selections and event bubbling can all cause menu item clicks and contextmenu activation. In order to deduplicate multiple events that arise from the same user interaction, one popup request and one click activation is processed per animation frame.

Properties:

.activate (uri) : Callback handler which is called with a menu item URI once a menu item is activated. : Note, this handler can be called with an URI for which .isactive previously returned false, in particular via hotkeys. .isactive (uri) -> Promise : Async callback used to check for a particular menu item by URI to stay active or be disabled, called during popup().

Attributes:

xscale : Consider a wider area than the context menu width for popup positioning. yscale : Consider a taller area than the context menu height for popup positioning.

Events:

click (event) : Event signaling activation of a menu item, the uri can be found via get_uri (event.target). close (event) : Event signaling closing of the menu, regardless of whether menu item activation occoured or not.

Methods:

popup (event, { origin, focus_uri, data-contextmenu }) : Popup the contextmenu, propagation of event is halted and the event coordinates or target is : used for positioning unless origin is given. : The origin is a reference DOM element to use for drop-down positioning. : The focus_uri is a <button uri.../> menu item URI to receive focus after popup. : The data-contextmenu element (or origin) has the data-contextmenu=true attribute assigned during popup. close() : Hide the contextmenu. map_kbd_hotkeys (active) : Activate/deactivate a global hotkey map containing the <button kbd=.../> hotkeys specified in menu items. : For hotkeys, no prior .isactive check is carried out.

BContextMenu class

class [BContextMenu]{#BContextMenu data-4search="ui/b/contextmenu.js:BContextMenu;class"} : …

[**`map_kbd_hotkeys`**]{#map_kbd_hotkeys data-4search="ui/b/contextmenu.js:map_kbd_hotkeys;func"}  `(`*active*`)`
:   Activate or disable the `kbd=...` hotkeys in menu items.

[**`find_menuitem`**]{#find_menuitem data-4search="ui/b/contextmenu.js:find_menuitem;func"}  `(`*uri*`)`
:   Find a menuitem via its URI.

Functions

[render_contextmenu]{#render_contextmenu data-4search="ui/b/contextmenu.js:render_contextmenu;func"} (b_contextmenu, make_lithtml, target, data) : Render and return a cached reusable from make_lithtml(target,data).

[integrate_button]{#integrate_button data-4search="ui/b/contextmenu.js:integrate_button;func"} (contextmenu) : Integrate b-contextmenu button into contextmenu handling.