Class: Dropmenu

Dropmenu(container, oopt)

Class representing an Dropmenu widget.

Constructor

new Dropmenu(container, oopt)

Parameters:
Name Type Attributes Description
container object DOM container for the widget.
o object <optional>
 Options.
Properties
Name Type Attributes Default Description
menuItems object <optional>
 [] The items to populate the menu with.
backgroundColor string <optional>
 "#282828" The background color.
fontColor string <optional>
 "#ccc" The font color.
fontSize string <optional>
 "12px" The font size.
fontFamily string <optional>
 "Arial" The font family.
menuItemFontSize string <optional>
 "12px" The font size for items in the opened drop-down menu.
menuItemFontFamily string <optional>
 "Arial" The font family for items in the opened drop-down menu.
selectedItemBackgroundColor string <optional>
 "#f40" The background cover for the selected (hovered) item in the opened drop-down menu.
selectedItemFontColor string <optional>
 "#fff" The font color for the selected (hovered) item in the opened drop-down menu.
menuItemHorizontalPadding number <optional>
 10 Extra horizontal padding to add to each menu item.
menuItemVerticalPadding number <optional>
 5 Extra vertical padding to add to each menu item.
Implements:
  • Widget
Source:

Methods

(private) _addSvgMenuItem()

Adds svg elements representing a menu item.
Source:

(private) _calcMenuItemDims() → {number}

Calculate the height of each menu item.
Source:
Returns:
- Height in px.
Type
number

(private) _initHandlers()

Initializes mouse and touch event handlers.
Source:

(private) _initOptions()

Initializes the options.
Source:

(private) _initState()

Initializes the state.
Source:

(private) _initStateConstraints()

Initializes state constraints.
Source:

(private) _initSvgEls()

Initializes the svg elements.
Source:

(private) _mouseLeaveItem(targetOverlay)

Handles mouse leave event for menu item.
Parameters:
Name Type Description
targetOverlay SvgElement The overlay of the target item.
Source:

(private) _mouseOverItem(targetOverlay)

Handles mouse over event for menu item.
Parameters:
Name Type Description
targetOverlay SvgElement The overlay of the item being hovered.
Source:

(private) _removeSvgMenuItem()

Removes svg elements representing a menu item.
Source:

(private) _selectItem(targetOverlay)

Marks a menu element as selected.
Parameters:
Name Type Description
targetOverlay SvgElement
Source:

(private) _update()

Updates (redraws) components based on state.
Source:

(private) _updateEls()

Updates elements to match SVG representation with the state.
Source:

getSelectedItem() → {string}

Returns the string representing the currently selected item.
Source:
Returns:
- The string representing the selected item.
Type
string

getVal() → {number}

Returns the currently selected menu item index.
Source:
Returns:
- Index of the item currently selected.
Type
number

setInternalSelectedItem(item) → {number}

Sets the selected menu item according to a string argument specifying which item to select. If the argument is not one of the menu items, the selection will not change. Same as setSelectedItem(), but will not cause and observer callback trigger.
Parameters:
Name Type Description
item string The item to select
Source:
Returns:
- Index of the item selected.
Type
number

setInternalSelectionIdx(itemIdx)

Sets the selected menu item by index. Same as setSelectionIdx(), but will not cause an observer callback trigger.
Parameters:
Name Type Description
itemIdx number Index of the item to be selected.
Source:

setInternalVal(itemIdx)

Sets the currently selected menu item. Same as setVal(), but will not cause an observer callback trigger.
Parameters:
Name Type Description
itemIdx number Index of the item to be selected.
Source:

setMenuItems(menuItems)

Sets the list of available menu items.
Parameters:
Name Type Description
menuItems array Array of menu items to use.
Source:

setSelectedItem(item) → {number}

Sets the selected menu item according to a string argument specifying which item to select. If the argument is not one of the menu items, the selection will not change. Same as setInternalSelectedItem(), but will cause and observer callback trigger.
Parameters:
Name Type Description
item string The item to select
Source:
Returns:
- Index of the item selected.
Type
number

setSelectionIdx(itemIdx)

Sets the selected menu item by index. Same as setInternalSelectionIdx(), but will cause an observer callback trigger.
Parameters:
Name Type Description
itemIdx number Index of the item to be selected.
Source:

setVal(itemIdx)

Sets the currently selected menu item. Same as setInternalVal(), but will cause an observer callback trigger.
Parameters:
Name Type Description
itemIdx number Index of the item to be selected.
Source: