raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-26 05:55:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace inline JS for toggling order cycle advanced settings with StimulusJs controller

Browse Source 
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.
This commit is contained in:
Cillian O'Ruanaidh
2022-01-28 16:18:14 +00:00
parent 8c33dc16e8
commit 67ae2e72f3
4 changed files with 93 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/webpacker/controllers/toggle_controller.js
View File

@@ -4,9 +4,22 @@ 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) => {
t.style.display = input.dataset.toggleShow === "true" ? "block" : "none";
if(toggleViaSingleElement) {
t.style.display = t.style.display === "none" ? "block" : "none";
} else {
t.style.display = input.dataset.toggleShow === "true" ? "block" : "none";
}
});
}
}