Skip to content

Module: src/util/Menu

The Menu Class provides a flexible menu UI that can switch between button-based and select-based layouts, depending on the number of menu items. Supports a placeholder state, custom headers, vertical layout and emits a callback on selection.

Version
1.0.0
Author
Frank Kudermann - alphanull
License
MIT
Requires
DomSmith
object
Source
Menu.js, line 14

Constructor

new Menu(player, config)

Creates an instance of the Menu class.

Parameters:
Name Type Description
player Player

Reference to the media player instance.
config Object

Additional config.

Members

Reference to the main player instance.

Type
Player
Source
Menu.js, line 20

Holds the instance configuration for this component.

Properties
Name Type Attributes Default Description
id string

Menu id, used for aria-labelledby connection.
header string optional ''

Optional Menu header.
className string optional ''

Additional classname applied to the root element.
selected number optional 0

Index of currently selected item.
highlighted number optional 0

Index of currently highlighted item.
target HTMLElement

A dom node to attach the menu to.
insertMode string optional 'append'

Defines how the menu is inserted into the target DOM node.
showPlaceholder boolean optional false

If enabled, display a 'not available' placeholder text if no menu items are available, otherwise completely hide the menu.
selectMenuThreshold number optional 5

Number of items above which a select-based menu will be used.
verticalMenuThreshold number optional 3

Number of items above which the button menu switches to vertical layout.
onSelected function

Callback invoked when a menu item is selected. Signature: (index: number, item: { value: any, label: string }, target: HTMLElement) => void.
Type
Object
Source
Menu.js, line 37

Contains menu data.

Type
Array<{value: any, label: string}>
Source
Menu.js, line 56

Methods

create(data)

Builds or rebuilds the menu UI.

Parameters:
Name Type Description
data Array<(null|number|string)>

List of menu entries.
Source
Menu.js, line 137

setIndex(selected, highlighted)

Sets the active state of the menu item at the selected index.

Parameters:
Name Type Description
selected number

Index of item to mark as selected.
highlighted number

Index of item to mark as hightlighted.
Source
Menu.js, line 170

private #createSelectMenu() → Object

Creates the select variant of the menu.

Returns

DomSmith node description.

Type Object
Source
Menu.js, line 211

private #createButtonMenu() → Object

Creates the button variant of the menu.

Returns

DomSmith node description.

Type Object
Source
Menu.js, line 233

getDomSmithInstance() → DomSmith

Returns the menus' DomSmith instance for additional manipulation.

Returns

The menus' DomSmith instance.

Type DomSmith
Source
Menu.js, line 270

destroy()

This method removes all events, subscriptions and DOM nodes created by this component.

Source
Menu.js, line 294