|
| 1 | +/** |
| 2 | + * Enables or disables options based on the value of the element. |
| 3 | + * |
| 4 | + * @author Olaf Braun |
| 5 | + * @copyright 2001-2024 WoltLab GmbH |
| 6 | + * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> |
| 7 | + * @since 6.2 |
| 8 | + */ |
| 9 | + |
| 10 | +import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector"; |
| 11 | + |
| 12 | +type SelectOption = { |
| 13 | + value: string; |
| 14 | + option: string; |
| 15 | +}; |
| 16 | + |
| 17 | +function change(option: HTMLInputElement | HTMLSelectElement) { |
| 18 | + const disableOptions = JSON.parse(option.dataset.disableOptions!); |
| 19 | + const enableOptions = JSON.parse(option.dataset.enableOptions!); |
| 20 | + |
| 21 | + if (option instanceof HTMLInputElement) { |
| 22 | + switch (option.type) { |
| 23 | + case "checkbox": |
| 24 | + showOptions(option.checked, disableOptions, enableOptions); |
| 25 | + break; |
| 26 | + |
| 27 | + case "radio": |
| 28 | + if (option.checked) { |
| 29 | + let isActive = true; |
| 30 | + if (option.dataset.isBoolean && option.value !== "1") { |
| 31 | + isActive = false; |
| 32 | + } |
| 33 | + showOptions(isActive, disableOptions, enableOptions); |
| 34 | + } |
| 35 | + break; |
| 36 | + } |
| 37 | + } else if (option instanceof HTMLSelectElement) { |
| 38 | + const value = option.value; |
| 39 | + const relevantDisableOptions: string[] = []; |
| 40 | + const relevantEnableOptions: string[] = []; |
| 41 | + |
| 42 | + for (const item of disableOptions as SelectOption[]) { |
| 43 | + if (item.value === value) { |
| 44 | + relevantDisableOptions.push(item.option); |
| 45 | + } else { |
| 46 | + relevantEnableOptions.push(item.option); |
| 47 | + } |
| 48 | + } |
| 49 | + |
| 50 | + for (const item of enableOptions as SelectOption[]) { |
| 51 | + if (item.value === value) { |
| 52 | + relevantEnableOptions.push(item.option); |
| 53 | + } else { |
| 54 | + relevantDisableOptions.push(item.option); |
| 55 | + } |
| 56 | + } |
| 57 | + |
| 58 | + showOptions(true, relevantDisableOptions, relevantEnableOptions); |
| 59 | + } |
| 60 | +} |
| 61 | + |
| 62 | +function showOptions(isActive: boolean, disableOptions: string[], enableOptions: string[]) { |
| 63 | + disableOptions.forEach((optionName) => { |
| 64 | + getOptionElements(optionName).forEach((element) => { |
| 65 | + enableOption(element, !isActive); |
| 66 | + }); |
| 67 | + }); |
| 68 | + |
| 69 | + enableOptions.forEach((optionName) => { |
| 70 | + getOptionElements(optionName).forEach((element) => { |
| 71 | + enableOption(element, isActive); |
| 72 | + }); |
| 73 | + }); |
| 74 | +} |
| 75 | + |
| 76 | +function enableOption(element: HTMLElement, enable: boolean) { |
| 77 | + if ( |
| 78 | + element instanceof HTMLSelectElement || |
| 79 | + (element instanceof HTMLInputElement && |
| 80 | + (element.type === "checkbox" || element.type === "file" || element.type === "radio")) |
| 81 | + ) { |
| 82 | + if (element instanceof HTMLInputElement && element.type === "radio") { |
| 83 | + if (!element.checked) { |
| 84 | + element.disabled = !enable; |
| 85 | + } else { |
| 86 | + // Skip active radio buttons, this preserves the value on submit, |
| 87 | + // while the user is still unable to move the selection to the other, |
| 88 | + // now disabled options. |
| 89 | + } |
| 90 | + } else { |
| 91 | + element.disabled = !enable; |
| 92 | + } |
| 93 | + |
| 94 | + const parentOptionTypeBoolean = element.closest(".optionTypeBoolean"); |
| 95 | + if (parentOptionTypeBoolean) { |
| 96 | + // escape dots so that they are not recognized as class selectors |
| 97 | + const elementId = element.id.replace(/\./g, "\\."); |
| 98 | + |
| 99 | + const noElement = document.getElementById(elementId + "_no") as HTMLInputElement; |
| 100 | + noElement.disabled = !enable; |
| 101 | + |
| 102 | + const neverElement = document.getElementById(elementId + "_never") as HTMLInputElement; |
| 103 | + if (neverElement) { |
| 104 | + neverElement.disabled = !enable; |
| 105 | + } |
| 106 | + } |
| 107 | + } else { |
| 108 | + if (enable) { |
| 109 | + element.removeAttribute("readonly"); |
| 110 | + } else { |
| 111 | + element.setAttribute("readonly", "true"); |
| 112 | + } |
| 113 | + } |
| 114 | + |
| 115 | + if (enable) { |
| 116 | + element.closest("dl")?.classList.remove("disabled"); |
| 117 | + } else { |
| 118 | + element.closest("dl")?.classList.add("disabled"); |
| 119 | + } |
| 120 | +} |
| 121 | + |
| 122 | +function getOptionElements(optionName: string): HTMLElement[] { |
| 123 | + const optionElement = document.getElementById(optionName); |
| 124 | + if (optionElement) { |
| 125 | + return [optionElement]; |
| 126 | + } |
| 127 | + |
| 128 | + const container = document.querySelectorAll<HTMLElement>(`.${optionName}Input > dd`); |
| 129 | + |
| 130 | + return Array.from(container) |
| 131 | + .map((element) => { |
| 132 | + return Array.from(element.querySelectorAll<HTMLElement>("input, select, textarea")); |
| 133 | + }) |
| 134 | + .flat(); |
| 135 | +} |
| 136 | + |
| 137 | +export function setup() { |
| 138 | + wheneverFirstSeen(".jsEnablesOptions", (element: HTMLInputElement | HTMLSelectElement) => { |
| 139 | + change(element); |
| 140 | + |
| 141 | + element.addEventListener("change", () => { |
| 142 | + change(element); |
| 143 | + }); |
| 144 | + }); |
| 145 | +} |
0 commit comments