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
-
open
- active state marker -
active-class
- CSS class(es) (supports CSSClassUtils syntax) to add when the Toggleable is active (and remove when inactive) -
body-class
- CSS class(es) (supports CSSClassUtils syntax) to add on the body element (removes when inactive). -
container-active-class
- CSS class(es) (supports CSSClassUtils syntax) to add when the Toggleable is active (and remove when inactive) to/from 'container' element defined bycontainer-active-class-target
. -
container-active-class-target
- selector for the closest parent element to add/remove classes fromcontainer-active-class
. The default value is*
(direct parent). -
group
(groupName
) - Toggleable group meta information to organize groups -
no-auto-id
- Disallow automatic id creation when it's empty -
close-on
(closeTrigger
) - Selector to mark inner close triggers -
close-on-esc
- Close the Toggleable on ESC keyboard event -
close-on-outside-action
- Close the Toggleable on a click/tap outside -
focus-behavior
- Focus flow behavior. new
Available values:none
(default) - does not affect focus managementgrab
- focus on the first focusable element, does not affect focus flow or behavior after the last focusable elementchain
- focus on the first focusable element first and return focus to the activator after the last focusable elementloop
- focus on the first focusable element and loop through the focusable elements
-
initial-params
- Initial params to pass to show/hide action on start -
default-params
- Default params to merge into passed action params
Toggleable Implementation API
onShow
- 'show' actions to execute when the instance becomes activeonHide
- 'hide' actions to execute when the instance becomes inactive
Toggleable Public API:
show
- trigger element activationhide
- trigger element deactivationtoggle
- toggle element state
Events
esl:before:show
- thrown when toggleable change is going to be activated(open)esl:before:hide
- thrown when toggleable change is going to be deactivatedesl:show
- thrown when toggleable change its state to active(open)esl:hide
- thrown when toggleable change its state to inactive
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:
all
(default) - to synchronize both: show and hide events of the observed toggleablehide
- to synchronize only hide events of the observed toggleableshow
- to synchronize only show events of the observed toggleable
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>