From 5bef61f7abbe8947e5537759991bda919e62d019 Mon Sep 17 00:00:00 2001 From: dbroqua Date: Thu, 24 Feb 2022 09:14:30 +0100 Subject: [PATCH] =?UTF-8?q?#19=20Ajout=20d'un=20label=20pour=20masquer=20l?= =?UTF-8?q?e=20toastr=20&=20ajout=20d'un=20fichier=20s=C3=A9par=C3=A9=20po?= =?UTF-8?q?ur=20le=20JS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/main.js | 130 ++++++++++++++++++++++++++++++++++++++++++ views/index.ejs | 140 +--------------------------------------------- 2 files changed, 132 insertions(+), 138 deletions(-) create mode 100644 public/js/main.js diff --git a/public/js/main.js b/public/js/main.js new file mode 100644 index 0000000..710d84b --- /dev/null +++ b/public/js/main.js @@ -0,0 +1,130 @@ +/** + * 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'; +}); \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index 8ec39a7..e1ac71a 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -18,143 +18,7 @@ - - +
- +