Toggle Element States

To install the module run: npm install --save lego-toggle

To use the toggle library, import like so:

import * as toggle from 'lego-toggle';

The first argument of each constructor is a HTMLElement, the second is an object of settings.

A Panel requires the group option to be populated with an instance of Group. A Trigger requires the panel options to be populated with an instance of Panel.

Group

• Can have many panels.
• Has one activePanel.
• Has one state associated.

Options

state [optional]

String, default: 'active' The class that will be applied to the active panel and that panels triggers

afterStateChange [optional]

String, default: null A callback method that will be invoked after a state change.

Methods

setActivePanel(activePanel)

• activePanel: Panel instance [required] Sets the provided panel state to active and sets all other panels associated with this group to inactive. Also calls on the afterStateChange callback if provided.

removeActivatePanel()

Turns all panels associated with this group to false.

setOptions(options)

• options: object [required] Override exsisting options with provided object of settings.

Panel

• Belongs to one group.
• Can have many triggers.

Options

group [required]

Group instance, default: null The group that this panel belongs to.

canTurnSelfOff [optional]

Boolean, default: true If false, a panel can only be turned off by another panel being turned on.

Methods

removeTrigger(trigger)

• trigger: Trigger instance [required] Disassociates trigger with current panel.

setOptions(options)

• options: object [required] Override exsisting options with provided object of settings.

setState(active)

• active: Boolean [optional] Sets this panel state to active and sets all other panels associated with this panel's group to inactive. Also calls on the group's afterStateChange callback if provided.

Trigger

• Belongs to one panel.
• State is bound to panel's state.

Options

panel [required]

Panel instance, default: null The panel that this trigger belongs to.

activeEvent [optional]

String, default: 'click' The event attached to the trigger that sets the panel to active.

####inactiveEvent [optional]

String, default: 'click' The event attached to the trigger that sets the panel to inactive.

Methods

detach()

Disassociates trigger with it's panel.

destroy()

Removes trigger element from the DOM.