module:theme_boost/drawers

module:theme_boost/drawers

The Drawers class is used to control on-screen drawer elements.

It handles opening, and closing of drawer elements, as well as more detailed behaviours such as closing a drawer when another drawer is opened, and supports closing a drawer when the screen is resized.

Drawers are instantiated on page load, and can also be toggled lazily when toggling any drawer toggle, open button, or close button.

A range of show and hide events are also dispatched as detailed in the class eventTypes object.

Constructor

new (require("theme_boost/drawers"))()

Source:
Examples

Standard usage

// The module just needs to be included to add drawer support.
import 'theme_boost/drawers';

Manually open or close any drawer

import Drawers from 'theme_boost/drawers';

const myDrawer = Drawers.getDrawerInstanceForNode(document.querySelector('.myDrawerNode');
myDrawer.closeDrawer();

Listen to the before show event and cancel it

import Drawers from 'theme_boost/drawers';

document.addEventListener(Drawers.eventTypes.drawerShow, e => {
    // The drawer which will be shown.
    window.console.log(e.target);

    // The instance of the Drawers class for this drawer.
    window.console.log(e.detail.drawerInstance);

    // Prevent this drawer from being shown.
    e.preventDefault();
});

Listen to the shown event

document.addEventListener(Drawers.eventTypes.drawerShown, e => {
    // The drawer which was shown.
    window.console.log(e.target);

    // The instance of the Drawers class for this drawer.
    window.console.log(e.detail.drawerInstance);
});

Members

closeOnResize

Source:

Whether the drawer should close when the window is resized

drawerNode

Source:

The underlying HTMLElement which is controlled.

eventTypes

Source:
Properties:
Name Type Description
drawerShow String

See event:theme_boost/drawers:show
drawerShown String

See event:theme_boost/drawers:shown
drawerHide String

See event:theme_boost/drawers:hide
drawerHidden String

See event:theme_boost/drawers:hidden

The list of event types.

isOpen

Source:

Whether the drawer is open.

Methods

(static) closeAllDrawers()

Source:

Close all drawers.

(static) closeOtherDrawers(comparisonInstance)

Source:

Close all drawers except for the specified drawer.

Parameters:
Name Type Description
comparisonInstance module:theme_boost/drawers

(static) getDrawerInstanceForNode(drawerNode) → {module:theme_boost/drawers}

Source:

Get the drawer instance for the specified node

Parameters:
Name Type Description
drawerNode HTMLElement
Returns:
Type
module:theme_boost/drawers

closeDrawer(args)

Source:

Close the drawer.

Parameters:
Name Type Description
args object
Properties
Name Type Attributes Default Description
focusOnOpenButton boolean <optional>
 true

Whether to alter page focus when opening the drawer
updatePreferences boolean <optional>
 true

Whether to update the user prewference

openDrawer(args)

Source:

Open the drawer.

By default, openDrawer sets the page focus to the close drawer button. However, when a drawer is open at page load, this represents an accessibility problem as the initial focus changes without any user interaction. The focusOnCloseButton parameter can be set to false to prevent this behaviour.

Parameters:
Name Type Description
args object
Properties
Name Type Attributes Default Description
focusOnCloseButton boolean <optional>
 true

Whether to alter page focus when opening the drawer

toggleVisibility()

Source:

Toggle visibility of the drawer.

(inner) focusLastUsedToggle(target)

Source:

Set the focus to the last used button to open this drawer.

Parameters:
Name Type Description
target string

The drawer target.

(inner) setLastUsedToggle(toggleButton)

Source:

Set the last used attribute for the last used toggle button for a drawer.

Parameters:
Name Type Description
toggleButton object

The clicked button.

Events

theme_boost/drawers:hidden

Source:
Properties:
Name Type Description
target HTMLElement

The drawer that was be hidden.

An event triggered after a drawer is hidden.

Type:
  • CustomEvent

theme_boost/drawers:hide

Source:
Properties:
Name Type Description
target HTMLElement

The drawer that will be hidden.

An event triggered before a drawer is hidden.

Type:
  • CustomEvent

theme_boost/drawers:show

Source:
Properties:
Name Type Description
target HTMLElement

The drawer that will be opened.

An event triggered before a drawer is shown.

Type:
  • CustomEvent

theme_boost/drawers:shown

Source:
Properties:
Name Type Description
target HTMLElement

The drawer that was be opened.

An event triggered after a drawer is shown.

Type:
  • CustomEvent