ESL Toggleable

ESLToggleable - a custom element, that is used as a base for "Popup-like" components creation.

ESLToggleableDispatcher - plugin component, that prevents activation of multiple ESLToggleable instances in bounds of managed container. Usually (and by default) binds to document.body. Uses native DOM events to manage controlled instances state.

Use ESLToggleableDispatcher.init() to initialize (and bind) ESLToggleableDispatcher.


Toggleable Attributes / Properties

Toggleable Implementation API

Toggleable Public API:

Events


ESL Related Target

ESLRelatedTarget is a custom mixin that can be used in combination with ESLToggleable instance (or any inheritor) to link it with one or more other ESLToggleable to sync their states.

Mixin attaches to the element via the esl-related-target attribute. The attribute's value defines a selector to find the corresponding element. Activation (set open state) or deactivation of the related target happens when the corresponding esl:show or esl:hide DOM events are dispatched on the current host element.

Mixin supports esl-related-target-action attribute to define required for synchronization actions:

To make cross-reference (bidirectional binding) of toggleables you need to cross-reference both of the toggleables:

<esl-toggleable class="first" esl-related-target=".second"></esl-toggleable>
<esl-toggleable class="second" esl-related-target=".first"></esl-toggleable>

ESL Open State

ESLOpenState is a custom mixin that can be used in combination with ESLToggleable instance (or any inheritor) to request opening/closing it by the media query condition.

Mixin attaches to the element via esl-open-state attribute. The attribute's value defines media query condition to define when ESLToggleable element should be open.

<esl-toggleable esl-open-state="@+MD"></esl-toggleable>