| import { $el } from "../ui.js"; | |
| /** | |
| * @typedef { { text: string, value?: string, tooltip?: string } } ToggleSwitchItem | |
| */ | |
| /** | |
| * Creates a toggle switch element | |
| * @param { string } name | |
| * @param { Array<string | ToggleSwitchItem } items | |
| * @param { Object } [opts] | |
| * @param { (e: { item: ToggleSwitchItem, prev?: ToggleSwitchItem }) => void } [opts.onChange] | |
| */ | |
| export function toggleSwitch(name, items, { onChange } = {}) { | |
| let selectedIndex; | |
| let elements; | |
| function updateSelected(index) { | |
| if (selectedIndex != null) { | |
| elements[selectedIndex].classList.remove("comfy-toggle-selected"); | |
| } | |
| onChange?.({ item: items[index], prev: selectedIndex == null ? undefined : items[selectedIndex] }); | |
| selectedIndex = index; | |
| elements[selectedIndex].classList.add("comfy-toggle-selected"); | |
| } | |
| elements = items.map((item, i) => { | |
| if (typeof item === "string") item = { text: item }; | |
| if (!item.value) item.value = item.text; | |
| const toggle = $el( | |
| "label", | |
| { | |
| textContent: item.text, | |
| title: item.tooltip ?? "", | |
| }, | |
| $el("input", { | |
| name, | |
| type: "radio", | |
| value: item.value ?? item.text, | |
| checked: item.selected, | |
| onchange: () => { | |
| updateSelected(i); | |
| }, | |
| }) | |
| ); | |
| if (item.selected) { | |
| updateSelected(i); | |
| } | |
| return toggle; | |
| }); | |
| const container = $el("div.comfy-toggle-switch", elements); | |
| if (selectedIndex == null) { | |
| elements[0].children[0].checked = true; | |
| updateSelected(0); | |
| } | |
| return container; | |
| } | |