mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-02-14 23:47:48 +00:00
67ae2e72f3
Partially addresses #8699. This adjusts the Stimulus toggle controller so you can toggle content in both directions via a single element. This is in addition to the previous behaviour for toggling via multiple elements like radio buttons when each element always toggles in one direction only. If a toggle element contains a chevron icon this will automatically toggle the direction of that icon too. Note, in order to not have to re-implement the animation provided by the slideToggle() function in standard JavaScript, this just switches the style :display between 'none' and 'block' so it is not as smooth. Perhaps it could be made more smooth later with a CSS transition.
26 lines
749 B
JavaScript
26 lines
749 B
JavaScript
import { Controller } from "stimulus";
|
|
|
|
export default class extends Controller {
|
|
static targets = ["content"];
|
|
|
|
toggle(event) {
|
|
event.stopImmediatePropagation()
|
|
const input = event.currentTarget;
|
|
const chevron = input.querySelector(".icon-chevron-down, .icon-chevron-up")
|
|
const toggleViaSingleElement = !input.dataset.toggleShow;
|
|
|
|
if(chevron) {
|
|
chevron.classList.toggle("icon-chevron-down");
|
|
chevron.classList.toggle("icon-chevron-up");
|
|
}
|
|
|
|
this.contentTargets.forEach((t) => {
|
|
if(toggleViaSingleElement) {
|
|
t.style.display = t.style.display === "none" ? "block" : "none";
|
|
} else {
|
|
t.style.display = input.dataset.toggleShow === "true" ? "block" : "none";
|
|
}
|
|
});
|
|
}
|
|
}
|