// === SCROLL MENU ===
const pageLink = document.querySelectorAll('.menu-scroll');
pageLink.forEach((elem) => {
elem.addEventListener('click', (e) => {
e.preventDefault();
document.querySelector(elem.getAttribute('href')).scrollIntoView({
behavior: 'smooth',
offsetTop: 1 - 60,
});
});
});
// section menu active
function onScroll(event) {
const sections = document.querySelectorAll('.menu-scroll');
const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
for (let i = 0; i < sections.length; i++) {
const currLink = sections[i];
const val = currLink.getAttribute('href');
const refElement = document.querySelector(val);
const scrollTopMinus = scrollPos + 73;
if (refElement.offsetTop <= scrollTopMinus && refElement.offsetTop + refElement.offsetHeight > scrollTopMinus) {
document.querySelector('.menu-scroll').classList.remove('active');
currLink.classList.add('active');
} else {
currLink.classList.remove('active');
}
}
}
window.document.addEventListener('scroll', onScroll);
// === FOOTER DYNAMIC ===
// Sélectionnez le footer par son ID
const footer = document.getElementById('leFooter');
// Fonction pour positionner le footer en bas de la page
function positionFooter() {
const windowHeight = window.innerHeight;
const bodyHeight = document.body.clientHeight;
const footerHeight = footer.clientHeight;
if (bodyHeight < windowHeight) {
footer.style.position = 'absolute';
footer.style.bottom = '0';
} else {
footer.style.position = 'static';
}
}
// Appelez la fonction lors du chargement de la page et lorsque la fenêtre est redimensionnée
window.addEventListener('load', positionFooter);
window.addEventListener('resize', positionFooter);
// === MODE SOMBRE +> LOCAL STORAGE ===
// Fonction pour lire la valeur du thème depuis localStorage
function getThemeLocalStorage() {
return localStorage.getItem('theme');
}
// Fonction pour définir le thème dans localStorage
function setThemeLocalStorage(theme) {
localStorage.setItem('theme', theme);
}
// Fonction pour mettre à jour la classe sur le en fonction du thème
function updateThemeClass() {
const darkTogglerCheckbox = document.querySelector('#darkToggler');
const html = document.querySelector('html');
const theme = getThemeLocalStorage();
// Appliquer la classe en fonction de la valeur de localStorage
if (theme === 'dark') {
darkTogglerCheckbox.checked = true;
html.classList.add('dark');
} else {
darkTogglerCheckbox.checked = false;
html.classList.remove('dark');
}
}
// Appeler la fonction d'initialisation de la gestion du thème
updateThemeClass();
// Gérer le changement de thème lorsque l'utilisateur clique sur la case à cocher
const darkTogglerCheckbox = document.querySelector('#darkToggler');
darkTogglerCheckbox.addEventListener('click', function () {
if (darkTogglerCheckbox.checked) {
setThemeLocalStorage('dark');
} else {
setThemeLocalStorage('light');
}
});
// === ENVOIE FORMULAIRE AVEC AJAX ===
// Attendre que le document soit prêt
$(document).ready(function () {
// Sélectionnez le formulaire de COMPARAISON par son ID
$('#formulaire-comp').submit(function (e) {
// Fait scroll une fois le formulaire envoyé
$(document).ready(function () {
// Sélectionnez le lien par son ID
$('html, body').animate({
scrollTop: $('#resultat').offset().top
}, 1000); // 1000 millisecondes (1 seconde) pour l'animation
});
// Empêchez la soumission normale du formulaire
e.preventDefault();
// Affiche le chargement
$('#loading').removeClass('hidden');
$('#articleIntrouvable').addClass('hidden');
$('#articleContainer1').addClass('hidden');
$('#articleContainer2').addClass('hidden');
// Reste du code pour gérer la soumission du formulaire
//console.log('Formulaire soumis !');
// Récupérez les valeurs des champs du formulaire
const articleTitle1 = $('#articleTitle1').val();
const articleTitle2 = $('#articleTitle2').val();
// Créez un objet JavaScript avec les données à envoyer au serveur
const formData = {
articleTitle1: articleTitle1,
articleTitle2: articleTitle2
};
// Utilisez AJAX pour envoyer les données au serveur
$.ajax({
type: 'POST',
url: '/search',
data: formData,
dataType: 'json',
success: function (response) {
console.log(response);
$('#loading').addClass('hidden');
$('#articleIntrouvable').removeClass('hidden');
// Mettez à jour la section HTML avec les données reçues ici
// Vérifiez si response.articleInfo1 existe et contient les informations nécessaires
if (response.articleInfo1) {
$('#articleInfo1Title').html(response.articleInfo1.title);
// Article 1
$('#articleInfo1Title').html(response.articleInfo1.title);
$('#articleInfo1url').attr('href', response.articleInfo1.url);
$('#articleInfo1extract').html(response.articleInfo1.extract);
$('#articleInfo1lastEdit').html(response.articleInfo1.lastEdit);
$('#articleInfo1numRevisions').html(response.articleInfo1.numRevisions);
$('#articleInfo1pageSize').html(response.articleInfo1.pageSize);
$('#articleInfo1firstRevisionUser').html(response.articleInfo1.firstRevisionUser);
$('#articleInfo1latestRevisionId').html(response.articleInfo1.latestRevisionId);
$('#articleInfo1pageId').html(response.articleInfo1.pageId);
$('#articleInfo1latestVersion').html(response.articleInfo1.latestVersion);
$('#articleInfo1wordCount').html(response.articleInfo1.wordCount);
$('#articleInfo1charCount').html(response.articleInfo1.charCount);
$('#articleInfo1lastContributor').html(response.articleInfo1.lastContributor);
$('#articleInfo1image').attr('href', response.articleInfo1.image);
$('#articleInfo1image img').attr('src', response.articleInfo1.image);
// Récupérez la valeur de l'image
const articleInfo1ImageValue = response.articleInfo1.image;
// Récupérez l'élément image par son ID
const articleInfo1Image = document.getElementById("articleInfo1image");
if (articleInfo1ImageValue === "Non disponible") {
// Si la valeur est "Non disponible", masquez l'élément
articleInfo1Image.style.display = "none";
} else {
// Sinon, affichez l'élément
articleInfo1Image.style.display = "block"; // Vous pouvez utiliser "inline" si nécessaire
// Assurez-vous de définir la source de l'image ici en fonction de votre logique
articleInfo1Image.src = articleInfo1ImageValue;
}
const infoboxContainer1 = document.getElementById("infoboxcontainer1");
// Supprimer le contenu précédent de l'infobox
while (infoboxContainer1.firstChild) {
infoboxContainer1.removeChild(infoboxContainer1.firstChild);
}
// Ajouter les nouvelles informations pour articleInfo1
const infoboxData1 = response.articleInfo1.infobox;
Object.entries(infoboxData1).forEach(([key, value]) => {
const ligne = document.createElement("tr");
ligne.innerHTML = `| ${key} | ${value} | `;
infoboxContainer1.appendChild(ligne);
});
} else {
// Traitez le cas où response.articleInfo1 n'existe pas
}
// Vérifiez si response.articleInfo2 existe et contient les informations nécessaires
if (response.articleInfo2) {
$('#articleInfo2Title').html(response.articleInfo2.title);
// Article 2
$('#articleInfo2Title').html(response.articleInfo2.title);
$('#articleInfo2url').attr('href', response.articleInfo2.url);
$('#articleInfo2extract').html(response.articleInfo2.extract);
$('#articleInfo2lastEdit').html(response.articleInfo2.lastEdit);
$('#articleInfo2numRevisions').html(response.articleInfo2.numRevisions);
$('#articleInfo2pageSize').html(response.articleInfo2.pageSize);
$('#articleInfo2firstRevisionUser').html(response.articleInfo2.firstRevisionUser);
$('#articleInfo2latestRevisionId').html(response.articleInfo2.latestRevisionId);
$('#articleInfo2pageId').html(response.articleInfo2.pageId);
$('#articleInfo2latestVersion').html(response.articleInfo2.latestVersion);
$('#articleInfo2wordCount').html(response.articleInfo2.wordCount);
$('#articleInfo2charCount').html(response.articleInfo2.charCount);
$('#articleInfo2lastContributor').html(response.articleInfo2.lastContributor);
$('#articleInfo2image').attr('href', response.articleInfo2.image);
$('#articleInfo2image img').attr('src', response.articleInfo2.image);
// Récupérez la valeur de l'image
const articleInfo2ImageValue = response.articleInfo2.image;
// Récupérez l'élément image par son ID
const articleInfo2Image = document.getElementById("articleInfo2image");
if (articleInfo2ImageValue === "Non disponible") {
// Si la valeur est "Non disponible", masquez l'élément
articleInfo2Image.style.display = "none";
} else {
// Sinon, affichez l'élément
articleInfo2Image.style.display = "block"; // Vous pouvez utiliser "inline" si nécessaire
// Assurez-vous de définir la source de l'image ici en fonction de votre logique
articleInfo2Image.src = articleInfo2ImageValue;
}
const infoboxContainer2 = document.getElementById("infoboxcontainer2");
// Supprimer le contenu précédent de l'infobox
while (infoboxContainer2.firstChild) {
infoboxContainer2.removeChild(infoboxContainer2.firstChild);
}
// Ajouter les nouvelles informations pour articleInfo2
const infoboxData2 = response.articleInfo2.infobox;
Object.entries(infoboxData2).forEach(([key, value]) => {
const ligne = document.createElement("tr");
ligne.innerHTML = `${key} | ${value} | `;
infoboxContainer2.appendChild(ligne);
});
} else {
// Traitez le cas où response.articleInfo2 n'existe pas
}
// Vérifiez si toutes les informations nécessaires sont disponibles
const allInfoAvailable = checkIfAllInfoAvailable(response);
if (allInfoAvailable) {
$('#articleContainer1').removeClass('hidden');
$('#articleContainer2').removeClass('hidden');
$('#articleIntrouvable').addClass('hidden');
$(document).ready(function () {
// Sélectionnez le lien par son ID
$('html, body').animate({
scrollTop: $('#resultat').offset().top
}, 1000); // 1000 millisecondes (1 seconde) pour l'animation
});
} else {
// Traitez le cas où certaines informations ne sont pas disponibles
const articleIntrouvable = document.getElementById("articleIntrouvable");
let errorMessage = "";
if (!response.articleInfo1 && !response.articleInfo2) {
errorMessage += "Les articles " +
'' + articleTitle1 + " et " +
'' + articleTitle2 + " sont introuvables.";
}
else {
if (!response.articleInfo1) {
errorMessage += "L'article " + '' + articleTitle1 + " est introuvable.";
}
if (!response.articleInfo2) {
errorMessage += "L'article " + '' + articleTitle2 + " est introuvable.";
}
}
articleIntrouvable.innerHTML = errorMessage;
}
},
error: function (error) {
console.error('Erreur lors de la recherche d\'informations sur les articles :', error);
// Ajoutez une console.log pour vérifier si cette partie du code est exécutée
console.log('Erreur AJAX');
// Sélectionnez le div d'erreur par son ID
const articleIntrouvable = document.getElementById("articleIntrouvable");
// Mettez à jour le contenu du div avec un message d'erreur
articleIntrouvable.textContent = "Aucun article n'a été trouvé.";
// Assurez-vous de masquer les conteneurs d'articles
$('#articleContainer1').addClass('hidden');
$('#articleContainer2').addClass('hidden');
}
});
});
});
function checkIfAllInfoAvailable(response) {
// Vérifiez si response.articleInfo1 contient toutes les informations nécessaires
const articleInfo1 = response.articleInfo1;
if (!articleInfo1) {
return false; // Si articleInfo1 est absent, retournez false
}
// Ajoutez ici des vérifications spécifiques pour les propriétés nécessaires dans articleInfo1
if (!articleInfo1.title || !articleInfo1.url || !articleInfo1.extract || !articleInfo1.lastEdit) {
return false; // Si l'une des propriétés nécessaires est absente, retournez false
}
// Vérifiez si response.articleInfo2 contient toutes les informations nécessaires
const articleInfo2 = response.articleInfo2;
if (!articleInfo2) {
return false; // Si articleInfo2 est absent, retournez false
}
// Ajoutez ici des vérifications spécifiques pour les propriétés nécessaires dans articleInfo2
if (!articleInfo2.title || !articleInfo2.url || !articleInfo2.extract || !articleInfo2.lastEdit) {
return false; // Si l'une des propriétés nécessaires est absente, retournez false
}
// Si toutes les vérifications sont passées, cela signifie que toutes les informations nécessaires sont disponibles
return true;
}
// === SMOOTH SCROLL ~(^^)~
// Fait scroll jusqu'au formulaire de comparaison
$(document).ready(function () {
// Sélectionnez le lien par son ID
$('#letzgooo').click(function (e) {
e.preventDefault(); // Empêchez le comportement de clic par défaut
$('html, body').animate({
scrollTop: $('#comparaison').offset().top
}, 1000); // 1000 millisecondes (1 seconde) pour l'animation
});
});