تغيير حالة واحدة من الأيقونة

ميزة
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 للتأكد من أن البرنامج النصي يعمل فقط بمجرد وجود العنصر المستهدف فعليًا، ويقوم بقطع نفسه بعد القيام بعمله لتجنب الحمل الزائد غير الضروري. لا يزال يحاول إجراء فحص فوري في حال كان العنصر موجودًا بالفعل.

أنا غير قادر على جلب أيقونة SVG التي أريدها من نظام أيقونات Discourse، على الرغم من أنني سجلت مجموعة أيقونات SVG إدارية حيث يبدو أنها موجودة في Font Awesome ولكن ليس في Discourse.

إعجاب واحد (1)