MusicTopus/javascripts/main.js

/* eslint-disable no-unused-vars */
const { protocol, host } = window.location;

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

    x.className = `${x.className} show`.replace("sucess", "");
    if (success) {
        x.className = `${x.className} success`;
    }
    setTimeout(() => {
        x.className = x.className.replace("show", "");
    }, 3000);
}

/**
 * Fonction permettant de masquer le toastr
 */
function hideToastr() {
    const 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") {
    const name = `${cname}=`;
    const decodedCookie = decodeURIComponent(document.cookie);
    const 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);
    const expires = `expires=${d.toUTCString()}`;
    document.cookie = `${cname}=${cvalue};${expires};path=/`;
}

/**
 * Fonction de (dé)charger le thème accessible
 * @param {String} value
 */
function setAriaTheme(value) {
    const { body } = document;
    if (value === "true") {
        const 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() {
    const { body } = document;

    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;
                const $target = document.getElementById(target);

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

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

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

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