https://vapor.codes/static/js/scrollShowcase.js

1function isScrollable(element) {
2    return element.scrollWidth > element.clientWidth;
3}
4
5function updateScrollButtonStates(scrollable, leftButton, rightButton) {
6    const isAtStart = scrollable.scrollLeft === 0;
7    const isAtEnd = scrollable.scrollLeft + scrollable.clientWidth >= scrollable.scrollWidth - 1; // -1 to account for rounding errors
8
9    leftButton.disabled = isAtStart;
10    rightButton.disabled = isAtEnd;
11
12    leftButton.classList.toggle('disabled', isAtStart);
13    rightButton.classList.toggle('disabled', isAtEnd);
14}
15
16function updateScrollButtonVisibility(scrollable, buttonGroup) {
17    if (isScrollable(scrollable)) {
18        buttonGroup.style.display = 'flex';
19        const leftButton = buttonGroup.querySelector(".left-scroll-button");
20        const rightButton = buttonGroup.querySelector(".right-scroll-button");
21        updateScrollButtonStates(scrollable, leftButton, rightButton);
22    } else {
23        buttonGroup.style.display = 'none';
24    }
25}
26
27function scroll(direction) {
28    return function (event) {
29        const buttonGroup = event.target.closest(".scroll-button-group");
30        const scrollableID = buttonGroup.getAttribute("data-scrollable");
31        const scrollable = document.getElementById(scrollableID);
32        const cardWidth = scrollable.querySelector(".card").offsetWidth + 32;
33
34        if (scrollable) {
35            scrollable.scrollBy({
36                top: 0,
37                left: direction * cardWidth,
38                behavior: 'smooth'
39            });
40
41            setTimeout(() => {
42                const leftButton = buttonGroup.querySelector(".left-scroll-button");
43                const rightButton = buttonGroup.querySelector(".right-scroll-button");
44                updateScrollButtonStates(scrollable, leftButton, rightButton);
45            }, 500);
46        }
47    };
48}
49
50const scrollToRight = scroll(1);
51const scrollToLeft = scroll(-1);
52
53function initializeScrollButtons() {
54    document.querySelectorAll(".scroll-button-group").forEach(buttonGroup => {
55        const scrollableID = buttonGroup.getAttribute("data-scrollable");
56        const scrollable = document.getElementById(scrollableID);
57
58        if (scrollable) {
59            const leftButton = buttonGroup.querySelector(".left-scroll-button");
60            const rightButton = buttonGroup.querySelector(".right-scroll-button");
61
62            updateScrollButtonVisibility(scrollable, buttonGroup);
63
64            leftButton.addEventListener("click", scrollToLeft);
65            rightButton.addEventListener("click", scrollToRight);
66
67            scrollable.addEventListener('scroll', () => {
68                updateScrollButtonStates(scrollable, leftButton, rightButton);
69            });
70
71            window.addEventListener('resize', () => {
72                updateScrollButtonVisibility(scrollable, buttonGroup);
73            });
74
75            const observer = new MutationObserver(() => {
76                updateScrollButtonVisibility(scrollable, buttonGroup);
77            });
78            observer.observe(scrollable, { childList: true, subtree: true });
79        }
80    });
81}
82
83document.addEventListener('DOMContentLoaded', initializeScrollButtons);