Lego Toggle Documentation

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

let group = new toggle.Group({
    state: 'open'
});

afterStateChange [optional]

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

let group = new toggle.Group({
    afterStateChange: function(group, active, activePanel) {
        if (active) {
            // add logic here...
        }
    }
});

Methods

removeActivatePanel()

Turns all panels associated with this group to false.

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.

let group = new toggle.Group();
let panel = new toggle.Panel(someElement, { group });

group.setActivePanel(panel);

setOptions(options)

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

group.setOptions({
    state: 'new-state',
    someRandomData: { foo: 'bar' }
});

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. Disabling this option is helpful for things like tabs and carousels.

let group = new toggle.Group();

let panel = new toggle.Panel(someElement, {
    group,
    canTurnSelfOff: false
});

panel.setState(true);
panel.setState(false);

group.activePanel === panel; // true

Methods

setOptions(options)

• options: object [required]
  Override exsisting options with provided object of settings. Also useful for storing arbitrary data.

let group = new toggle.Group();
let panel = new toggle.Panel(someElement, { group });

panel.setOptions({
    myIndex: 12
});

panel.opts.myIndex === 12; // true	

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.

let group = new toggle.Group();
let panel1 = new toggle.Panel(someElement, { group });
let panel2 = new toggle.Panel(someOtherElement, { group });

panel2.setState(true);

group.activePanel === panel1; // false
group.activePanel === panel2; // true

panel1.setState(true);

group.activePanel === panel1; // true
group.activePanel === panel2; // false

panel1.setState(false);

group.activePanel === panel1; // false
group.activePanel === panel2; // false
group.activePanel == null; // true

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.

let trigger = new toggle.Trigger(someElement, {
    panel: panelInstance,
    activeEvent: 'click',
    inactiveEvent: 'mouseleave'
});

Methods

detach()

Disassociates trigger with it’s panel.

destroy()

Removes trigger element from the DOM.