كيفية نقل النص البرمجي الخاص بي بشكل صحيح إلى علامة التبويب 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)

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

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

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

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

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


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

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

لقد ألقيت نظرة على كيفية عمله، حيث مر وقت طويل.

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

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

كان الموضوع الأصلي Feature حول هذا هنا:

أعتقد أنه لم يكن هناك اهتمام كافٍ للعمل على هذه الميزة، ولم تكن pr-welcome مرغوبة هنا وفقًا لـ sam.

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

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

يجب أن يكون من الممكن نسخه ولصقه. يتم تشغيل الأشياء الموجودة في علامة تبويب 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") لعكس المنطق.

4 إعجابات

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


لقد اخترت

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

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

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

5 إعجابات