Added css theme based on user system preferences
This commit is contained in:
parent
db7c5ef4ed
commit
e9052843a7
1 changed files with 120 additions and 64 deletions
|
|
@ -1,97 +1,153 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
let timeout = null;
|
||||
|
||||
/**
|
||||
* 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");
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Fonction permettant d'afficher un message dans un toastr
|
||||
* @param {String} message
|
||||
* @param {Boolean} success
|
||||
*/
|
||||
function showToastr(message, success = false) {
|
||||
const x = document.getElementById("toastr");
|
||||
if (message) {
|
||||
x.getElementsByTagName("SPAN")[0].innerHTML = message;
|
||||
}
|
||||
const x = document.getElementById('toastr');
|
||||
if (message) {
|
||||
x.getElementsByTagName('SPAN')[0].innerHTML = message;
|
||||
}
|
||||
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
x.classList.remove("show");
|
||||
}
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
x.classList.remove('show');
|
||||
}
|
||||
|
||||
x.classList.remove("success");
|
||||
x.classList.remove("error");
|
||||
if (success) {
|
||||
x.classList.add("success");
|
||||
} else {
|
||||
x.classList.add("error");
|
||||
}
|
||||
x.classList.remove('success');
|
||||
x.classList.remove('error');
|
||||
if (success) {
|
||||
x.classList.add('success');
|
||||
} else {
|
||||
x.classList.add('error');
|
||||
}
|
||||
|
||||
x.classList.add("show");
|
||||
x.classList.add('show');
|
||||
|
||||
timeout = setTimeout(() => {
|
||||
x.classList.remove("show");
|
||||
}, 3000);
|
||||
timeout = setTimeout(() => {
|
||||
x.classList.remove('show');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fonction permettant de masquer le toastr
|
||||
*/
|
||||
function hideToastr() {
|
||||
const x = document.getElementById("toastr");
|
||||
const x = document.getElementById('toastr');
|
||||
|
||||
x.className = x.className.replace("show", "");
|
||||
x.getElementsByTagName("SPAN")[0].innerHTML = "";
|
||||
x.className = x.className.replace('show', '');
|
||||
x.getElementsByTagName('SPAN')[0].innerHTML = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Fonction permettant de copier le contenu d'un input dans le presse papier
|
||||
* @param {String} itemId
|
||||
* @param {String} message
|
||||
*/
|
||||
const copyToClipboard = (itemId, message) => {
|
||||
const copyText = document.getElementById(itemId);
|
||||
copyText.select();
|
||||
document.execCommand('copy');
|
||||
const copyText = document.getElementById(itemId);
|
||||
copyText.select();
|
||||
document.execCommand('copy');
|
||||
|
||||
showToastr(message, true);
|
||||
showToastr(message, true);
|
||||
};
|
||||
|
||||
/**
|
||||
* Fonction permettant d'afficher une modale
|
||||
*/
|
||||
const showModale = () => {
|
||||
const x = document.getElementsByClassName("modal");
|
||||
const x = document.getElementsByClassName('modal');
|
||||
|
||||
x[0].classList.add('is-visible');
|
||||
}
|
||||
x[0].classList.add('is-visible');
|
||||
};
|
||||
|
||||
/**
|
||||
* Fonction permettant de fermer une modale
|
||||
*/
|
||||
const closeModale = () => {
|
||||
const x = document.getElementsByClassName("modal");
|
||||
const x = document.getElementsByClassName('modal');
|
||||
|
||||
x[0].classList.remove('is-visible');
|
||||
x[0].classList.remove('is-visible');
|
||||
};
|
||||
|
||||
/**
|
||||
* Fonction permettant d'afficher la modale avec le détails d'une image
|
||||
* @param {Number} itemId
|
||||
*/
|
||||
const displayImageDetails = (itemId) => {
|
||||
const x = document.getElementById(`item-${itemId}`);
|
||||
const original = x.dataset.original;
|
||||
const medium = x.dataset.medium;
|
||||
const small = x.dataset.small;
|
||||
|
||||
document.getElementById('previewImage').src = small;
|
||||
document.getElementById('originalFile-0').value = original;
|
||||
document.getElementById('mediumFile-0').value = medium;
|
||||
document.getElementById('smallFile-0').value = small;
|
||||
document.getElementById('bbcode-0').value = `[url=${original}][img]${medium}[/img][/url]`;
|
||||
|
||||
showModale();
|
||||
};
|
||||
|
||||
/**
|
||||
* Fonction permettant de récupérer le thème du système
|
||||
* @return {String}
|
||||
*/
|
||||
function getPreferredColorScheme() {
|
||||
if (window.matchMedia) {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
return 'light';
|
||||
}
|
||||
|
||||
const displayImageDetails = (itemId) => {
|
||||
const x = document.getElementById(`item-${itemId}`);
|
||||
const original = x.dataset.original;
|
||||
const medium = x.dataset.medium;
|
||||
const small = x.dataset.small;
|
||||
/**
|
||||
* Fonction permettant de changer le thème du site
|
||||
* @param {String} scheme
|
||||
*/
|
||||
function setColorScheme(scheme) {
|
||||
document.documentElement.setAttribute('data-theme', scheme);
|
||||
}
|
||||
|
||||
document.getElementById('previewImage').src = small;
|
||||
document.getElementById('originalFile-0').value = original;
|
||||
document.getElementById('mediumFile-0').value = medium;
|
||||
document.getElementById('smallFile-0').value = small;
|
||||
document.getElementById('bbcode-0').value = `[url=${original}][img]${medium}[/img][/url]`;
|
||||
/**
|
||||
* 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);
|
||||
|
||||
showModale();
|
||||
}
|
||||
el.classList.toggle('is-active');
|
||||
$target.classList.toggle('is-active');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (window.matchMedia) {
|
||||
/**
|
||||
* Event permettant de détecter les changements de thème du système
|
||||
*/
|
||||
const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
colorSchemeQuery.addEventListener('change', () => {
|
||||
const selectedColorScheme = localStorage.getItem('theme') || 'system';
|
||||
|
||||
if (selectedColorScheme === 'system') {
|
||||
const preferedColorScheme = getPreferredColorScheme();
|
||||
setColorScheme(preferedColorScheme);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Au chargement de la page on détecte le thème à charger
|
||||
*/
|
||||
setColorScheme(getPreferredColorScheme());
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue