diff --git a/app/webpacker/controllers/toggle_control_controller.js b/app/webpacker/controllers/toggle_control_controller.js index 7ba2bdb85d..8c65af417f 100644 --- a/app/webpacker/controllers/toggle_control_controller.js +++ b/app/webpacker/controllers/toggle_control_controller.js @@ -1,32 +1,29 @@ import { Controller } from "stimulus"; +// Toggle state of a control based on a condition. +// +// 1. When an action occurs on an element, +// 2. The element's value is inspected, and +// 3. The related control(s) are changed state +// export default class extends Controller { static targets = ["control", "content", "chevron"]; static values = { selector: String }; disableIfPresent(event) { - const input = event.currentTarget; - const disable = !!this.#inputValue(input); // Coerce value to boolean + const present = !!this.#inputValue(event.currentTarget); // Coerce value to boolean - this.controlTargets.forEach((target) => { - target.disabled = disable; - }); - - // Focus when enabled - if (!disable) { - this.controlTargets[0].focus(); - } + this.#toggleDisabled(present); } enableIfPresent(event) { - const input = event.currentTarget; - const enable = !!this.#inputValue(input); + const present = !!this.#inputValue(event.currentTarget); // Coerce value to boolean - this.controlTargets.forEach((target) => { - target.disabled = !enable; - }); + this.#toggleDisabled(!present); } + // Display the "content" target if element has data-toggle-show="true" + // (TODO: why not use the "control" target?) toggleDisplay(event) { const input = event.currentTarget; this.contentTargets.forEach((t) => { @@ -34,6 +31,8 @@ export default class extends Controller { }); } + // Toggle element specified by data-control-toggle-selector-value="" + // (TODO: give a more general name) toggleAdvancedSettings(event) { if (this.hasChevronTarget) { this.chevronTarget.classList.toggle("icon-chevron-down"); @@ -46,6 +45,17 @@ export default class extends Controller { // private + #toggleDisabled(disable) { + this.controlTargets.forEach((target) => { + target.disabled = disable; + }); + + // Focus first when enabled + if (!disable) { + this.controlTargets[0].focus(); + } + } + // Return input's value, but only if it would be submitted by a form // Radio buttons not supported (yet) #inputValue(input) {