Skip to content

Latest commit

 

History

History
26 lines (19 loc) · 1.26 KB

README.md

File metadata and controls

26 lines (19 loc) · 1.26 KB
Raw

ESL Related Target Mixin

Version: 1.1.0

Authors: Anastasiya Lesun, Natalia Smirnova, Alexey Stsefanovich (ala'n).

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 toggleable
  • hide - to synchronize only hide events of the observed toggleable
  • show - 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>