dbroqua/simple-images-upload
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added css theme based on user system preferences

Browse source
This commit is contained in:
Damien Broqua 2023-09-25 09:59:16 +02:00
parent db7c5ef4ed
commit e9052843a7
1 changed files with 120 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

182
public/js/main.js
View file

@ -1,97 +1,153 @@
/* eslint-disable no-unused-vars */
let timeout = null; 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 * Fonction permettant d'afficher un message dans un toastr
* @param {String} message * @param {String} message
* @param {Boolean} success
*/ */
function showToastr(message, success = false) { function showToastr(message, success = false) {
const x = document.getElementById("toastr"); const x = document.getElementById('toastr');
if (message) { if (message) {
x.getElementsByTagName("SPAN")[0].innerHTML = message; x.getElementsByTagName('SPAN')[0].innerHTML = message;
} }
if (timeout) { if (timeout) {
clearTimeout(timeout); clearTimeout(timeout);
x.classList.remove("show"); x.classList.remove('show');
} }
x.classList.remove("success"); x.classList.remove('success');
x.classList.remove("error"); x.classList.remove('error');
if (success) { if (success) {
x.classList.add("success"); x.classList.add('success');
} else { } else {
x.classList.add("error"); x.classList.add('error');
} }
x.classList.add("show"); x.classList.add('show');
timeout = setTimeout(() => { timeout = setTimeout(() => {
x.classList.remove("show"); x.classList.remove('show');
}, 3000); }, 3000);
} }
/** /**
* Fonction permettant de masquer le toastr * Fonction permettant de masquer le toastr
*/ */
function hideToastr() { function hideToastr() {
const x = document.getElementById("toastr"); const x = document.getElementById('toastr');
x.className = x.className.replace("show", ""); x.className = x.className.replace('show', '');
x.getElementsByTagName("SPAN")[0].innerHTML = ""; 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 copyToClipboard = (itemId, message) => {
const copyText = document.getElementById(itemId); const copyText = document.getElementById(itemId);
copyText.select(); copyText.select();
document.execCommand('copy'); document.execCommand('copy');
showToastr(message, true); showToastr(message, true);
}; };
/**
* Fonction permettant d'afficher une modale
*/
const showModale = () => { 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 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 displayImageDetails = (itemId) => {
const x = document.getElementById(`item-${itemId}`); const x = document.getElementById(`item-${itemId}`);
const original = x.dataset.original; const original = x.dataset.original;
const medium = x.dataset.medium; const medium = x.dataset.medium;
const small = x.dataset.small; const small = x.dataset.small;
document.getElementById('previewImage').src = small; document.getElementById('previewImage').src = small;
document.getElementById('originalFile-0').value = original; document.getElementById('originalFile-0').value = original;
document.getElementById('mediumFile-0').value = medium; document.getElementById('mediumFile-0').value = medium;
document.getElementById('smallFile-0').value = small; document.getElementById('smallFile-0').value = small;
document.getElementById('bbcode-0').value = `[url=${original}][img]${medium}[/img][/url]`; document.getElementById('bbcode-0').value = `[url=${original}][img]${medium}[/img][/url]`;
showModale(); 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';
}
/**
* Fonction permettant de changer le thème du site
* @param {String} scheme
*/
function setColorScheme(scheme) {
document.documentElement.setAttribute('data-theme', scheme);
}
/**
* 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');
});
});
}
});
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());
} }