Context menu is a standard UI feature and in order to support them Sciter has following mechanisms on board:
- custom CSS property named context-menu. It defines location of DOM element ( usually it is one of
<menu class=context>
) that will appear on context menu activation. - Menu behaviors and their DOM events associated with menus.
- Context menu activation and initialization mechanism.
context-menu
style property
Sciter specific context-menu
is non-inheritable CSS property that accepts one of the following values:
none
– default value, the element has no context menu;selector(...)
– defines selector of existing DOM element that is used as a menu ( usually it is one of<menu class=context>
elements);url(...)
– defines URL of [partial] HTML containing menu definition.
Example:
<style> div.bar { context-menu: selector(menu#foo); } div.baz { context-menu: url(for-baz.htm); } </style> <div class="bar">With #foo context menu</div> <div class="baz">With for-baz.htm context menu</div> <menu class=context id="foo"> <caption>#foo menu for .bar elements</caption> <li id="i1">First item</li> <li id="i2">Second item</li> <li id="i3">Third item</li> <li id="i4">Fourth item</li> </menu>
There are two elements that will have context menu in this markup:
<div class=bar>
– will have contextmenu#foo
and<div class=baz>
– will have context menu created by loading for-baz.htm partial HTML document.
Content of that for-baz.htm document may look like as:
<menu> <caption>External menu:</caption> <li id="mi1">First item</li> <li id="mi2">Second item</li> <li id="mi3">Third item</li> <li id="mi4">Fourth item</li> </menu>
behavior:menu and its events
By default each <menu class=context>
(or simply <menu.context>
) has behavior:menu;
attached to it.
Main purpose of behavior:menu is to support basic menu operations:
- navigation, including hierarchical menus navigation;
- generation of menu click events.
When user clicks on one of menu options the behavior generates bubbling Event.MENU_ITEM_CLICK with:
Event.target
, DOM element – clicked menu item element;Event.owner
, DOM element – owner of the menu – element that has context-menu defined on it.
MENU_ITEM_CLICK events are dispatched using special bubbling rules: MENU_ITEM_CLICK will be received not by physical DOM parents but by [logical] owners of the menu – by elements – owners of the context menus.
Therefore in order to handle menu clicks you can subscribe either to raw control events:
var elemWithMenu = self.select("div.baz"); elemWithMenu.onControlEvent = function(event) { if( event.type == Event.Event.MENU_ITEM_CLICK ) { var menu_item = event.target; ... }
}
or by using jQuery alike mechanism:
elemWithMenu.subscribe("click", "menu > li", function(event) { var menu_item = event.target; var owner = event.owner; });
Context menu activation and initialization
Context menu activation starts from receiving of WM_CONTEXTMENU on Microsoft Windows or Right-Mouse-click on Mac OS X.
When Sciter receives context menu activation request it does the following:
- Finds element under the mouse or element in focus (topmost mouse hover element) and sends bubbling Event.CONTEXT_MENU_REQUEST to it.
- If some element in parent/child chain consumes the event (returns true from that event handler ) and sets
element.source = someMenuElement
to some existing DOM element then that element is used as a context menu. Any CSS context-menu declarations are ignored in this case. - If Event.CONTEXT_MENU_REQUEST is not handled by user’s code then the engine creates menu by inspecting context-menu declarations in elements of child-parent chain of topmost mouse hover element. First element in the chain that has context-menu defined is declared as menu owner and menu is created for it.
- As last step before showing the menu the engine sends bubbling Event.CONTEXT_MENU_SETUP to the menu owner and all its parents. By handling Event.CONTEXT_MENU_SETUP the menu owner and all its containers can participate in setting up the menu. The Event.CONTEXT_MENU_SETUP is being sent with:
- event.target == menu owner element;
- event.source == the menu.
Check context menu sample in Sciter SDK: /samples/menu/context-menu.htm
Note that context menu as any other popup element is Sciter may have arbitrary markup and styles. For example context menu may have items organized horizontally. Or may have <input|text>
inside if needed.