ESL Toggleable
Version: 3.1.0.
Authors: Julia Murashko, Alexey Stsefanovich (ala'n).
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
.
-
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 -
initial-params
- Initial params to pass to show/hide action on start -
default-params
- Default params to merge into passed action params
onShow
- 'show' actions to execute when the instance becomes activeonHide
- 'hide' actions to execute when the instance becomes inactive
show
- trigger element activationhide
- trigger element deactivationtoggle
- toggle element state
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