https://www.casinoonline.jp/wp-content/themes/casinoonline/blocks/…/js/event-tab-section.js?ver=1764843923

1document.addEventListener('DOMContentLoaded', () => {
2    const tab = document.getElementById('event-tab-section');
3
4    if (!tab) {
5        return;
6    }
7
8    const showMoreBtn = tab.querySelector('.event-tab-section__load-more-btn');
9    const tabHeader = tab.querySelector('.event-tab-section__header');
10    const tabHeaderItems = tabHeader.querySelectorAll('.event-tab-section__header-item');
11    const eventContainer = tab.querySelector('.event-tab-section__event-container');
12    const tabContent = tab.querySelector('.event-tab-section__content');
13    const tabContentItems = tab.querySelectorAll('.event-tab-section__content-item');
14    const nextPrevEventTabButtons = document.querySelectorAll('.event-tab-section__event-tab-btn');
15
16    function initEventTabSection () {
17        addShowMoreClassIfNeeded();
18        setTabIndexesToEventCards();
19    }
20
21    function setVisibilityOfCard(card) {
22        const isHidden = (card.offsetTop + card.clientHeight) >= tabContent.clientHeight;
23        card.setAttribute('tabindex', isHidden ? -1 : 0);
24        if (isHidden) {
25            card.closest('.event-card-container').classList.add('event-card-container--hidden')
26        } else {
27            card.closest('.event-card-container').classList.remove('event-card-container--hidden')
28        }
29    }
30
31    function setTabIndexesToEventCards() {
32        const currentContentItem = tabContent.querySelector('.event-tab-section__content-item.active');
33        const cards = currentContentItem.querySelectorAll('.event-card__link');
34        cards.forEach(setVisibilityOfCard);
35    }
36
37    function isTabContentScrollable() {
38        return tabContent.clientHeight === tabContent.scrollHeight;
39    }
40
41    function addShowMoreClassIfNeeded() {
42        tab.classList.toggle('event-tab-section--show-more', isTabContentScrollable());
43    }
44
45    function setActiveTabContent(i) {
46        tabHeaderItems[i].classList.add('active');
47        tabContentItems[i].classList.add('active');
48    }
49
50    function resetAllTabContent() {
51        tabHeaderItems.forEach(item => item.classList.remove('active'));
52        tab.classList.remove('event-tab-section--show-more');
53        tabContentItems.forEach(item => {
54            if (item.classList.contains('active')) {
55                item.classList.remove('active');
56                const cardContainers = item.querySelectorAll('.event-card-container');
57                cardContainers.forEach(cardContainer => cardContainer.classList.remove('event-card-container--hidden'));
58            }
59        });
60    }
61
62    function toggleContentItem (index) {
63        resetAllTabContent();
64        setActiveTabContent(index);
65        addShowMoreClassIfNeeded();
66        setTabIndexesToEventCards(index);
67        toggleAriaLabels(index)
68    }
69
70    function toggleAriaLabels (index) {
71        tabContentItems.forEach(item => item.setAttribute('aria-hidden', 'true'));
72        tabContentItems[index].setAttribute('aria-hidden', 'false');
73    }
74
75    tabHeaderItems.forEach((item, index) => {
76        item.addEventListener('click', () => {
77            toggleContentItem(index);
78        });
79
80        item.addEventListener('keydown', (e) => {
81            if (e.key === 'Space' || e.code === 'Space' || e.key === 'Enter' || e.code === 'Enter') {
82                toggleContentItem(index);
83            }
84        });
85    });
86
87    nextPrevEventTabButtons.forEach((button) => {
88        button.addEventListener('click', (e) => {
89            e.preventDefault();
90            const index = +button.dataset.tabNumber;
91            toggleContentItem(index);
92            tab.scrollIntoView({behavior: 'smooth',block: 'center'});
93        })
94    })
95
96    showMoreBtn.addEventListener('click', (e) => {
97        e.preventDefault();
98        tab.classList.add('event-tab-section--show-more');
99        setTabIndexesToEventCards();
100    });
101
102    showMoreBtn.addEventListener('blur', (e) => {
103        const activeEventContentItem = tabContent.querySelector('.event-tab-section__content-item.active');
104        const currentNextPrevEventTabButtons = activeEventContentItem.querySelectorAll('.event-tab-section__event-tab-btn');
105        if (currentNextPrevEventTabButtons.length > 0) {
106            currentNextPrevEventTabButtons[currentNextPrevEventTabButtons.length - 1].focus();
107        } else {
108            const activeEventCards = activeEventContentItem.querySelectorAll('.event-card__link');
109            if (activeEventCards.length > 0) {
110                activeEventCards[activeEventCards.length - 1].focus();
111            }
112        }
113    });
114
115    initEventTabSection();
116});
117