130 lines
4.5 KiB
JavaScript
130 lines
4.5 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
// ===============================================
|
|
// 0. GESTION DU PRÉCHARGEUR (SPLASH SCREEN)
|
|
// ===============================================
|
|
|
|
const preloader = document.getElementById('preloader');
|
|
// const introSound = document.getElementById('soundToggle'); <-- Supprimé, car cette variable est trompeuse ici
|
|
|
|
if (preloader) {
|
|
|
|
// 1. Jouer le son de l'animation d'introduction
|
|
// LIGNE(S) RETIRÉE(S) :
|
|
/*
|
|
if (introSound) {
|
|
// Tenter de jouer le son immédiatement (les navigateurs peuvent le bloquer)
|
|
introSound.play().catch(e => console.log("Intro sound blocked by browser:", e));
|
|
}
|
|
*/
|
|
// Le son ne se jouera plus ici, mais seulement au clic sur le bouton de thème.
|
|
|
|
// 2. Définir le délai de 2000 ms (2 secondes) avant la disparition
|
|
setTimeout(() => {
|
|
// Retirer la classe active pour déclencher la transition CSS de disparition (opacité: 1 -> 0)
|
|
preloader.classList.remove('preloader-active');
|
|
|
|
// 3. Suppression totale du DOM après la transition de 0.5 seconde
|
|
setTimeout(() => {
|
|
preloader.style.display = 'none';
|
|
}, 500);
|
|
|
|
}, 2000); // Durée de l'animation principale avant le fade out
|
|
|
|
}
|
|
|
|
// ===============================================
|
|
// 1. GESTION DU MODE SOMBRE (DARK MODE)
|
|
// ===============================================
|
|
|
|
const themeToggle = document.getElementById('themeToggle');
|
|
const body = document.body;
|
|
const localStorageKey = 'themePreference';
|
|
|
|
/**
|
|
* Applique la classe .dark-mode au corps et met à jour le texte du bouton.
|
|
* @param {boolean} isDarkMode - Vrai si le mode sombre doit être activé.
|
|
*/
|
|
function applyTheme(isDarkMode) {
|
|
if (isDarkMode) {
|
|
body.classList.add('dark-mode');
|
|
themeToggle.textContent = 'Light mode';
|
|
themeToggle.classList.remove('btn-outline-light');
|
|
themeToggle.classList.add('btn-outline-warning');
|
|
} else {
|
|
body.classList.remove('dark-mode');
|
|
themeToggle.textContent = 'Dark mode';
|
|
themeToggle.classList.remove('btn-outline-warning');
|
|
themeToggle.classList.add('btn-outline-light');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Charge le thème préféré depuis le localStorage ou détecte la préférence système.
|
|
*/
|
|
function loadTheme() {
|
|
const storedTheme = localStorage.getItem(localStorageKey);
|
|
let isDarkMode = false;
|
|
|
|
if (storedTheme !== null) {
|
|
isDarkMode = storedTheme === 'dark';
|
|
} else {
|
|
isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
}
|
|
|
|
applyTheme(isDarkMode);
|
|
}
|
|
|
|
// Charger le thème au chargement initial de la page
|
|
if (themeToggle) {
|
|
loadTheme();
|
|
}
|
|
|
|
|
|
// Événement au clic du bouton
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener('click', () => {
|
|
const isCurrentlyDark = body.classList.contains('dark-mode');
|
|
const newTheme = isCurrentlyDark ? 'light' : 'dark';
|
|
|
|
// 1. Basculer le thème
|
|
applyTheme(!isCurrentlyDark);
|
|
|
|
// 2. Stocker le nouveau choix
|
|
localStorage.setItem(localStorageKey, newTheme);
|
|
|
|
// 3. (Optionnel) Jouer le son si l'élément audio existe
|
|
const soundToggle = document.getElementById('soundToggle');
|
|
if (soundToggle) {
|
|
// C'est l'endroit CORRECT pour jouer le son (uniquement au clic)
|
|
soundToggle.currentTime = 0;
|
|
soundToggle.play().catch(e => console.log("Audio play failed:", e));
|
|
}
|
|
});
|
|
}
|
|
|
|
// ===============================================
|
|
// 2. VALIDATION DES FORMULAIRES BOOTSTRAP
|
|
// ===============================================
|
|
|
|
// Fonction d'auto-exécution pour la validation des formulaires
|
|
(function () {
|
|
'use strict'
|
|
var forms = document.querySelectorAll('.needs-validation')
|
|
|
|
Array.prototype.slice.call(forms)
|
|
.forEach(function (form) {
|
|
form.addEventListener('submit', function (event) {
|
|
|
|
if (!form.checkValidity()) {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
}
|
|
|
|
form.classList.add('was-validated')
|
|
|
|
}, false)
|
|
})
|
|
})()
|
|
|
|
}); |