MusicTopus/public/js/main.js

/**
             * Fonction permettant d'afficher un message dans un toastr
             * @param {String} message
             */
 function showToastr(message) {
    let x = document.getElementById("toastr");
    if ( message ) {
        x.getElementsByTagName("SPAN")[0].innerHTML = message;
    }

    x.className = `${x.className} show`;
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
};

/**
 * Fonction permettant de masquer le toastr
 */
function hideToastr() {
    let x = document.getElementById("toastr");

    x.className = x.className.replace("show", "");
    x.getElementsByTagName("SPAN")[0].innerHTML = "";
}

/**
 * Fonction permettant de récupérer la valeur d'un cookie
 * @param {String} cname
 * @param {String} defaultValue
 *
 * @return {String}
 */
function getCookie(cname, defaultValue = 'false') {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for(let i = 0; i < ca.length; i+=1) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
        c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
        }
    }
    return defaultValue;
}

/**
 * Fonction permettant de créer un cookie
 * @param {String} cname
 * @param {String} cvalue
 * @param {Number} exdays
 */
function setCookie(cname, cvalue, exdays = 30) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    let expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

/**
 * Fonction de (dé)charger le thème accessible
 * @param {String} value
 */
function setAriaTheme(value) {
    let body = document.body;
    if ( value === 'true' ) {
        let classesString = body.className || "";
        if (classesString.indexOf("is-accessible") === -1) {
            body.classList.add("is-accessible");
        }
    } else {
        body.classList.remove("is-accessible");
    }
}

/**
 * Fonction de (dé)charger  le thème accessible
 */
function switchAriaTheme() {
    let body = document.body;

    body.classList.toggle("is-accessible");

    setCookie('ariatheme', body.classList.contains("is-accessible"));
}

/**
 * Fonction permettant de switcher de thème clair/sombre
 * @param {Object} e
 */
function switchTheme(e) {
    const theme = e.target.checked ? 'dark' : 'light';

    document.documentElement.setAttribute('data-theme', theme);
    setCookie('theme', theme);
}

/**
 * Ensemble d'actions effectuées au chargement de la page
 */
document.addEventListener('DOMContentLoaded', () => {
    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
    if ($navbarBurgers.length > 0) {
        $navbarBurgers.forEach( el => {
            el.addEventListener('click', () => {
                const target = el.dataset.target;
                const $target = document.getElementById(target);

                el.classList.toggle('is-active');
                $target.classList.toggle('is-active');
            });
        });
    }

    const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
    switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
    setAriaTheme(getCookie('ariatheme'));

    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
    toggleSwitch.addEventListener('change', switchTheme, false);

    let currentThemeIsDark = getCookie('theme');
    if ( currentThemeIsDark === 'false' && window.matchMedia ) {
        currentThemeIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }
    console.log('currentThemeIsDark:', currentThemeIsDark);
    switchTheme({target: {checked: currentThemeIsDark === 'dark'}});
    toggleSwitch.checked = currentThemeIsDark === 'dark';
});