126 lines
4.6 KiB
JavaScript
Executable File
126 lines
4.6 KiB
JavaScript
Executable File
// Ajouter un style pour la mise en surbrillance
|
|
const style = document.createElement("style");
|
|
style.innerHTML = `
|
|
.highlight { background-color: yellow; font-weight: bold; }
|
|
.highlight-container { padding: 2px; }
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// -----------------------------------------------------
|
|
// Zone de recherche
|
|
// -----------------------------------------------------
|
|
function highlightSearch(event) {
|
|
event.preventDefault(); // Empêche l'envoi du formulaire ou le rechargement de la page
|
|
|
|
const searchTerm = document.getElementById("searchInput").value.trim().toLowerCase();
|
|
if (!searchTerm) {
|
|
alert("Veuillez entrer un terme à rechercher.");
|
|
return;
|
|
}
|
|
|
|
// Réinitialiser les anciens surlignages
|
|
// document.querySelectorAll(".highlight").forEach(span => {
|
|
// const parent = span.parentNode;
|
|
// parent.replaceChild(document.createTextNode(span.textContent), span);
|
|
// });
|
|
|
|
// Supprimer les conteneurs autour des textarea
|
|
// document.querySelectorAll(".highlight-container").forEach(container => {
|
|
// const textarea = container.nextElementSibling;
|
|
// if (textarea && textarea.tagName === "TEXTAREA") {
|
|
// textarea.style.display = ""; // Réafficher le textarea
|
|
// container.remove(); // Supprimer le span contenant le texte mis en surbrillance
|
|
// }
|
|
// });
|
|
|
|
// Réinitialiser le style des champs input
|
|
// document.querySelectorAll("input.inputWebmaster").forEach(input => {
|
|
// input.style.backgroundColor = "";
|
|
// });
|
|
|
|
let firstMatch = null;
|
|
let matchCount = 0;
|
|
const inputs = document.querySelectorAll("input.inputWebmaster, textarea.textAreaWbm");
|
|
inputs.forEach(input => {
|
|
const value = input.value.toLowerCase();
|
|
const originalValue = input.value;
|
|
|
|
// Vérifier si l'input est DANS un <div> ayant un id qui commence par "zoneD" -> exclure les descriptions
|
|
if (input.closest("div[id^='zoneD']")) { return; } // On ignore cet input
|
|
|
|
// Exclure les checkboxes
|
|
if (input.type === "checkbox") { return; }
|
|
|
|
if (value.includes(searchTerm)) {
|
|
matchCount++;
|
|
|
|
// Créer un élément `span` pour la mise en surbrillance
|
|
const regex = new RegExp(`(${searchTerm})`, "gi");
|
|
const highlightedValue = originalValue.replace(regex, '<span style="white-space: pre-line;" class="highlight">$1</span>');
|
|
|
|
// Remplacer le texte de l'input (pour textarea, on doit utiliser innerHTML)
|
|
if (input.tagName === "TEXTAREA") {
|
|
const parent = input.parentNode;
|
|
const newSpan = document.createElement("span");
|
|
newSpan.innerHTML = highlightedValue;
|
|
newSpan.classList.add("highlight-container");
|
|
parent.insertBefore(newSpan, input);
|
|
input.style.display = "none"; // Masquer l'input pour afficher la mise en surbrillance
|
|
} else {
|
|
input.value = originalValue.replace(regex, "$1"); // Pas possible de mettre du HTML dans un input
|
|
input.style.backgroundColor = "yellow";
|
|
console.log('2');
|
|
}
|
|
|
|
// Garder une référence au premier élément trouvé
|
|
if (!firstMatch) { firstMatch = input; }
|
|
}
|
|
});
|
|
|
|
if (matchCount === 0) {
|
|
alert("Aucun terme correspondant trouvé.");
|
|
} else if (firstMatch) {
|
|
// document.getElementById("searchInput").innerHTML=matchCount+' trouvés';
|
|
if (firstMatch) {
|
|
firstMatch.style.display = "block"; // Assure que l'élément est visible
|
|
|
|
setTimeout(() => {
|
|
if (typeof firstMatch.scrollIntoViewIfNeeded === "function") { firstMatch.scrollIntoViewIfNeeded(true); }
|
|
else { firstMatch.scrollIntoView({ behavior: "smooth", block: "center" }); }
|
|
}, 100); // Donne un léger délai pour s'assurer que l'élément est bien affiché
|
|
}
|
|
}
|
|
}
|
|
|
|
// // Gestion de l'appui sur "Entrée"
|
|
// document.getElementById("searchInput").addEventListener("keypress", function(event) {
|
|
// if (event.key === "Enter") {
|
|
// //alert('ici');
|
|
// highlightSearch();
|
|
// }
|
|
// });
|
|
|
|
|
|
|
|
// revenir a la normal sur clic
|
|
document.addEventListener("click", function (event) {
|
|
|
|
if (event.target.classList.contains("highlight-container")) {
|
|
console.log('1');
|
|
const span = event.target;
|
|
const textarea = span.nextElementSibling;
|
|
|
|
if (textarea && textarea.tagName === "TEXTAREA") {
|
|
textarea.style.display = ""; // Réafficher le textarea
|
|
span.remove(); // Supprimer le surlignage
|
|
textarea.focus(); // Donner le focus pour édition
|
|
}
|
|
}
|
|
});
|
|
|
|
// Ajouter un gestionnaire d'événements pour les inputs surlignés
|
|
document.addEventListener("click", function (event) {
|
|
if (event.target.tagName === "INPUT" && event.target.classList.contains("inputWebmaster")) {
|
|
event.target.style.backgroundColor = ""; // Réinitialiser le fond
|
|
}
|
|
}); |