diff --git a/app/javascript/controllers/visa_controller.ts b/app/javascript/controllers/visa_controller.ts index c3e9d052410..09edc7fe3dd 100644 --- a/app/javascript/controllers/visa_controller.ts +++ b/app/javascript/controllers/visa_controller.ts @@ -1,8 +1,8 @@ -import { ApplicationController } from '~/controllers/application_controller'; +import { ApplicationController } from "~/controllers/application_controller"; export class VisaController extends ApplicationController { connect(): void { - this.on('change', () => this.debounce(this.load, 200)); + this.on("change", () => this.debounce(this.load, 200)); const target = this.element as HTMLInputElement; if (target.checked) { this.updateVisibilityOfAboveFields(target); @@ -11,31 +11,46 @@ export class VisaController extends ApplicationController { } } - static CHAMP_SELECTOR = '.editable-champ'; - static REPETITION = 'editable-champ-repetition'; + static CHAMP_SELECTOR = ".editable-champ"; + static REPETITION = "editable-champ-repetition"; static CHECKED_VISA_SELECTOR = "input[data-controller='visa']:checked"; static CHILD_VISA_SELECTOR = - ':scope > div > ' + VisaController.CHECKED_VISA_SELECTOR; + ":scope > div > " + VisaController.CHECKED_VISA_SELECTOR; private updateVisibilityOfAboveFields(visa: HTMLInputElement) { if (visa == null) return; - let champ: Element | null | undefined; - champ = visa.closest(VisaController.CHAMP_SELECTOR); - while ((champ = champ?.previousElementSibling) != null) { - this.updateVisibility(champ, visa.checked); + let element: Element | null | undefined; + element = visa.closest(VisaController.CHAMP_SELECTOR); + while ((element = element?.previousElementSibling) != null) { + if (this.isTitle(element)) { + if (this.isSubTitle(element)) { + element = element.parentElement; + } + } else { // champ + this.updateVisibility(element, visa.checked); - if ( - !visa.checked && - champ.classList.contains(VisaController.REPETITION) - ) { - this.updateVisibilityOfRepetition(champ); - } else if (this.checked_visa(champ)) { - break; + if (!visa.checked && this.isRepetition(element)) { + this.updateVisibilityOfRepetition(element); + } else if (this.checked_visa(element)) { + break; + } } } } + private isTitle(element: Element) { + return element.tagName === "LEGEND"; + } + + private isSubTitle(champ: Element) { + return champ.children.length > 0 && champ.children[0].tagName !== "H2"; + } + + private isRepetition(champ: Element) { + return champ.classList.contains(VisaController.REPETITION); + } + private updateVisibilityOfRepetition(champ: Element) { champ .querySelectorAll(VisaController.CHECKED_VISA_SELECTOR) @@ -43,12 +58,12 @@ export class VisaController extends ApplicationController { } private updateVisibility(champ: Element, checked: boolean) { - const visibility = checked ? 'hidden' : 'visible'; + const visibility = checked ? "hidden" : "visible"; champ - .querySelectorAll('input, select, button, textarea') + .querySelectorAll("input, select, button, textarea") .forEach((node) => (node.disabled = checked)); champ - .querySelectorAll('a.fr-btn') + .querySelectorAll("a.fr-btn") .forEach((node) => (node.style.visibility = visibility)); }