LiveCartaWP/htdocs/wp-content/themes/lawcarta/assets/js/ui.js

window.addEventListener('DOMContentLoaded', function(){

    // home page scripts start
    function startTopBlockAnimations(){
        const lines = [
            'customized learning experiences.',
            'online publishing.',
            'customized teaching experiences.'
        ];
        let currentTextNum = 0;
        const element = document.getElementById('animatedText');
    
        function clearCurrent(){
            element.innerText = element.innerText.slice(0, -1);
            if (element.innerText.length > 0 ) {
                setTimeout(function(){
                    clearCurrent();
                }, 30);	
            } else {
                currentTextNum++;
                if (currentTextNum > lines.length - 1) {
                    currentTextNum = 0;
                }
                setTimeout(function(){
                    addNext();
                }, 1000);												
            }												
        }
    
        function addNext(){
            if (!element) return;
            element.innerText = lines[currentTextNum].substr(0, element.innerText.length + 1);
            if (element.innerText.length === lines[currentTextNum].length ) {
                setTimeout(function(){
                    clearCurrent();
                }, 1000);		
            } else {
                setTimeout(function(){
                    addNext();
                }, 30);												
            }
        }
    
        setTimeout(function(){
            addNext();
        }, 1000);
    }

    if (this.document.querySelector('.promo-top')) {
        startTopBlockAnimations();
    }
    // home page scripts end

    // catalog 

    if (document.getElementById('catalogSearchBtn')) {
        const catalogSearchBtn = document.getElementById('catalogSearchBtn');
        const catalogSearchInput = document.getElementById('catalogSearchInput');
        const catalogSearchClear = document.getElementById('catalogSearchClear');

        catalogSearchBtn.addEventListener('click', function(){
            let searchText = catalogSearchInput.value;
            top.location = 'https://app.livecarta.com/catalog?tab=books-tab&search=' + searchText;
        })

        catalogSearchClear.addEventListener('click', function(){
            catalogSearchInput.value = '';
        })

        catalogSearchInput.addEventListener('keyup', function(e){
            if (e.keyCode === 13) {
                let searchText = catalogSearchInput.value;
                top.location = 'https://app.livecarta.com/catalog?tab=books-tab&search=' + searchText;
            }
        })
    }    

    // sliders

    if (document.querySelector('.catalog-slider')) {
        const catalogSlider = new Splide( '.catalog-slider', {
            type: 'loop',
            perPage: 5,
            perMove: 1,
            pagination: false,
            gap: 10,
            drag: 'free',
            breakpoints: {
                740: { perPage: 2 },
                1060: { perPage: 3 },
                1280: { perPage: 4 }
            }
        } ).mount();
    } 

    if (document.querySelector('.pc-slider .splide')) {
        new Splide('.pc-slider .splide', {
            type: 'loop',
            perPage: 3,
            perMove: 1,
            pagination: false,
            gap: 10,
            breakpoints: {
                1000: { perPage: 2 },
                768: { perPage: 1, gap: 0 },
            }
        }).mount();
    }

    // scary animations

    document.addEventListener('click', (event) => {
        if (event.target.closest('.set-icon') || event?.classList?.contains('set-icon')) {
            event.preventDefault();
            const elem = event.target.closest('.set-icon') || event.classList.contains('set-icon');
            if (elem.classList.contains('selected')) return;
            const states = {
                remix: { remix: 'selected', custom: 'rt', bundle: 'rb', copylink: 'lb', publish: 'lt' },
                custom: { remix: 'lt', custom: 'selected', bundle: 'rt', copylink: 'rb', publish: 'lb' },
                bundle: { remix: 'lb', custom: 'lt', bundle: 'selected', copylink: 'rt', publish: 'rb' },
                copylink: { remix: 'rb', custom: 'lb', bundle: 'lt', copylink: 'selected', publish: 'rt' },
                publish: { remix: 'rt', custom: 'rb', bundle: 'lb', copylink: 'lt', publish: 'selected' }
            }
            const state = states[elem.dataset.icon];
            const icons = document.querySelectorAll('.scary-icon');
            icons.forEach(icon => {
                const iconType = icon.dataset.icon;
                icon.className = 'scary-icon' + ' ' + state[iconType];
            })

            const hoverBlocks = document.querySelectorAll('.hover-block');
            hoverBlocks.forEach(block => {
                block.classList.remove('selected');
            })
            elem.classList.add('selected')
        }
    })

    // blog page

    document.body.addEventListener('click', function(event){
        var catClass = '';
        if (event.target.closest('.category-select')) {
            event.preventDefault();
            let elem = event.target.closest('.category-select');
            document.querySelector('.category-select.selected').classList.remove('selected');
            elem.classList.add('selected');
            document.querySelector('.bp-list').classList.remove('cat-publishing');
            document.querySelector('.bp-list').classList.remove('cat-teaching'); 
            document.querySelector('.bp-list').classList.remove('cat-learning');
            document.querySelector('.bp-list').classList.remove('cat-all');
            catClass = elem.dataset.cat;
            document.querySelector('.bp-list').classList.add(catClass);
            return false;
        }
    });

    // faq search clear

    let clearBtn = document.querySelector('.faq-search .button.clear');
    if (clearBtn) clearBtn.addEventListener('click', function(event){
        let input = clearBtn.closest('.faq-search').querySelector('input[type="text"]');
        if (input.getAttribute('value')) {
            event.preventDefault();
            input.value = '';
            clearBtn.closest('form').submit();
            return false;
        }        
    });
});