https://takedahealth.at/themes/global_hub/scripts/components/ta-picker.js

1import { globalState } from "../utils/globalState.js";
2
3export default function iniTaPicker() {
4    const taPickerEls = document.querySelectorAll(".js-ta-picker");
5    if (taPickerEls.length === 0) {
6        return;
7    }
8
9    const bodyEl = document.querySelector("body");
10
11    taPickerEls.forEach(function (taPickerEl) {
12        taPickerEl.addEventListener("click", taPickerClickHandler);
13        taPickerEl.addEventListener("keydown", taPickerClickHandler);
14    });
15    bodyEl.addEventListener("click", bodyClickHandler);
16
17    function taPickerClickHandler(event) {
18        const currentPickerEl = event.currentTarget;
19
20        const isEnter =
21            event.type === "keydown" &&
22            (event.key === "Enter" || event.keyCode == "13");
23
24        const isSpace =
25            event.type === "keydown" &&
26            (event.key === " " || event.code === "Space");
27
28        const isEscape =
29            event.type === "keydown" &&
30            event.key === "Escape";
31
32        if (isEscape) {
33            togglePickerDropdown(currentPickerEl, "close");
34            return;
35        }
36
37        if (isSpace) {
38            event.preventDefault(); // prevent page scroll
39        }
40
41        if (event.type === "click" || isEnter || isSpace) {
42            const action = currentPickerEl.classList.contains("open")
43                ? "close"
44                : "open";
45
46            togglePickerDropdown(currentPickerEl, action);
47        }
48    }
49
50    function togglePickerDropdown(currentPickerEl, action) {
51        const currentPickerDropdownEl = currentPickerEl.parentElement.querySelector(
52            ".js-ta-picker-dropdown"
53        );
54
55        switch (action) {
56            case "open":
57                currentPickerEl.classList.add("open");
58                currentPickerEl.setAttribute("aria-expanded", "true");
59                currentPickerDropdownEl?.setAttribute("aria-hidden", "false");
60                currentPickerDropdownEl.querySelectorAll('.js-tkt-ta-picker-link').forEach(link => {
61                    link.setAttribute('tabindex', '0');
62                });
63                // header UI update
64                globalState.header.updateUI(currentPickerEl, true);
65                break;
66
67            case "close":
68                currentPickerEl.classList.remove("open");
69                currentPickerEl.setAttribute("aria-expanded", "false");
70                currentPickerDropdownEl?.setAttribute("aria-hidden", "true");
71                currentPickerDropdownEl.querySelectorAll('.js-tkt-ta-picker-link').forEach(link => {
72                    link.setAttribute('tabindex', '-1');
73                });
74                break;
75        }
76    }
77
78    function bodyClickHandler(event) {
79        const target = event.target;
80
81        if (target.closest(".js-ta-picker-container")) {
82            return;
83        }
84
85        const openedPickerEl = document.querySelector(".js-ta-picker.open");
86
87        if (openedPickerEl) {
88            openedPickerEl.classList.remove("open");
89            openedPickerEl.setAttribute("aria-expanded", "false");
90
91            const openedPickerDropdownEl = openedPickerEl.parentElement.querySelector(
92                ".js-ta-picker-dropdown"
93            );
94            openedPickerDropdownEl.setAttribute("aria-hidden", "true");
95            openedPickerDropdownEl.querySelectorAll('.js-tkt-ta-picker-link').forEach(link => {
96                link.setAttribute('tabindex', '-1');
97            });
98        }
99    }
100}