/src/ts/script.js

script.js

// Toggle Menu //
const styleSwitcher = document.querySelector(".style-switcher");
const links = document.querySelectorAll('.aside-link');
let menutoggle = document.querySelector('.toggle');
let aside = document.querySelector('.aside');
let skinColor = '#ec1839'

window.addEventListener('resize', () => {
    if (window.screen.width >= 1001 && menutoggle && aside && aside instanceof HTMLElement) {
        aside.style.left = '0'
        menutoggle.classList.add('active-menu');
    } else {
        hiddenSidebar()
    }
});

menutoggle?.addEventListener("click", () => {
    menutoggle?.classList.toggle('active-menu');

    if (window.screen.width <= 1000) {
        if (menutoggle?.classList.contains('active-menu') && aside && aside instanceof HTMLElement) {
            aside.style.left = '0'
        } else if (aside && aside instanceof HTMLElement) {
            aside.style.left = '-10em'
        }
    }
});

// Hidden Sidebar Click //
const hiddenSidebar = () => {
    if (window.screen.width <= 1000 && menutoggle && aside && aside instanceof HTMLElement) {
        aside.style.left = '-10em'
        menutoggle.classList.remove('active-menu');
    }
}

// Toggle Style Swticher //
const styleSwitcherToggle = document.querySelector('.style-switcher-toggler');
styleSwitcherToggle?.addEventListener("click", () => {
    document.querySelector(".style-switcher")?.classList.toggle("open");
})

// Limpa a class active de todos os links que conte-la
const clearClass = () => {
    links.forEach(item => {
        if (item.classList.contains('active')) {
            item.classList.remove('active')
        }
    })
}

// Section Check //
const activeOn = (value: string) => {
    links.forEach(item => {
        if (item.classList.contains(value)) {
            clearClass()
            item.classList.add('active')
        }
    })
}

//hide style switcher on scroll
window.addEventListener("scroll", () => {
    if (styleSwitcher?.classList.contains("open")) {
        styleSwitcher.classList.remove("open");
    }
});

// Theme Colors //
function setActiveStyle(color: string) {
    if (color.length < 3 || color.length > 6) {
        document.documentElement.style.setProperty('--skin-color', skinColor);
    }
    skinColor = color
    document.documentElement.style.setProperty('--skin-color', skinColor);
    calcScrollValue()
}

const hexaColor = () => {
    let inputColor = document.querySelector('#hexa-decimal') as HTMLInputElement
    let valueColor = inputColor.value
    const regexHexa = /^#?[0-9A-Fa-f]{3,6}$/

    if (!valueColor.startsWith('#')) {
        valueColor = '#' + valueColor
    }

    if (inputColor) {
        const hexaValue = regexHexa.test(valueColor)

        if (hexaValue) {
            inputColor.style.border = '2px solid #198754'
            setActiveStyle(valueColor)
        } else {
            inputColor.style.border = '2px solid #dc3545'
            setActiveStyle('#ec1839')
        }
    }
}

// Theme Light And Dark Mode
const daynight = document.querySelector('.day-night');
let mode = document.querySelector('.mode');

daynight?.addEventListener('click', () => {
    mode?.classList.toggle('fa-sun');
    mode?.classList.toggle('fa-moon');
    document.body.classList.toggle('dark');
});

window.addEventListener('load', () => {
    if (document.body.classList.contains('dark')) {
        mode?.classList.remove('fa-moon');
        mode?.classList.add('fa-sun');
    } else {
        mode?.classList.add('fa-moon');
        mode?.classList.remove('fa-sun');
    }
});

