|Views Total:||90 views|
|Official Page:||Go to website|
|Last Update:||December 30, 2020|
The main goal of this library is to toggle the CSS class of an element when the element or another element is clicked.
Install & Import the library with NPM:
# NPM $ npm install easy-toggle-state --save
import easyToggle from "easy-toggle-state";
Initialize the library and we’re ready to go.
Specify the active class when an element is clicked. The default active class is
<element data-toggle-class="active-class"> </element>
Also apply the active class to another element:
<element data-toggle-class="active-class" data-toggle-target="target-element"> </element>
Apply the active class to all child elements in a parent element.
<element data-toggle-class="active-class" data-toggle-target-parent="target-element"> </element>
Apply the active class to all sub-elements in itself.
<element data-toggle-class="active-class" data-toggle-target-self="selector"> </element>
Apply the active class to previous/next elements.
<element data-toggle-class="active-class" data-toggle-target-previous> </element> <element data-toggle-class="active-class" data-toggle-target-next> </element>
- data-toggle-is-active: Specify a trigger element and its targets toggled as default, set during the onload event. In this case, you should add the specified class name on each element, even if the script will check that for you.
- data-toggle-class-on-trigger: Toggle each class only on the trigger element.
- data-toggle-class-on-target: Toggle each class only on all the target elements.
- data-toggle-group=”groupName”: Specify if a trigger is a part of a group. Only one trigger of a group can be active at a time. It will actually behave like an accordion component.
- data-toggle-radio-group=”groupName”: Specify if a trigger is a part of a radio group. Only one trigger of a radio group can be active at a time.
- data-toggle-event=”event”: Specify the event that will toggle the class, mouseover for example. click by default if not specified.
- data-toggle-outside: Toggle off the class when the event is triggered again outside of the trigger element. The event will be the same as data-toggle-event value, or click by default.
- data-toggle-outside-event=”event”: When using data-toggle-outside attribute, add this attribute to use a specific event for that behavior.
- data-toggle-escape: Toggle the class when the trigger element is active and when the escape key is pressed.
- data-toggle-arrows: Specify that when a grouped trigger is focused, you can navigate between other triggers of the same group with arrows ↑ → ↓ ←, home and end keys.
- data-toggle-trigger-off: Add this attribute to an element inside a target to enable it to toggle the state of this target. For example, a close button in a modal.
- data-toggle-modal: specify that the target is a modal, such as a dialog or a lightbox
// init window.easyToggleState(); // unbind window.easyToggleState.unbind( Node || NodeList ); // unbind all window.easyToggleState.unbindAll(); // check if is active window.easyToggleState.isActive( Node );
- Renamed the dist files to have the ES6 versions to be the default files, and added the ‘es5’ namespace for the ES5 versions.
data-toggle-trigger-offbehaviour. Now, while checking element•s with
data-toggle-trigger-offattribute, it will set the reference only if there is no reference already set, and while toggling off, it will remove that reference if it matches the current trigger element.
- Change active by default behaviour
- data-toggle-trigger-off improvement
- Fix the data-toggle-outside behaviour, especially for trigger that has elements inside of itself, such as image or else.
- Set the default class is-active in the toggle list only when the dedicated attribute is there.
- ES module compatibility
- Now you can go further into toggling by choosing if some classes must be toggled only on trigger, or only on targets, or on both. And you can combine these options.
- Now you can fill these toggling attributes with as many classes as you need. If an attribute is left empty, the default class is-active is used.
- Fix not focusable input
- New “modal” feature: You can use the data-toggle-modal to specify that the target is a modal, such as a dialog or a lightbox. This way, when the target is active – open –, the focus is trapped inside this target. This means tabbing will only focus on focusable elements inside this target, letting anything outside be out of scope.
- To improve accessibility, you need to add the aria-pressed attribute on any button which has two distinct states, such as a switch button.
- Now, after clicking on a button with the data-toggle-trigger-off attribute (an element inside a target to toggle the state of this target), the focus is given back to the trigger.
- data-toggle-outside behavior fix
- Dependencies update
- New data-toggle-outside-event attribute
- Fixed: window.initEasyToggleState(); does not work as expected
- Doc and dependencies update
- Fixed Warning in console log if no data-toggle-class is found
- Sizes update
- No more IE polyfills
- Escape key management fix
- Code optimizations
- IE11 version now working
- Better aria management