#19 Ajout d'un label pour masquer le toastr & ajout d'un fichier séparé pour le JS
This commit is contained in:
parent
5a67763ed2
commit
5bef61f7ab
2 changed files with 132 additions and 138 deletions
130
public/js/main.js
Normal file
130
public/js/main.js
Normal file
|
|
@ -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';
|
||||||
|
});
|
||||||
140
views/index.ejs
140
views/index.ejs
|
|
@ -18,143 +18,7 @@
|
||||||
|
|
||||||
<script src="/libs/axios/axios.min.js"></script>
|
<script src="/libs/axios/axios.min.js"></script>
|
||||||
<script src="/libs/vue/vue.global.prod.js"></script>
|
<script src="/libs/vue/vue.global.prod.js"></script>
|
||||||
|
<script src="/js/main.js"></script>
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* 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';
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
console.log('window.matchMedia:', window.matchMedia('(prefers-color-scheme: dark)').matches);
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar" aria-label="Navigation principale">
|
<nav class="navbar" aria-label="Navigation principale">
|
||||||
|
|
@ -236,7 +100,7 @@
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div id="toastr">
|
<div id="toastr">
|
||||||
<button class="delete" onclick="hideToastr()"></button>
|
<button class="delete" onclick="hideToastr()" aria-label="Masquer la notification"></button>
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue