Foxes-Night-s-Enigma/script.js at main · mangofoxplay/Foxes-Night-s-Enigma · GitHub

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
document.addEventListener('DOMContentLoaded', () => {
    const galleryGrid = document.getElementById('galleryGrid');
    const galleryWrapper = document.getElementById('galleryWrapper');
    const prevBtn = document.getElementById('galleryPrevBtn');
    const nextBtn = document.getElementById('galleryNextBtn');

    if (!galleryGrid || !galleryWrapper || !prevBtn || !nextBtn) {
        console.warn("Gallery elements not found. Scrolling will not work.");
        return;
    }

    const galleryItems = galleryGrid.querySelectorAll('.gallery-item');
    if (galleryItems.length === 0) {
        prevBtn.style.display = 'none';
        nextBtn.style.display = 'none';
        return;
    }

    let scrollAmount = 0;
    let currentScroll = 0;
    const itemGap = parseFloat(getComputedStyle(galleryGrid).gap) || 25;

    function calculateScrollAmount() {
        if (galleryItems.length > 0) {
            const itemWidth = galleryItems[0].offsetWidth;
            scrollAmount = itemWidth + itemGap;
        }
    }

    function updateButtonStates() {
        prevBtn.disabled = currentScroll <= 1;
        // Account for grid's right padding (50px) in maxScroll
        const gridPaddingRight = parseFloat(getComputedStyle(galleryGrid).paddingRight) || 50;
        const maxScroll = galleryGrid.scrollWidth - galleryWrapper.clientWidth + gridPaddingRight;
        nextBtn.disabled = currentScroll >= maxScroll - 5; // Larger buffer for sub-pixel issues
    }

    calculateScrollAmount();
    updateButtonStates();

    nextBtn.addEventListener('click', () => {
        currentScroll += scrollAmount;
        const gridPaddingRight = parseFloat(getComputedStyle(galleryGrid).paddingRight) || 50;
        const maxScroll = galleryGrid.scrollWidth - galleryWrapper.clientWidth + gridPaddingRight;
        if (currentScroll > maxScroll) {
            currentScroll = maxScroll;
        }
        galleryWrapper.scrollTo({
            left: currentScroll,
            behavior: 'smooth'
        });
        updateButtonStates();
    });

    prevBtn.addEventListener('click', () => {
        currentScroll -= scrollAmount;
        if (currentScroll < 0) {
            currentScroll = 0;
        }
        galleryWrapper.scrollTo({
            left: currentScroll,
            behavior: 'smooth'
        });
        updateButtonStates();
    });

    galleryWrapper.addEventListener('scroll', () => {
        currentScroll = galleryWrapper.scrollLeft;
        updateButtonStates();
    });

    let resizeTimeout;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(() => {
            calculateScrollAmount();
            const gridPaddingRight = parseFloat(getComputedStyle(galleryGrid).paddingRight) || 50;
            const maxScroll = galleryGrid.scrollWidth - galleryWrapper.clientWidth + gridPaddingRight;
            if (currentScroll > maxScroll) {
                currentScroll = Math.max(0, maxScroll);
            }
            galleryWrapper.scrollTo({ left: currentScroll, behavior: 'auto' });
            updateButtonStates();
        }, 250);
    });
});