Изменить один экземпляр иконки

Внести вклад Функция
15

Спасибо, что обратили на это внимание — вы абсолютно правы. Использование только api.onPageChange может быть ненадёжным, так как оно срабатывает при смене маршрута, а не после рендеринга DOM. Это создаёт риск состояния гонки, когда кнопка #create-topic может ещё не существовать в момент, когда скрипт пытается получить к ней доступ.

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

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

            if (button) {
                // Отключаем наблюдатель после нахождения элемента
                observer.disconnect();

                // Временно скрываем кнопку, пока мы заменяем иконку
                button.style.display = "none";

                // Удаляем старую иконку, если она есть
                const oldIcon = button.querySelector("svg");
                if (oldIcon) oldIcon.remove();

                // Создаём и вставляем новую 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);

                // Снова показываем кнопку
                button.style.display = "block";
            }
        };

        // Наблюдаем за изменениями в DOM и пытаемся улучшить кнопку, когда она появится
        const observer = new MutationObserver(() => tryEnhanceButton());
        observer.observe(document.body, { childList: true, subtree: true });

        // Также пробуем сразу, на случай если элемент уже существует
        tryEnhanceButton();
    });

@Don Я добавил MutationObserver, чтобы гарантировать, что скрипт выполнится только после того, как целевой элемент действительно появится в DOM. После выполнения своей задачи наблюдатель отключается, чтобы избежать лишних накладных расходов. Также сохраняется попытка немедленной проверки на случай, если элемент уже существует.

Мне не удалось получить нужную SVG-иконку из системы иконок Discourse, хотя я зарегистрировал её в подмножестве административных SVG-иконок, поскольку, похоже, она есть в Font Awesome, но отсутствует в Discourse.

1 лайк