beta-2024/public/js/accessibility.js

document.addEventListener('DOMContentLoaded', () => {
    var accessOpen = false;
    var grayscale = false;
    var underline = false;
    const accessBtn = document.getElementById('access-tab');
    const accessCtn = document.getElementById('access-container')

    const elements = document.querySelectorAll('.text-content p, #index-info p, #hyperlink-container, #page-header, .list-title, .list-artists, .list-details, #article-title, #article-text, .page-info-title, .page-info-entry, #article-information, #article-book');
    const elements_underline = document.querySelectorAll('#page-header a, a, .hyperlink, #hyperlink-container a, .hyperlink-header');

    const accessTextIncrease = document.getElementById('access-increase-text-size');
    const accessTextDecrease = document.getElementById('access-decrease-text-size');
    const accessUnderline = document.getElementById('access-underline');
    const accessGrayscale = document.getElementById('access-grayscale');
    const accessReset = document.getElementById('access-reset');

    const accessItems = document.querySelectorAll('.access-item'); // New: Select access items

    // Map to store original font sizes and line heights
    const originalStyles = new Map();

    // Store original styles
    elements.forEach(element => {
        const computedStyle = window.getComputedStyle(element);
        originalStyles.set(element, {
            fontSize: computedStyle.fontSize,
            lineHeight: computedStyle.lineHeight
        });
    });

    accessTextDecrease.addEventListener('click', () => {
        adjustTextSize(0.9)
    });

    accessTextIncrease.addEventListener('click', () => {
        adjustTextSize(1.1)
    });

    accessGrayscale.addEventListener('click', () => {
        if (grayscale) {
            deactivateGS();
            grayscale = false;
        } else {
            activateGS();
            grayscale = true;
        }
    });

    accessUnderline.addEventListener('click', () => {
        if (underline) {
            removeUnderline();
            underline = false;
        } else {
            addUnderline();
            underline = true;
        }
    });

    accessBtn.addEventListener('click', () => {
        if (accessOpen) {
            // close i
            accessCtn.style.display = 'none'
            accessItems.forEach(item => item.classList.remove('animate')); // Remove animation classes
            accessOpen = false;
        } else {
            // open it
            
            setTimeout(() => { // Ensure the display is set before starting the animation
                accessCtn.style.right = '20px'; // Slide in
            }, 10);
             accessCtn.style.display = 'flex';
            animateAccessItems(); // Animate items
            accessOpen = true;
        }
    });

    accessReset.addEventListener('click', () => {
        reset();
    });

    function adjustTextSize(factor) {
        elements.forEach(element => {
            // Get the current font size of the element
            const currentSize = parseFloat(window.getComputedStyle(element, null).getPropertyValue('font-size'));
            // Calculate the new size based on the factor
            const newSize = currentSize * factor;
            // Apply the new size to the element
            element.style.fontSize = `${newSize}px`;
            element.style.lineHeight = `${newSize}px`;
        });  
    }

    function addUnderline() {
        elements_underline.forEach(element => {
            element.style.textDecoration = 'underline';
        });  
    }

    function removeUnderline() {
        elements_underline.forEach(element => {
            element.style.textDecoration = 'none';
        });  
    }

    function activateGS() {
        document.documentElement.style.filter = 'grayscale(1) contrast(150%)';
    }

    function deactivateGS() {
        document.documentElement.style.filter = '';
    }

    function reset() {
        // Reset grayscale and underline
        deactivateGS();
        removeUnderline();

        // Reset text size and line height
        elements.forEach(element => {
            if (originalStyles.has(element)) {
                const { fontSize, lineHeight } = originalStyles.get(element);
                element.style.fontSize = fontSize;
                element.style.lineHeight = lineHeight;
            }
        });

        // Reset flags
        grayscale = false;
        underline = false;
    }

    function animateAccessItems() {
        accessItems.forEach((item, index) => {
            setTimeout(() => {
                item.classList.add('animate');
            }, index * 150); // Stagger animation by 100ms per item
        });
    }
    
});