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

Description:

  • Whether the drawer should close when the window is resized

Source:

Whether the drawer should close when the window is resized

drawerNode

Description:

  • The underlying HTMLElement which is controlled.

Source:

The underlying HTMLElement which is controlled.

eventTypes

Description:

  • The list of event types.

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

Description:

  • Whether the drawer is open.

Source:

Whether the drawer is open.

Methods

closeDrawer(args)

Description:

  • Close the drawer.

Source:
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)

Description:

  • 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.

Source:
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()

Description:

  • Toggle visibility of the drawer.

Source:

(static) closeAllDrawers()

Description:

  • Close all drawers.

Source:

(static) closeOtherDrawers(comparisonInstance)

Description:

  • Close all drawers except for the specified drawer.

Source:
Parameters:
Name Type Description
comparisonInstance module:theme_boost/drawers

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

Description:

  • Get the drawer instance for the specified node

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

(inner) focusLastUsedToggle(target)

Description:

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

Source:
Parameters:
Name Type Description
target string

The drawer target.

(inner) scrollbarVisible(htmlNode) → {boolean}

Description:

  • Check if there is a visible scrollbar in the given html element.

Source:
Parameters:
Name Type Description
htmlNode object

The html element.
Returns:

true if the scroll height is greater than client height.

Type
boolean

(inner) setLastUsedToggle(toggleButton)

Description:

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

Source:
Parameters:
Name Type Description
toggleButton object

The clicked button.

Events

theme_boost/drawers:hidden

Description:

  • An event triggered after a drawer is hidden.

Source:
Properties:
Name Type Description
target HTMLElement

The drawer that was be hidden.
Type:
  • CustomEvent

theme_boost/drawers:hide

Description:

  • An event triggered before a drawer is hidden.

Source:
Properties:
Name Type Description
target HTMLElement

The drawer that will be hidden.
Type:
  • CustomEvent

theme_boost/drawers:show

Description:

  • An event triggered before a drawer is shown.

Source:
Properties:
Name Type Description
target HTMLElement

The drawer that will be opened.
Type:
  • CustomEvent

theme_boost/drawers:shown

Description:

  • An event triggered after a drawer is shown.

Source:
Properties:
Name Type Description
target HTMLElement

The drawer that was be opened.
Type:
  • CustomEvent