mirror of
https://scm.univ-tours.fr/22107988t/rappaurio-sae501_502.git
synced 2025-05-27 21:43:13 +02:00
369 lines
14 KiB
JavaScript
369 lines
14 KiB
JavaScript
|
|
// === 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 <html> 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 = `<th>${key}</th> <td>${value}</td>`;
|
|
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 = `<th>${key}</th> <td>${value}</td>`;
|
|
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 " +
|
|
'<span class="underline">' + articleTitle1 + "</span> et " +
|
|
'<span class="underline">' + articleTitle2 + "</span> sont introuvables.";
|
|
}
|
|
else {
|
|
|
|
if (!response.articleInfo1) {
|
|
errorMessage += "L'article " + '<span class="underline">' + articleTitle1 + "</span> est introuvable.";
|
|
}
|
|
|
|
if (!response.articleInfo2) {
|
|
errorMessage += "L'article " + '<span class="underline">' + articleTitle2 + "</span> 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
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|