Class idx.widget.MenuDialog


Extends dijit.TooltipDialog, idx.widget._EventTriggerMixin.
The MenuDialog widget is the main container for rich mega-menu content. It extends dijit.TooltipDialog and adds the necessary functionality to enable the resulting popup to act like a menu, and integrate with the rest of the existing dijit menu framework. This results in a widget that facilitates the creation of menus with arbitrary dialog content.

Instances can be supplied as the "popup" parameter for dijit.PopupMenuItem and dijit.PopupMenuBarItem, and will work "as expected". Instances can also operate as popup menus on arbitrary DOM nodes, or for the whole window.

Instances can display with a "shark fin" connector to identify the initiating element or with a thinner border, no shark fin and abutting the initiating element.

Instances behave as content panes, and HTML and dijits may be laid out within them. If a menu with "menuForDialog" set to true is included within the layout, the menu dialog will operate as a drop-down menu in combination with the contained menu.


Defined in: <idx\widget\MenuDialog.js>.

Constructor Summary

Constructor Attributes Constructor Name and Description
 
idx.widget.MenuDialog()
Creates a new idx.widget.MenuDialog

Field Summary

Field Attributes Field Name and Description
 
hoverToOpen 
If true, hover will trigger popup whenever the menu dialog is bound to a DOM node (via bindToDomNode).
 
leftClickToOpen 
If true, a left mouse click (or tap on a touch interface) will trigger popup whenever the menu dialog is bound to a DOM node (via bindDomNode).
 
popupPosition 
Ordered list of positions to try placing the popup at whenever the menu dialog is bound to a DOM node (via bindToDomNode).
 
targetNodeIds 
An array of DOM node ids to which the menu dialog should be bound during widget initialisation.
 
useConnector 
If true, the menu will show a "shark-fin" connector linking the opened popup dialog to the initiating DOM element or menu item.

Method Summary

Method Attributes Method Name and Description
 
bindDomNode(node, params)
Attach the MenuDialog to the specified trigger node.
 
close()
Closes the MenuDialog.
 
focus()
 
onBlur()
An attach point that is called when the MenuDialog loses focus.
 
onCancel()
An attach point for the parent menu to listen for the MenuDialog being cancelled.
 
onClose()
An attach point that is called when the MenuDialog is closed.
 
onExecute()
An attach point for the parent menu to listen for menu items being executed.
 
onOpen(pos)
An attach point that is called when the MenuDialog is opened.
 
open(args)
Opens the MenuDialog at the specified position.
 
postMixInProperties()
 
unBindDomNode(nodeName)
Detach menu dialog from given DOM node.

Constructor Detail

idx.widget.MenuDialog()

Creates a new idx.widget.MenuDialog 
<div data-dojo-type="idx.widget.MenuBar">
  <div data-dojo-type="dijit.PopupMenuBarItem">
    <span>Menu #1</span>
    <div data-dojo-type="idx.widget.MenuDialog">
      <!-- Arbitrary mega menu content -->
    </div>
  </div>
</div>

Field Detail

{boolean} hoverToOpen

If true, hover will trigger popup whenever the menu dialog is bound to a DOM node (via bindToDomNode). Otherwise, a mouse click (or tap on a touch interface) will be required. This setting does not affect keyboard alternative triggers, which will be active in the same way in all cases. This value can be overridden for individual calls to bindToDomNode by including a "hoverToOpen" property in the (optional) parameters object.

{boolean} leftClickToOpen

If true, a left mouse click (or tap on a touch interface) will trigger popup whenever the menu dialog is bound to a DOM node (via bindDomNode). Otherwise, a right mouse click will be required. Furthermore, when leftClickToOpen is true the keyboard alternative triggers become space-bar and enter key and the popup is automatically positioned relative to the triggering DOM node, whilst when leftClickToOpen is false the keyboard alternative trigger is Shift+F10 and the popup is positioned relative to the mouse position (when triggered by a mouse event, and relative to the triggering DOM node otherwise). This value can be overridden for individual calls to bindDomNode by including a "leftClickToOpen" property in the (optional) parameters object.

{string[]} popupPosition

Ordered list of positions to try placing the popup at whenever the menu dialog is bound to a DOM node (via bindToDomNode). The first position which allows the popup to be fully visible within the viewport will be used. Possible values are: This value can be overridden for individual calls to bindToDomNode by including a "popupPosition" property in the (optional) parameters object. If no value is provided (or null) a default sequence of positions (below, below-alt, above, above-alt) is used.

{DOMNode[]} targetNodeIds

An array of DOM node ids to which the menu dialog should be bound during widget initialisation. Note that this array is processed only once, during creation, and later changes that may be made will be ignored; also, the array is not updated if/when further explicit calls to bindDomNode/unbindDomNode are made.

{boolean} useConnector

If true, the menu will show a "shark-fin" connector linking the opened popup dialog to the initiating DOM element or menu item. This value can be overridden for individual calls to bindDomNode by including a "useConnector" property in the (optional) parameters object.

Method Detail

bindDomNode(node, params)

Attach the MenuDialog to the specified trigger node.
Parameters:
{string|DOMNode} node
The node to be used to trigger the MenuDialog to pop-up.
{Object} params
An object that can contain properties that override the popupPosition, useConnector, leftClickToOpen, and hoverToOpen properties of the MenuDialog on a per node attachment basis.

close()

Closes the MenuDialog.

focus()

onBlur()

An attach point that is called when the MenuDialog loses focus.

onCancel()

An attach point for the parent menu to listen for the MenuDialog being cancelled. Calling it will cause this MenuDialog to be closed, but not any menus it may have cascaded from.

onClose()

An attach point that is called when the MenuDialog is closed.

onExecute()

An attach point for the parent menu to listen for menu items being executed. Calling it will cause this MenuDialog and any menus it may have cascaded from to be closed.

onOpen(pos)

An attach point that is called when the MenuDialog is opened.
Parameters:
pos

open(args)

Opens the MenuDialog at the specified position.
Parameters:
{Object} args
An object containing some the following fields, which are all optional but at least one of 'around' and 'coords' should be supplied:
  • around: A DOM node that the popup should be placed around.
  • coords: A position (with fields x and y) containing coordinates that the popup should be placed at.
  • position: Ordered list of positions to try placing the popup at. The first position which allows the popup to be fully visible within the viewport will be used, or the best available option. Possible values are:
    • before: places drop down to the left of the around node/coords, or to the right in RTL mode
    • after: places drop down to the right of the around node/coords, or to the right in RTL mode
    • above: drop down goes above around node/coords
    • above-alt: same as above except right sides aligned instead of left
    • below: drop down goes below around node/coords
    • below-alt: same as below except right sides aligned instead of left
    If this field is omitted the current value of the widget popupPosition property is used.
  • useConnector: If true, a shark-fin connector is shown linking the popup to the around node/coords. If this field is omitted the current value of the widget useConnector property is used.

postMixInProperties()

unBindDomNode(nodeName)

Detach menu dialog from given DOM node. If no node is specified, detach menu dialog from all bound DOM nodes.
Parameters:
{string|DOMNode} nodeName
The DOM node to dissociate the MenuDialog from.