mirror of
https://scm.univ-tours.fr/22107988t/rappaurio-sae501_502.git
synced 2025-11-04 09:25:22 +01:00
changed the whole structure
This commit is contained in:
16
app-rappaurio/public/js/bundle.js
Normal file
16
app-rappaurio/public/js/bundle.js
Normal file
File diff suppressed because one or more lines are too long
368
app-rappaurio/public/js/custom.js
Normal file
368
app-rappaurio/public/js/custom.js
Normal file
@@ -0,0 +1,368 @@
|
||||
|
||||
// === 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
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user