File size: 1,532 Bytes
e26a977
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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;
}