document.addEventListener("DOMContentLoaded", function() {
// Vérifier si l'appareil est un desktop (largeur d'écran > 768px)
function isDesktop() {
return window.innerWidth > 768;
}
// Ne continuer que si on est sur desktop
if (!isDesktop()) {
console.log("Appareil mobile détecté, fonctionnalité de survol désactivée.");
return;
}
// Sélectionner les éléments nécessaires
const headerTitle = document.getElementById("header-post-title");
const logoDesktop = document.getElementById("logodesktop");
// Vérifier si les éléments existent
if (!headerTitle) {
console.log("Div avec l'ID \"header-post-title\" non trouvée.");
return;
}
// S'assurer que le titre est bien caché et centré au chargement
headerTitle.style.display = "none";
headerTitle.innerText = "";
// Ajouter des styles CSS pour le titre et les transitions
const style = document.createElement("style");
style.innerHTML = `
#header-post-title {
font-size: 18px;
color: white;
transition: opacity 0.3s ease;
opacity: 0;
text-align: center;
width: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#header-post-title.visible {
opacity: 1;
}
#logodesktop.hidden {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
@media (max-width: 768px) {
#header-post-title {
display: none !important;
}
}
`;
document.head.appendChild(style);
// Variables pour gérer le survol et éviter le clignotement
let currentlyHovered = null;
let isLogoHidden = false;
// Sélectionner tous les éléments de type project ou post
const projects = document.querySelectorAll(".project, .post");
// Pour chaque projet, ajouter un événement de survol
projects.forEach(project => {
project.addEventListener("mouseenter", function() {
// Stocker l'élément actuellement survolé
currentlyHovered = project;
// Vérifier si le projet contient un titre
const titleElement = project.querySelector(".entry-title, h2, h3, .project-title");
if (titleElement) {
// Mettre à jour le contenu du titre dans l'en-tête
headerTitle.innerText = titleElement.innerText;
headerTitle.classList.add("visible");
headerTitle.style.display = "block";
// Masquer le logo desktop (uniquement s'il n'est pas déjà caché)
if (logoDesktop && !isLogoHidden) {
logoDesktop.classList.add("hidden");
isLogoHidden = true;
}
}
});
project.addEventListener("mouseleave", function() {
// Si on quitte cet élément mais qu'on entre dans un autre, ne pas restaurer le logo
currentlyHovered = null;
setTimeout(() => {
// Si après ce délai, aucun élément n'est survolé, on restaure tout
if (currentlyHovered === null) {
// Cacher le titre
headerTitle.classList.remove("visible");
setTimeout(() => {
if (!headerTitle.classList.contains("visible")) {
headerTitle.style.display = "none";
headerTitle.innerText = "";
}
}, 300);
// Réafficher le logo desktop
if (logoDesktop && isLogoHidden) {
logoDesktop.classList.remove("hidden");
isLogoHidden = false;
}
}
}, 50); // Délai court pour vérifier si un autre élément est survolé
});
});
// Gérer les changements de taille d'écran
window.addEventListener("resize", function() {
if (!isDesktop()) {
// Sur mobile, s'assurer que tout est dans l'état par défaut
headerTitle.style.display = "none";
if (logoDesktop && isLogoHidden) {
logoDesktop.classList.remove("hidden");
isLogoHidden = false;
}
}
});
});