https://www.tokyodome-hotels.co.jp/assets/hotel/scripts/modules/refine.js

1const root = document.querySelector('.js-refine');
2if (root) {
3    const btnSearch = root.querySelector('.fn-refine__btn');
4    const btnUnCheck = root.querySelector('.fn-refine__unCheck');
5    const inputs = root.querySelectorAll('.fn-refine__input');
6    const items = root.querySelectorAll('.fn-refine__item');
7    const noneText = root.querySelector('.fn-refine__text');
8    const details = root.querySelector('.fn-refine__details');
9    /**
10     * PC時SP時のトグル初期状態処理
11     */
12    if (details) {
13        if (window.innerWidth >= 768) {
14            details.setAttribute('open', '');
15        }
16        else {
17            details.removeAttribute('open');
18        }
19    }
20    /**
21     * 絞り込み処理
22     */
23    const refineItems = () => {
24        const selectedByGroup = {};
25        inputs.forEach((input) => {
26            if (!input.checked) {
27                return;
28            }
29            const group = input.dataset.group;
30            if (!group) {
31                return;
32            }
33            selectedByGroup[group] ??= [];
34            selectedByGroup[group].push(input.value);
35        });
36        let displayCount = 0;
37        items.forEach((item) => {
38            const refineData = item.dataset.refine;
39            if (!refineData) {
40                return;
41            }
42            const patterns = JSON.parse(refineData);
43            /* --------------------
44             * 時間帯：pattern横断 AND検索
45             * -------------------- */
46            if (selectedByGroup.time) {
47                const timeSet = new Set(patterns.flat());
48                const timeOK = selectedByGroup.time.every((value) => timeSet.has(value));
49                if (!timeOK) {
50                    item.classList.add('is-none');
51                    return;
52                }
53            }
54            /* --------------------
55             * シーン：時間帯と結びつけて判定 AND検索
56             * -------------------- */
57            if (selectedByGroup.scene) {
58                const sceneOK = patterns.some((pattern) => {
59                    // このpatternにsceneが含まれているか
60                    if (!selectedByGroup.scene) {
61                        return false;
62                    }
63                    const hasScene = selectedByGroup.scene.every((v) => pattern.includes(v));
64                    if (!hasScene) {
65                        return false;
66                    }
67                    // 選択された時間帯のいずれかを含んでいるか
68                    if (selectedByGroup.time) {
69                        return selectedByGroup.time.some((t) => pattern.includes(t));
70                    }
71                    return true;
72                });
73                if (!sceneOK) {
74                    item.classList.add('is-none');
75                    return;
76                }
77            }
78            /* --------------------
79             * ジャンル：OR検索
80             * -------------------- */
81            if (selectedByGroup.genre) {
82                const genreOK = patterns.some((pattern) => selectedByGroup.genre.some((v) => pattern.includes(v)));
83                if (!genreOK) {
84                    item.classList.add('is-none');
85                    return;
86                }
87            }
88            item.classList.remove('is-none');
89            displayCount++;
90        });
91        noneText?.classList.toggle('is-open', displayCount === 0);
92    };
93    /**
94     * 絞り込みボタン
95     */
96    btnSearch?.addEventListener('click', () => {
97        refineItems();
98    });
99    /**
100     * 全チェック解除
101     */
102    btnUnCheck?.addEventListener('click', () => {
103        inputs.forEach((input) => {
104            input.checked = false;
105        });
106    });
107}
108export {};