Ce script ajoute deux fonctionnalités à l'interface de Koha :
Affichage dynamique de la 4 de couverture (résumé Electre) dans un bloc accordéon sur les pages detail.pl.
ème
Ajout de boutons "Partager" permettant d'afficher des liens vers Electre, Babelio ou Google à partir des blocs .liens_externes dans les pages search.pl et detail.pl.
detail.pl.span.results_summary.electre-resume.<li title="Zone : 330">, soit après "Zone : 215" si la 330 n'existe pas.search.pl ou detail.pl..liens_externes :
//4eme de couv
// Délai pour attendre le chargement dynamique éventuel des éléments
setTimeout(function () {
// Vérifier si l'URL contient 'detail.pl'
if (window.location.href.includes("detail.pl")) {
console.log("Page detail.pl détectée, script en cours d'exécution...");
// Sélectionner le bloc cible avec les commentaires
const resumeBlock = document.querySelector("span.results_summary.electre-resume");
if (resumeBlock) {
console.log("Bloc 'results_summary electre-resume' trouvé :", resumeBlock);
// Cloner le contenu du bloc pour manipulation
const clonedContent = resumeBlock.cloneNode(true);
// Supprimer la balise <span class="label"> si elle existe
const label = clonedContent.querySelector("span.label");
if (label) {
label.remove();
}
// Récupérer le contenu HTML sans la balise "label"
const resumeContent = clonedContent.innerHTML.trim();
// Vérifier si le contenu n'est pas vide
if (resumeContent) {
console.log("Contenu du bloc après traitement :", resumeContent);
// Trouver le `<li>` avec title="Zone : 330"
let targetLi = document.querySelector("li[title='Zone : 330']");
// Si "Zone : 330" n'existe pas, chercher "Zone : 215"
if (!targetLi) {
console.warn("Aucun élément <li> avec title='Zone : 330' trouvé. Recherche de Zone : 215...");
const zone215Li = document.querySelector("li[title='Zone : 215']");
if (zone215Li) {
console.log("Élément <li> avec title='Zone : 215' trouvé :", zone215Li);
// Créer un conteneur div pour l'accordéon
const wrapper = document.createElement("div");
zone215Li.insertAdjacentElement("afterend", wrapper);
// Définir ce conteneur comme cible
targetLi = wrapper;
} else {
console.error("Aucun élément <li> avec title='Zone : 215' trouvé. Arrêt du script.");
return;
}
}
// Créer le conteneur de l'accordéon
const accordionContainer = document.createElement("div");
accordionContainer.style.marginTop = "10px";
accordionContainer.innerHTML = `
<div style="border: 1px solid #ccc; border-radius: 5px; overflow: hidden;">
<div style="background-color: #f7f7f7; padding: 5px 10px; cursor: pointer; font-weight: bold;" class="accordion-header">
4ème de couverture
</div>
<div style="display: none; padding: 10px;" class="accordion-body">
${resumeContent}
</div>
</div>
`;
// Ajouter un gestionnaire d'événements pour afficher/masquer l'accordéon
const header = accordionContainer.querySelector(".accordion-header");
const body = accordionContainer.querySelector(".accordion-body");
header.addEventListener("click", function () {
const isVisible = body.style.display === "block";
body.style.display = isVisible ? "none" : "block";
});
// Insérer l'accordéon dans la cible (soit Zone : 330, soit après Zone : 215)
targetLi.appendChild(accordionContainer);
// Supprimer le bloc d'origine pour éviter les doublons
resumeBlock.remove();
console.log("Bloc 'results_summary electre-resume' inséré dans l'accordéon et supprimé de son emplacement d'origine.");
} else {
console.warn("Le contenu du bloc 'electre-resume' est vide après suppression du label.");
}
} else {
console.warn("Aucun bloc 'results_summary electre-resume' trouvé sur cette page.");
}
}
}, 1500); // Délai de 1 seconde
//Boutons recherche electre google babelio
if (window.location.pathname.includes("search.pl") || window.location.pathname.includes("detail.pl")) {
// Sélection de toutes les sections avec la classe .liens_externes
const liensExternesSections = document.querySelectorAll('.liens_externes');
liensExternesSections.forEach((liensExternes) => {
// Création du bouton "Partager"
const shareButton = document.createElement('button');
shareButton.className = 'share-button';
shareButton.style.cssText = `
background-color: white /* Vert */
color: white;
border: none;
padding: 5px;
cursor: pointer;
border-radius: 3px;
font-size: 14px;
z-index: 1001;
width: 40px;
height: 40px;
float:right;
`;
// Ajout de l'icône au bouton
const icon = document.createElement('img');
icon.src = '<https://cdn-icons-png.flaticon.com/512/15955/15955603.png>';
icon.alt = 'Partager';
icon.style.cssText = `
width: 20px;
height: 20px;
`;
shareButton.appendChild(icon);
// Création du conteneur pour les liens
const shareMenu = document.createElement('div');
shareMenu.className = 'share-menu';
shareMenu.style.cssText = `
display: none;
position: absolute;
top: 100%;
left: 0;
background: rgba(255, 255, 255, 0.95);
border: 1px solid #ccc;
padding: 10px;
z-index: 1000;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
`;
// Déplacement des liens dans le conteneur
const links = Array.from(liensExternes.querySelectorAll('li'));
links.forEach(link => {
shareMenu.appendChild(link);
});
// Ajout des éléments au DOM
liensExternes.appendChild(shareButton);
liensExternes.appendChild(shareMenu);
// Gestion de l'affichage du menu
shareButton.addEventListener('click', (event) => {
event.preventDefault(); // Empêche tout comportement par défaut
shareMenu.style.display = shareMenu.style.display === 'block' ? 'none' : 'block';
});
// Fermer le menu si on clique ailleurs
document.addEventListener('click', (event) => {
if (!liensExternes.contains(event.target)) {
shareMenu.style.display = 'none';
}
});
// Assurer que le conteneur liensExternes a position relative (nécessaire pour le positionnement absolu du menu)
liensExternes.style.position = 'relative';
});
}
setTimeout de 1500ms peut être ajusté selon la vitesse du serveur Koha.