// Form Validation //
const form = document.querySelector('#form');
const inputs = document.querySelectorAll('.required') as NodeListOf<HTMLInputElement>
const inp2 = document.querySelectorAll('#text-area');
const spans = document.querySelectorAll('.span-required') as NodeListOf<HTMLSpanElement>
const emailRegex = /^[a-zA-Z0-9.!#$%&'+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)$/;

const setSuccesOrErro = (n: number, command: string) => {
    if (command == 'succes') {
        if (inputs[n] instanceof HTMLElement && spans[n] instanceof HTMLSpanElement) {
            inputs[n].style.borderColor = '#198754'
            spans[n].style.display = 'none'
        }
    } else if (command == 'erro') {
        if (inputs[n] instanceof HTMLElement && spans[n] instanceof HTMLSpanElement) {
            inputs[n].style.borderColor = '#dc3545'
            spans[n].style.display = 'block'
        }
    }
}

// Valida os inputs verificando se eles existem e não estão vazios
const validate = (i: number) => {
    if (inputs && inputs[i] && inputs[i] instanceof HTMLInputElement) {
        const inputValue = inputs[i].value.trim()
        if (inputValue != '' && inputs[i].value != ' ' && inputs[i].value != 'ﾠ' && inputs[i].value != 'ㅤ') {
            setSuccesOrErro(i, 'succes')
        } else {
            setSuccesOrErro(i, 'erro')
        }
    }
}

const emailValidate = () => {
    const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (inputs && inputs[1] && inputs[1] instanceof HTMLInputElement) {
        const emailValue = regex.test(inputs[1].value);

        if (emailValue) {
            setSuccesOrErro(1, 'succes')
        } else {
            setSuccesOrErro(1, 'erro')
        }
    }
}

// Faz a mesma coisa que a de cima, a difereça é q essa é especifica para a mensagem
const messageValidate = (i: number) => {
    const inputValue = inputs[i].value.trim()
    if (inputValue != '' && inputs[i].value != ' ' && inputs[i].value != 'ﾠ' && inputs[i].value != 'ㅤ') {
        setSuccesOrErro(i, 'succes')
    } else {
        setSuccesOrErro(i, 'erro')
    }
}

const submitValidate = () => {
    if (inputs) {
        inputs.forEach((item, index) => {
            if (item.value === '' || item.value == ' ' || item.value == 'ﾠ' || item.value == 'ㅤ') {
                setSuccesOrErro(index, 'erro')
            }
        })
    }
}

// Button to top
let calcScrollValue = () => {
    let scrollProgress = document.querySelector('.progress-top') as HTMLElement
    let pos = document.documentElement.scrollTop;
    let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    let scrollValue = Math.round((pos * 100) / calcHeight);

    if (pos && pos > 100) {
        scrollProgress.style.transform = 'translateY(0px)';
    } else {
        scrollProgress.style.transform = 'translateY(100px)';
    }

    scrollProgress?.addEventListener('click', () => {
        document.documentElement.scrollTop = 0;
    });

    scrollProgress.style.background = `conic-gradient(${skinColor} ${scrollValue}%, #d7d7d7b6 ${scrollValue}%)`
}

window.onscroll = calcScrollValue;
window.onload = calcScrollValue;

// Idiomas

interface Translations {
  [key: string]: {
    [key: string]: string;
  };
}


let translations: Translations = {
  pt: {
    home: 'Início',
    about: 'Sobre',
    services: 'Serviços',
    portfolio: 'Portfólio',
    contact: 'Contato',
  },
  en: {
    home: 'YYYY',
    about: 'YYY',
    services: 'YYY',
    portfolio: 'YYY',
    contact: 'YY',
  },
  es: {
    home: 'XXXX',
    about: 'XXXX',
    services: 'XXXX',
    portfolio: 'XXX',
    contact: 'XXXX',
  },
};


type Language = "pt" | "en" | "es";

const setLanguage = (lang: Language) => {
    if (lang === 'pt') {
        updateTranslations('pt');
    } else if ('en') {
        updateTranslations('en');
    }  else if ('es') {
        updateTranslations('es');
    }
};

const updateTranslations = (lang: Language) => {
    if (lang === 'pt') {
        Object.keys(translations[lang]).forEach((key: string) => {
            let element = document.getElementById(key) as HTMLElement;
            console.log(element)
            if (element) {
                element.innerHTML = translations[lang][key];
            }
        });
    }
};