كيفية نقل النص البرمجي الخاص بي بشكل صحيح إلى علامة التبويب JS الجديدة في المكون الخاص بي؟

[إشعار المسؤول] يحتوي السمة ‘\_Base’ على تعليمات برمجية تحتاج إلى تحديث. (المعرّف: discourse.script-tag-discourse-plugin) (اعرف المزيد)

بالنسبة لأحد منتدياتي، تخلصت من هذه الرسالة ببساطة عن طريق نقل نص JavaScript الخاص بي إلى علامة تبويب تخصيص JavaScript الجديدة.

في منتديي الآخر، لم ينجح الأمر بهذه السهولة.

إنه تجاوز قديم يعرض حقل علامات التبويب الخاص بالملحن فقط في الفئات التي تقبل علامات التبويب:

<script type="text/discourse-plugin" version="1.4.0">    
    // show tag chooser in the composer only when necessary
    const discourseComputed = require("discourse-common/utils/decorators").default;
    const EmberObject = require("@ember/object").default;
    function toggleTagChooser(display = "hide") {
        if (display == "show") {
            document.getElementsByClassName("mini-tag-chooser")[0].style.display = "block";
            document.getElementsByClassName("reply-area")[0].classList.add("with-tags");
            return;
        }
        // Verify the existence of the tag choser
        let tagChoser = document.getElementsByClassName("mini-tag-chooser");
        if(tagChoser.length > 0) {
            tagChoser[0].style.display = "none";
            document.getElementsByClassName("reply-area")[0].classList.remove("with-tags");
        }
        return;
    }
    api.modifyClass('controller:composer', {
        pluginId: "toggleTagChoser",
        @discourseComputed("model.category", "model.tags", "lastValidatedAt")
        tagValidation(category, tags, lastValidatedAt) {
            // custom code to toggle the tag choser
            toggleTagChooser("hide");
            if(category != null) {
                if (
                    category.allow_global_tags == true ||
                    category.allowed_tag_groups.length > 0 ||
                    category.allowed_tags.length > 0
                ) {
                    toggleTagChooser("show");
                }
            }
            // end of the custom code
            const tagsArray = tags || [];
            if (this.site.can_tag_topics && !this.currentUser.staff && category) {
                // category.minimumRequiredTags incorporates both minimum_required_tags, and required_tag_groups
                if (category.minimumRequiredTags > tagsArray.length) {
                    return EmberObject.create({
                        failed: true,
                        reason: I18n.t("composer.error.tags_missing", {
                            count: category.minimumRequiredTags,
                        }),
                        lastShownAt: lastValidatedAt,
                    });
                }
            }
        }
    });
</script>

كان هذا النص البرمجي يعتمد بشكل كبير على تعديل مشابه (وقديم، عام 2019 أو أقدم) تم نشره على meta، ولكن لا يمكنني العثور على المنشور الأصلي بعد الآن.

على أي حال، هناك سؤالان في سؤال واحد:

  1. كيف يمكن نقل هذا بشكل صحيح إلى علامة تبويب JS؟ هل هذا ممكن، أم يجب علي إنشاء مكون سمة؟

  2. هل هناك طريقة أكثر أناقة لإخفاء/إظهار محدد علامات التبويب الخاص بالملحن فقط في فئات معينة؟ أستخدم علامات التبويب لفئة واحدة فقط في منتدى الخاص بي (فئة إعلانات بعلامات #search و #offer)

أعتقد أنه يمكنك استخدام CSS لإظهار/إخفاء حقل العلامة بناءً على فئة الفئة في جسم الصفحة، ولكن ما إذا كان ذلك أكثر أناقة فهو أمر قابل للنقاش :slight_smile:

هذا لا يحل المشكلة للموظفين [1]، ولكن إذا قمت بتعيين العلامات على أنها مقيدة بهذه الفئة، فلن يكون من الممكن استخدامها (من قبل غير الموظفين) في فئات أخرى. من /edit/tags الفئة:

العلامات ومجموعات العلامات المحددة أعلاه ستكون متاحة فقط في هذه الفئة والفئات الأخرى التي تحددها أيضًا. لن تكون متاحة للاستخدام في فئات أخرى.


  1. إلا إذا قمنا Make category tag rules / restrictions apply to moderators too ↩︎

لقد راجعت طريقة عمله، منذ فترة طويلة.

  • تظهر حقول الإدخال للوسوم في محرر النصوص عند إنشاء موضوع جديد بغض النظر عن الفئة المختارة (حتى لو كانت الفئة لا تحتوي على وسوم متاحة إلا للمسؤولين)، وهو ما أود منعه.
  • لن يعمل الحل المعتمد على CSS فقط، لأن محرر النصوص يمكن فتحه في أي صفحة، ولا يوجد عنصر أبوي في CSS يستهدف الفئة المطلوبة لمساعدة إخفاء حقل إدخال الوسوم في المحرر، وهو ما أعتقد أنه السبب في أنني استخدمت JavaScript.

لذلك، ما لم أكن قد فاتني شيء، لا يزال لدي حاجة إلى سكريبت لتحقيق هدفي.

كان الموضوع الأصلي في قسم Contribute > Feature حول هذا الموضوع هنا:

أظن أن هناك عدم كفاية في الزخم للعمل على هذه الميزة، ولم يكن pr-welcome مرغوبًا هنا وفقًا لسام.

لذا، عالق مع حل مخصص باستخدام JavaScript (الذي أحتاج إلى إصلاحه بعد ذلك :smiling_face_with_tear: )

يجب أن يكون من الممكن نسخه ولصقه. يتم تشغيل الأشياء الموجودة في علامة تبويب JS بنفس الطريقة تمامًا مثل <script type='text/discourse-plugin'>. إذا لم يكن يعمل، هل يمكنك مشاركة الكود؟

مع بعض CSS الحديث المجنون، هذا ممكن:

.d-editor-container:has(.category-input .select-kit-header[data-name="Support"]) .tags-input {
    display: none !important;
}

^^ هذا يخفي حقل العلامات للفئة “الدعم” في Meta.

يمكنك استبدال [data-name="Support"] بـ :not(data-name="Support") لعكس المنطق.

يا إلهي! يبدو أن مهاراتي في CSS لعام 2012 لم تعد كافية. وهو أمر غريب بعض الشيء، لأنني كنت أقسم أن عام 2012 كان حرفياً بالأمس!


لقد اخترت

.d-editor-container:not(:has(.category-input .select-kit-header\[data-name=“Trading Post”\])) .tags-input {
    display: none;
}

لذلك فهو مخفي في كل فئة ما عدا “Trading Post”.

شكراً للجميع!