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

const imgs = document.querySelectorAll('.ci-top img');
if (imgs.length) {
    imgs.forEach(img => {
        img.setAttribute('onload', "this.classList.add('loaded')");
        img.setAttribute('onerror', "this.classList.add('loaded')");
        img.insertAdjacentHTML('afterend', '<span class="skeleton skeleton-casebook-top"></span>');
        if (img.complete) {
            console.log(1);
            img.classList.add('loaded');
        }
    })
}

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=materials&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=materials&search=' + searchText;
            }
        })
    }    

    document.addEventListener('click', function(e){
        if (e.target.classList && e.target.closest('.catalogSearchBtn')) {				
            let searchText = e.target.closest('.input-flex').querySelector('.catalogSearchInput').value;
            top.location = 'https://app.livecarta.com/catalog?tab=materials&search=' + searchText;
        }
        if (e.target.classList && e.target.closest('.catalogSearchClear')) {
            e.target.closest('.input-flex').querySelector('.catalogSearchInput').value = '';
        }
    })

    document.addEventListener('keyup', function(e){
        if (e.keyCode === 13 && e.target.classList.contains('catalogSearchInput')) {
            let searchText = e.target.value;
            top.location = 'https://app.livecarta.com/catalog?tab=materials&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')
        }
    })

    // logos slider

    if (document.querySelector('.logos-slider')) {
        const catalogSlider = new Splide( '.logos-slider', {
            type: 'loop',
            drag: 'free',
            focus: 'center',
            pagination: false,
            arrows: false,
            gap: 120,
            height: '9rem',
            autoWidth: true,
            autoScroll: {
                speed: 1,
                pauseOnHover: false
            },
            breakpoints: {
                740: { gap: 60 },
                1060: { gap: 80 },
                1280: { gap: 100 }
            }
        } ).mount(window.splide.Extensions);
    } 

    // 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;
        }        
    });
});