Cambiare un'istanza singola di icona

Funzionalità
15

Grazie per avermelo fatto notare, hai assolutamente ragione. Usare solo api.onPageChange può essere inaffidabile poiché si attiva al cambio di rotta, non dopo il rendering del DOM. Ciò significa che c’è il rischio di una race condition in cui il pulsante #create-topic potrebbe non esistere ancora quando lo script tenta di accedervi.

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

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

            if (button) {
                // Disconnette l'observer dopo aver trovato l'elemento
                observer.disconnect();

                // Nasconde temporaneamente il pulsante mentre sostituiamo l'icona
                button.style.display = "none";

                // Rimuove la vecchia icona se esiste
                const oldIcon = button.querySelector("svg");
                if (oldIcon) oldIcon.remove();

                // Crea e inserisce la nuova icona SVG di 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);

                // Mostra di nuovo il pulsante
                button.style.display = "block";
            }
        };

        // Osserva le modifiche al DOM e tenta di migliorare il pulsante quando viene aggiunto
        const observer = new MutationObserver(() => tryEnhanceButton());
        observer.observe(document.body, { childList: true, subtree: true });

        // Tenta immediatamente anche nel caso in cui sia già presente
        tryEnhanceButton();
    });

@Don Ho incluso MutationObserver per garantire che lo script venga eseguito solo una volta che l’elemento di destinazione esiste effettivamente, e si disconnette dopo aver svolto il suo compito per evitare overhead non necessari. Tenta comunque un controllo immediato nel caso in cui l’elemento esista già.

Non riesco a recuperare l’SVG che desidero dal sistema di icone di Discourse, anche se l’ho registrato come sottoinsieme di icone SVG per l’amministratore, poiché sembra essere in fontawesome ma non in discourse.

1 Mi Piace