MusicTopus/javascripts/main.js

152 lines
4.1 KiB
JavaScript
Raw Normal View History

2022-10-28 22:56:04 +02:00
/* eslint-disable no-unused-vars */
const { protocol, host } = window.location;
2022-10-28 22:56:04 +02:00
/**
* Fonction permettant d'afficher un message dans un toastr
* @param {String} message
*/
function showToastr(message, success = false) {
2022-10-28 22:56:04 +02:00
const x = document.getElementById("toastr");
if (message) {
x.getElementsByTagName("SPAN")[0].innerHTML = message;
}
x.className = `${x.className} show`.replace("sucess", "");
2022-10-28 22:56:04 +02:00
if (success) {
x.className = `${x.className} success`;
}
2022-10-28 22:56:04 +02:00
setTimeout(() => {
x.className = x.className.replace("show", "");
}, 3000);
}
/**
* Fonction permettant de masquer le toastr
*/
function hideToastr() {
2022-10-28 22:56:04 +02:00
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}
*/
2022-10-28 22:56:04 +02:00
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];
2022-10-28 22:56:04 +02:00
while (c.charAt(0) === " ") {
c = c.substring(1);
}
2022-10-28 22:56:04 +02:00
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();
2022-10-28 22:56:04 +02:00
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
const expires = `expires=${d.toUTCString()}`;
document.cookie = `${cname}=${cvalue};${expires};path=/`;
}
/**
* Fonction de ()charger le thème accessible
* @param {String} value
*/
function setAriaTheme(value) {
2022-10-28 22:56:04 +02:00
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 ()charger le thème accessible
*/
function switchAriaTheme() {
2022-10-28 22:56:04 +02:00
const { body } = document;
body.classList.toggle("is-accessible");
2022-10-28 22:56:04 +02:00
setCookie("ariatheme", body.classList.contains("is-accessible"));
}
/**
* Fonction permettant de switcher de thème clair/sombre
* @param {Object} e
*/
function switchTheme(e) {
2022-10-28 22:56:04 +02:00
const theme = e.target.checked ? "dark" : "light";
2022-10-28 22:56:04 +02:00
document.documentElement.setAttribute("data-theme", theme);
setCookie("theme", theme);
}
/**
* Ensemble d'actions effectuées au chargement de la page
*/
2022-10-28 22:56:04 +02:00
document.addEventListener("DOMContentLoaded", () => {
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
if ($navbarBurgers.length > 0) {
2022-10-28 22:56:04 +02:00
$navbarBurgers.forEach((el) => {
el.addEventListener("click", () => {
const { target } = el.dataset;
const $target = document.getElementById(target);
2022-10-28 22:56:04 +02:00
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
2022-10-28 22:56:04 +02:00
if (switchAriaThemeBtn) {
switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
}
2022-10-28 22:56:04 +02:00
setAriaTheme(getCookie("ariatheme"));
2022-10-28 22:56:04 +02:00
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
if (toggleSwitch) {
toggleSwitch.addEventListener("change", switchTheme, false);
}
2022-10-28 22:56:04 +02:00
let currentThemeIsDark = getCookie("theme");
if (currentThemeIsDark === "false" && window.matchMedia) {
currentThemeIsDark = window.matchMedia("(prefers-color-scheme: dark)")
.matches
? "dark"
: "light";
}
2022-10-28 22:56:04 +02:00
switchTheme({ target: { checked: currentThemeIsDark === "dark" } });
if (toggleSwitch) {
toggleSwitch.checked = currentThemeIsDark === "dark";
}
2022-10-28 22:56:04 +02:00
});