Documentation

Class: Dropdown

Dropdown

Class representing a dropdown
Parameters:
Name Type Description
navList Array.<(Dropdown~NavItem|Dropdown~NavMenu|Dropdown~NavDivider)> Object representation of the context menu.
options Dropdown~Options Optional parameters for this instance

Methods

dismiss()

Close a dropdown and remove all event listeners on it

open(left, top [, autoExpandDir] [, context])

Open the dropdown rooted in the given position. It will expand down and to the right by default, but change expansion direction if it does not have enough space.
Parameters:
Name Type Argument Default Description
left Number How many pixels from the left the element should be positioned
top Number How many pixels from the top the element should be positioned
autoExpandDir boolean <optional>
 true If true we will automatically expand the dropdown towards the top or left if we don't have any space for it below or to the right. If false we will only expand down and to the right.
context any <optional>
 Optional context which is set on the Dropdown instance when we open it. This can be anything and is available through this.context on the action function

openClick(evt [, context])

This function will take an event and try to open and position the dropdown next to the mouse pointer or the element the event triggered on.
Parameters:
Name Type Argument Description
evt Event The event that triggered this click
context any <optional>
 Optional context which is set on the Dropdown instance when we open it. This can be anything and is available through this.context on the action function

Type Definitions

actionCallback(event)

The action callback. The this context is the instance of the dropdown itself unless otherwise bound.
Parameters:
Name Type Description
event Event This is the event (either click or keypress) which triggered this handler

logger(logItems)

The logging function. Use this if you want to expose internal logging information.
Parameters:
Name Type Argument Description
logItems * <repeatable>
 This should work similarly to how console.log uses multiple parameters

NavDivider

This is the structure of a navigation divider. It is just like the NavItem with no label or action.
Type:
  • Object
Properties:
Name Type Argument Description
key string <optional>
 A unique key for this item. It will be auto generated if not supplied

NavItem

This is the structure of a navigation item
Type:
  • Object
Properties:
Name Type Argument Default Description
label string | function The label which is used in the menu. If it is a function it will be called every time the menu is opened and set the label to the return value of this function. The this object of the function is the Dropdown instance itself unless otherwise bound.
icon string <optional>
 An icon to be used. This needs to be a path to a valid css background-image string.
key string <optional>
 A unique key for this item. It will be auto generated if not supplied
disabled boolean <optional>
 false If this is true the item is disabled. When disabled we will not navigate according to the action parameter or run the action callback.
action string | Dropdown~actionCallback What to do when we select this nav item. If this is a string we will navigate like an <a> tag

NavMenu

This is the structure of a navigation submenu
Type:
  • Object
Properties:
Name Type Argument Default Description
label string The label which is used in the menu
icon string <optional>
 An icon to be used. This needs to be a path to a valid css background-image string.
key string <optional>
 A unique key for this item. It will be auto generated if not supplied
disabled boolean <optional>
 false If this is true the item is disabled. When disabled it will not be expanded
children Array.<(Dropdown~NavItem|Dropdown~NavMenu|Dropdown~NavDivider)> The children of this menu

Options

This is the structure of the options object
Type:
  • Object
Properties:
Name Type Argument Default Description
logger Dropdown~logger <optional>
 console.log The logger to use
element Element <optional>
 document.body The element to attach the dropdown to