mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-24 20:36:49 +00:00
This introduces a new 'toggle' controller, and we already had three\! So I created a generic interface that could be extended to potentially support all of them. I propose we try to reduce them all into the one controller, but won't go down the rabbit-hole just yet.. I have an idea on how to re-arrange and make it more contained, by assigning the controller only to the checkbox, and defining targets with aria-controls="", but chose to stick with Stimulus conventions for now.
34 lines
911 B
JavaScript
34 lines
911 B
JavaScript
import { Controller } from "stimulus";
|
|
|
|
export default class extends Controller {
|
|
static targets = ["control"];
|
|
|
|
disableIfPresent(event) {
|
|
const input = event.currentTarget;
|
|
const disable = !!this.#inputValue(input); // Coerce value to boolean
|
|
|
|
this.controlTargets.forEach((target) => {
|
|
target.disabled = disable;
|
|
});
|
|
|
|
// Focus when enabled
|
|
if (!disable) {
|
|
this.controlTargets[0].focus();
|
|
}
|
|
}
|
|
|
|
//todo: can a new method disableIfBlank replace ButtonDisabledController?
|
|
//todo: can a new method toggleDisplay replace ToggleController?
|
|
//todo: can toggleDisplay with optional chevron-target replace RemoteToggleController?
|
|
|
|
// private
|
|
|
|
// Return input's value, but only if it would be submitted by a form
|
|
// Radio buttons not supported (yet)
|
|
#inputValue(input) {
|
|
if (input.type != "checkbox" || input.checked) {
|
|
return input.value;
|
|
}
|
|
}
|
|
}
|