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

Added css theme based on user system preferences

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

184
public/js/main.js
View File

@ -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());
}