Description du script

Ce script est destiné aux pages moremember.pl et circulation.pl de Koha. Il permet de copier facilement l’identifiant, le numéro de carte lecteur et, le cas échéant, le mot de passe en utilisant le presse-papiers. Des messages de confirmation apparaissent après chaque copie pour indiquer le succès de l’opération.

Explication détaillée de l’algorithme

1. Identification de l’élément d’identifiant :
   • Le script vérifie la présence de l’élément avec l’ID patron-username.
   • Lorsqu’un clic est détecté sur cet élément, le script extrait l’identifiant en supprimant le texte avant le mot-clé "Identifiant :".
   • Ensuite, l’identifiant est copié dans le presse-papiers et un message de confirmation s’affiche au centre de la page.
2. Extraction via le conteneur de numéro de carte :
   • Le script cible l’élément .col-sm-12 h1 pour récupérer le numéro de carte.
   • Si l’utilisateur clique sur un span avec du texte souligné, ce contenu est privilégié ; sinon, le script extrait tous les chiffres présents dans le conteneur.
   • Le numéro ainsi extrait est copié dans le presse-papiers avec affichage d’un message de confirmation.
3. Gestion de la copie pour le numéro de carte dans circulation.pl :
   • Le script cible le label ayant la classe circ_barcode pour traiter le numéro complet de la carte.
   • Il sépare le numéro en deux parties : la première partie (les 10 premiers chiffres) et la seconde partie (les 4 derniers chiffres).
   • Des écouteurs d’événements sont ajoutés sur chaque partie afin de copier soit le numéro complet, soit uniquement la seconde partie, en fonction de l’élément cliqué.
   • Un message de confirmation apparaît également après chaque copie.
4. Messages de confirmation :
   • Pour chaque action de copie, un message temporaire est affiché en position fixe au centre de la page pour informer l’utilisateur du succès de l’opération.

Inclusion du code

