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

Compare commits

base: dbroqua:e9052843a7b37e90811a3e549aba68710696f6c7
Branches Tags
dbroqua:master
..
compare: dbroqua:1dcf1da97862c363a32e25fd4093a49f3e49971e
Branches Tags
dbroqua:master

No commits in common. "e9052843a7b37e90811a3e549aba68710696f6c7" and "1dcf1da97862c363a32e25fd4093a49f3e49971e" have entirely different histories.
e9052843a7 ... 1dcf1da978

2 changed files with 73 additions and 130 deletions
Show stats Expand all files Collapse all files

19
.eslintrc.js
View file

@ -1,27 +1,26 @@
module.exports = {
env: {
browser: true,
es2021: true,
es2021: true
},
extends: 'google',
overrides: [
{
env: {
node: true,
node: true
},
files: [
'.eslintrc.{js,cjs}',
'.eslintrc.{js,cjs}'
],
parserOptions: {
sourceType: 'script',
},
},
sourceType: 'script'
}
}
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
sourceType: 'module'
},
rules: {
'max-len': ['error', {'code': 120}],
},
};
}
}

182
public/js/main.js
View file

@ -1,153 +1,97 @@
/* 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;
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]`;
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';
}
/**
* 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());
showModale();
}