JavaScriptThe latest version of this package is: 0.18.6, Opens in new window
JavaScript library for the FAQ Component
This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-js/dropdown-menu@0.18.6
Table of Contents
Usage
Required markup
<div class="if" style="position:relative;">
<button class="if js-dropdown-menu-controller">A menu toggler</button>
<nav class="if dropdown-menu">
<ul class="if">
<li class="if">…</li>
…
</ul>
</nav>
</div>
Init
import { IDSMenuToggle } from '@ids-js/dropdown-menu';
const menuToggleButtons = document.querySelectorAll(
'.js-dropdown-menu-controller'
);
menuToggleButtons.forEach((menuToggleButton) => {
new MenuToggle(menuToggleButton);
});
Api
Classes
Menu
Kind: global class
- Menu
- new Menu(menuItemHolder, controllerNode, topMostParent)
- .IS_OPEN_TOGGLE_CLASS :
String
- .IS_ACTIVE_TOGGLE_CLASS :
String
- .SUB_MENU_MOUSEOVER_TOLERANCE :
Number
- .MOUSE_LOCS_TRACKED :
Number
- .DELAY :
Number
- .menuItemHolder :
Element
- .menuItemList :
Element
- .controllerNode :
Element
- .indexOfMenuItemStartingWithChar :
Object.<string, number>
- .subMenuIndexItems :
Object.<string, SubMenu>
- .menuItems :
Array.<Element>
- .isOpen :
Boolean
- .logMouseMovement(e)
- .activate(menuItem, subMenuIndex)
- .handleMouseEnterMenuItem(e, index)
- .handleMouseLeave()
- .possiblyActivate(menuItem, subMenuIndex)
- .focusFirstItem()
- .focusLastItem()
- .focusNextItem()
- .focusPreviousItem()
- .activationDelay(menuItem)
- .openMenu()
- .closeMenu()
- .keyDownHandler(event)
new Menu(menuItemHolder, controllerNode, topMostParent)
Param | Type |
---|---|
menuItemHolder | Element |
controllerNode | Element |
topMostParent | MenuToggle |
menu.IS_OPEN_TOGGLE_CLASS : String
Kind: instance property of Menu
menu.IS_ACTIVE_TOGGLE_CLASS : String
Kind: instance property of Menu
menu.SUB_MENU_MOUSEOVER_TOLERANCE : Number
Kind: instance property of Menu
menu.MOUSE_LOCS_TRACKED : Number
Kind: instance property of Menu
menu.DELAY : Number
Kind: instance property of Menu
menu.menuItemHolder : Element
Kind: instance property of Menu
menu.menuItemList : Element
Kind: instance property of Menu
menu.controllerNode : Element
Kind: instance property of Menu
menu.indexOfMenuItemStartingWithChar : Object.<string, number>
Kind: instance property of Menu
menu.subMenuIndexItems : Object.<string, SubMenu>
Kind: instance property of Menu
menu.menuItems : Array.<Element>
Kind: instance property of Menu
menu.isOpen : Boolean
Kind: instance property of Menu
menu.logMouseMovement(e)
Kind: instance method of Menu
description: Keep track of the last few locations of the mouse.
Param | Type |
---|---|
e | MouseEvent |
menu.activate(menuItem, subMenuIndex)
Kind: instance method of Menu
description: Activate a menu row.
Param | Type | Description |
---|---|---|
menuItem | Element |
the menu item to activate the subMenu from |
subMenuIndex | Number |
The index of the subMenu to use |
menu.handleMouseEnterMenuItem(e, index)
Trigger a possible row activation whenever entering a new row.
Kind: instance method of Menu
Param | Type | Description |
---|---|---|
e | MouseEvent |
|
index | number |
The index of the current subMenu |
menu.handleMouseLeave()
Cancel possible menu activations when leaving the menu entirely
Kind: instance method of Menu
menu.possiblyActivate(menuItem, subMenuIndex)
Possibly activate a submenu. If mouse movement indicates that we shouldn't activate yet because user may be trying to enter a submenu's content, then delay and check again later.
Kind: instance method of Menu
Param | Type | Description |
---|---|---|
menuItem | Element |
the menu item to activate the subMenu from |
subMenuIndex | Number |
The index of the subMenu to use |
menu.focusFirstItem()
Put focus on the first item in current menu
Kind: instance method of Menu
menu.focusLastItem()
Put focus on the last item in current menu
Kind: instance method of Menu
menu.focusNextItem()
Put focus on the next item of currently focused menu item if at the end of list, cycle back to first item
Kind: instance method of Menu
menu.focusPreviousItem()
Put focus on the previous item of currently focused menu item if at the start of list, cycle back to last item
Kind: instance method of Menu
menu.activationDelay(menuItem)
Kind: instance method of Menu
description: Return the amount of time that should be used as a delay before the currently hovered item is activated.
Returns 0 if the activation should happen immediately. Otherwise, returns the number of milliseconds that should be delayed before checking again to see if the item should be activated.
Param | Type | Description |
---|---|---|
menuItem | Element |
the menu item to activate the subMenu from |
menu.openMenu()
Open menu
Kind: instance method of Menu
menu.closeMenu()
Close menu
Kind: instance method of Menu
menu.keyDownHandler(event)
Kind: instance method of Menu
Param | Type |
---|---|
event | KeyboardEvent |
SubMenu
Kind: global class
new SubMenu(subMenuHolder, topMostParent)
Param | Type |
---|---|
subMenuHolder | Element |
topMostParent | MenuToggle |
subMenu.menuItems : Menu
Kind: instance property of SubMenu
subMenu.openSubMenu()
Allows to control opening of submenu from outside
Kind: instance method of SubMenu
subMenu.closeSubMenu()
Allows to control closing of submenu from outside
Kind: instance method of SubMenu
subMenu.focusFirstSubMenuItem()
Sets focus on the first item of submenu
Kind: instance method of SubMenu
subMenu.focusLastSubMenuItem()
Sets focus on last item of submenu
Kind: instance method of SubMenu
MenuToggle
Kind: global class
new MenuToggle(menuButton)
Param | Type | Description |
---|---|---|
menuButton | Element |
an item (usually) in Header, which toggles the appearance of Menu |
menuToggle.handleKeydown(event)
Kind: instance method of MenuToggle
Param | Type |
---|---|
event | KeyboardEvent |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.17.0 (2021-10-21)
Code Refactoring
- 💡 Remove support for CommonJS (9f84d9a)
BREAKING CHANGES
- 🧨 We have removed the support for CommonJS for all @ids-js packages
0.16.1 (2021-10-21)
Bug Fixes
- Use common for cjs and main for esm (96f673d)