Easy Toggle State Versions Save

⚠️ BREAKING CHANGE ⚠️

It's something I should have done a long time ago.

Javascript ES6 coding has become the standard for a pretty long time now, and ES5 is now used only for compatibility purpose. For this reason, I renamed the dist files to have the ES6 versions to be the default files, and added the 'es5' namespace for the ES5 versions.

So please don't forget to update your script links.

Happy togling! 🖖

The basis of the data-toggle-trigger-off feature is that when you click – or another choosen event – on a trigger, while toggling the target, the script looks inside that target for element•s with data-toggle-trigger-off attribute, and if there are any, it sets the trigger as reference, and add an event listener to toggle off that trigger.

In some rare cases, this reference may override another reference, creating a problem.

Now, while checking element•s with data-toggle-trigger-off attribute, 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.

Happy toggling 🖖

Change active by default behaviour

The attribute data-toggle-is-active, used to specify a trigger element and its targets toggled as default, was initialy thought when using only one class to toggle. This in mind, the behaviour was adding the class instead of toggling it on script execution.

Now that we are able to add as many classes as we want, on trigger, target, or both, this behaviour doesn't make sence anymore, and even brings problems.

Responding to #91, it is now fix: using this attribute to set a trigger and its targets as active by default will toggle them once on initialization as a consequence.

data-toggle-trigger-off improvement

The behaviour of this attribute is simple: when you toggle a trigger and its target, the script check if there are elements with data-toggle-trigger-off attribute inside this target element, and if so, it adds a listener on those to toggle the trigger off on click.

The problem is that you can have some problems when you have a target element inside another one, both related to different triggers. In this case, it should be better to specify which "trigger-off" elements are related to which target element.

It is now possible: You can usually leave this attribute without a value, but if you need to specify the related target element, set the value to a CSS selector matching that target element.

Happy toggling 🖖

• 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.

Happy toggling 🖖

Easy Toggle State is a library that was thought from the beginning to be used in a quick and easy way. Responding to the requests, it now can be used in ESM projects. 🎉

Initializing, unbinding a trigger, unbinding all triggers and getting the state of a trigger are now exposed and ready to be used by yourself:

import initialize, { isActive, unbind, unbindAll } from "easy-toggle-state";

const handler = () => {
	initialize();
	document.removeEventListener("DOMContentLoaded", handler);
};
document.addEventListener("DOMContentLoaded", handler);

window.easyToggleState = Object.assign(
	initialize,
	{
		isActive,
		unbind,
		unbindAll
	}
);

Learn more in the new API section in the documentation.

Happy toggling 🖖

This release add some new features and changes:

• In respond of request #88, 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.

  • data-toggle-class will toggle filled class on trigger and target elements
  • data-toggle-class-on-trigger will toggle filled class only on trigger element
  • data-toggle-class-on-target will toggle filled class only on target element•s

• In respond of request #65, 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.

• It might be a breaking change, but as the data-toggle-class-on-target is available, I have removed the data-toggle-target-only attribute.

These new features make Easy Toggle State compatible with any CSS framwork. Go further into these new features in the documentation.

Happy toggling! 🖖

data-toggle-modal

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.

Be really careful when using this feature. A focus trap can be very annoying – and an accessibility fault – when used in a wrong way, so be sure your target is a modal component.

aria-pressed support

To improve accessibility, you need to add the aria-pressed attribute on any button which has two distinct states, such as a switch button.

It has pretty much the same meaning as the aria-checked attribute, but it is meant to be used on a button outside of a form, without any checkbox or radio role.

So now, if a trigger has the aria-pressed attribute, its value will also change.

Behaviour improvement

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.

Documentation

Updates of examples, tips and explanations.

New feature #23

data-toggle-outside-event="event"

When using data-toggle-outside attribute, add this attribute to use a specific event for that behavior.

Note that this attribute only works when used in addition of data-toggle-outside attribute.

Misc

• window.initEasyToggleState() fix #24
• data-toggle-outside behavior fix
• Dependencies update

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.

Remember that this attribute must be used with data-toggle-group or data-toggle-radio-group.