//Copie identifiants, numéro carte lecteur et mot de passe page adhérent
if (window.location.pathname.includes("moremember.pl") || window.location.pathname.includes("circulation.pl")) {

    // Fonctionnalité pour l'élément <li> avec l'ID "patron-username"
    const usernameElement = document.getElementById("patron-username");

    if (usernameElement) {
        usernameElement.addEventListener("click", function() {
            // Récupérer le texte de l'identifiant (après le span)
            const identifier = usernameElement.textContent.replace(/.*Identifiant\s*:\s*/, "").trim();

            // Copier l'identifiant dans le presse-papiers
            navigator.clipboard.writeText(identifier).then(() => {
                // Créer le message de confirmation
                const message = document.createElement("div");
                message.textContent = `\"${identifier}\" a été copié dans le presse-papiers.`;
                message.style.position = "fixed";
                message.style.top = "50%";
                message.style.left = "50%";
                message.style.transform = "translate(-50%, -50%)";
                message.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
                message.style.color = "white";
                message.style.padding = "10px 20px";
                message.style.borderRadius = "5px";
                message.style.fontSize = "16px";
                message.style.textAlign = "center";
                message.style.zIndex = "1000";

                // Ajouter le message au DOM
                document.body.appendChild(message);

                // Supprimer le message après 2 secondes
                setTimeout(() => {
                    message.remove();
                }, 2000);
            }).catch(err => {
                console.error("Erreur lors de la copie dans le presse-papiers :", err);
            });
        });
    }

    // Fonctionnalité pour les éléments dans la div contenant les numéros
    const container = document.querySelector(".col-sm-12 h1");

    if (container) {
        container.addEventListener("click", function(event) {
            let identifier = "";

            // Vérifier si on clique sur le span
            if (event.target.tagName === "SPAN" && event.target.style.textDecoration.includes("underline")) {
                identifier = event.target.textContent.trim();
            } else {
                // Récupérer tout le contenu texte de <h1>
                identifier = container.textContent.replace(/[^0-9]/g, "").trim();
            }

            // Copier l'identifiant dans le presse-papiers
            navigator.clipboard.writeText(identifier).then(() => {
                // Créer le message de confirmation
                const message = document.createElement("div");
                message.textContent = `\"${identifier}\" a été copié dans le presse-papiers.`;
                message.style.position = "fixed";
                message.style.top = "50%";
                message.style.left = "50%";
                message.style.transform = "translate(-50%, -50%)";
                message.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
                message.style.color = "white";
                message.style.padding = "10px 20px";
                message.style.borderRadius = "5px";
                message.style.fontSize = "16px";
                message.style.textAlign = "center";
                message.style.zIndex = "1000";

                // Ajouter le message au DOM
                document.body.appendChild(message);

                // Supprimer le message après 2 secondes
                setTimeout(() => {
                    message.remove();
                }, 2000);
            }).catch(err => {
                console.error("Erreur lors de la copie dans le presse-papiers :", err);
            });
        });
    }

    // Fonctionnalité pour l'élément <span> contenant les numéros dans circulation.pl
    const barcodeLabel = document.querySelector("label.circ_barcode");

    if (barcodeLabel) {
        // Repérer les deux parties du numéro de carte : le premier numéro et les 4 derniers chiffres
        const fullNumber = barcodeLabel.textContent.match(/(\d{10})(\d{4})/);

        // Si les deux parties sont trouvées
        if (fullNumber) {
            const firstPart = fullNumber[1];  // "9040500105"
            const secondPart = fullNumber[2]; // "7043"
            const fullBarcode = firstPart + secondPart;  // "90405001057043"

            // Ajout des événements de clic sur les deux parties du numéro
            // Cliquer sur le premier numéro (ex: "9040500105")
            const firstPartElement = barcodeLabel.querySelector("span");
            if (firstPartElement) {
                firstPartElement.addEventListener("click", function() {
                    navigator.clipboard.writeText(fullBarcode).then(() => {
                        const message = document.createElement("div");
                        message.textContent = `\"${fullBarcode}\" a été copié dans le presse-papiers.`;
                        message.style.position = "fixed";
                        message.style.top = "50%";
                        message.style.left = "50%";
                        message.style.transform = "translate(-50%, -50%)";
                        message.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
                        message.style.color = "white";
                        message.style.padding = "10px 20px";
                        message.style.borderRadius = "5px";
                        message.style.fontSize = "16px";
                        message.style.textAlign = "center";
                        message.style.zIndex = "1000";

                        document.body.appendChild(message);
                        setTimeout(() => {
                            message.remove();
                        }, 2000);
                    }).catch(err => {
                        console.error("Erreur lors de la copie dans le presse-papiers :", err);
                    });
                });
            }

            // Cliquer sur la partie des 4 derniers chiffres (ex: "7043")
            const secondPartElement = barcodeLabel.querySelector("span[style*='text-decoration: underline dotted; color: green;']");
            if (secondPartElement) {
                secondPartElement.addEventListener("click", function() {
                    navigator.clipboard.writeText(secondPart).then(() => {
                        const message = document.createElement("div");
                        message.textContent = `\"${secondPart}\" a été copié dans le presse-papiers.`;
                        message.style.position = "fixed";
                        message.style.top = "50%";
                        message.style.left = "50%";
                        message.style.transform = "translate(-50%, -50%)";
                        message.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
                        message.style.color = "white";
                        message.style.padding = "10px 20px";
                        message.style.borderRadius = "5px";
                        message.style.fontSize = "16px";
                        message.style.textAlign = "center";
                        message.style.zIndex = "1000";

                        document.body.appendChild(message);
                        setTimeout(() => {
                            message.remove();
                        }, 2000);
                    }).catch(err => {
                        console.error("Erreur lors de la copie dans le presse-papiers :", err);
                    });
                });
            }
        }
    }

}

Éléments à modifier

• Les sélecteurs utilisés (patron-username, .col-sm-12 h1 et label.circ_barcode) si la structure HTML change.
• Les expressions régulières et la logique d’extraction du texte pour s’adapter aux éventuelles modifications de la présentation.
• La durée d’affichage et le style des messages de confirmation.

Points clés pour les mises à jour de Koha

• Vérifier la compatibilité du script après toute mise à jour de Koha, notamment la structure des pages moremember.pl et circulation.pl.
• Adapter les sélecteurs et la logique de copie en fonction des évolutions de l'interface.
• Tester le comportement du presse-papiers et la visibilité des messages de confirmation sur différents navigateurs.

Dépendances

• Le script repose sur l’API navigator.clipboard (disponible sur les navigateurs modernes).
• Aucune autre dépendance externe n’est requise.