Modifier une seule instance d'icône

Fonctionnalité
15

Merci d’avoir signalé cela — vous avez tout à fait raison. L’utilisation de api.onPageChange seul peut être peu fiable car elle se déclenche lors du changement de route, et non après le rendu du DOM. Cela signifie qu’il y a un risque de condition de concurrence où le bouton #create-topic pourrait ne pas encore exister lorsque le script tente d’y accéder.

 api.onPageChange(() => {
        const targetSelector = "#create-topic";

        const tryEnhanceButton = () => {
            const button = document.querySelector(targetSelector);

            if (button) {
                // Déconnecter l'observateur après avoir trouvé l'élément
                observer.disconnect();

                // Cacher temporairement le bouton pendant que nous remplaçons l'icône
                button.style.display = "none";

                // Supprimer l'ancienne icône si elle existe
                const oldIcon = button.querySelector("svg");
                if (oldIcon) oldIcon.remove();

                // Créer et insérer la nouvelle icône SVG Font Awesome
                const newIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                newIcon.setAttribute("class", "fa d-icon d-icon-feather-pointed svg-icon svg-string");
                newIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
                newIcon.innerHTML = '<use href="#feather-pointed"></use>';

                button.insertBefore(newIcon, button.firstChild);

                // Réafficher le bouton
                button.style.display = "block";
            }
        };

        // Observer les changements dans le DOM et essayer d'améliorer le bouton lorsqu'il est ajouté
        const observer = new MutationObserver(() => tryEnhanceButton());
        observer.observe(document.body, { childList: true, subtree: true });

        // Essayer immédiatement également au cas où il serait déjà présent
        tryEnhanceButton();
    });

@Don J’ai inclus MutationObserver pour m’assurer que le script ne s’exécute qu’une fois que l’élément cible existe réellement. Il se déconnecte après avoir accompli sa tâche pour éviter une surcharge inutile. Il tente toujours une vérification immédiate au cas où l’élément existerait déjà.

Je ne parviens pas à récupérer le SVG que je souhaite du système d’icônes Discourse, bien que je l’aie enregistré dans l’ensemble d’icônes SVG d’administration, car il semble qu’il soit dans Font Awesome mais pas dans Discourse.

1 « J'aime »