تزيين موضوع في آخر الأخبار على الهاتف المحمول

أعمل على مكون سمة لحظر المشاركات التي تحتوي على كلمة رئيسية موجودة في حقل مستخدم مخصص. لقد نجحت في إخفاء الردود والمواضيع عند إدراجها في أحدث أو أعلى في عرض سطح المكتب، ولكن عند عرضها في التطبيق أو على الهاتف المحمول، ستلحق إشعارًا بأن الموضوع تم حظره، ولكن لن يتم تطبيق الفئة المحظورة على المحتوى. حظر الردود داخل موضوع يعمل بشكل جيد على الهاتف المحمول أو التطبيق.

من خلال نظرة على المكونات لم يبدُ أنه تم استخدام ملف .hbs مختلف للجوال، هل فاتني شيء آخر؟

const discourseComputed = require("discourse-common/utils/decorators").default;

function addIgnoredTopicClass() {
    if (currentUser) {
        api.container.lookup('store:main').find('user', currentUser.username).then((user) => {
            const blocklist = user.user_fields[1];
            const case_sensitive = user.user_fields[2];
            const whole_words = user.user_fields[3];
    
            const blocked = blocklist.split(",").map(function(item) {
                if (case_sensitive) {
                    return item.trim();
                } else {
                    return item.trim().toLowerCase();
                }
            });
            let classList = this._super(...arguments);
            let elem = document.querySelectorAll("[data-topic-id='" + this.topic.id.toString() + "']")[0];
            console.log(elem);
            const title = (case_sensitive) ? this.topic.fancy_title : this.topic.fancy_title.toLowerCase();
            const excerpt = (case_sensitive) ? this.topic.excerpt : this.topic.excerpt.toLowerCase();
            let result = "";
            
            for (let index = 0; index < blocked.length; ++index) {
                    let pattern = (whole_words) ? new RegExp('(?:\\b|\\s|^)' + blocked[index] + '(?:\\b|\\s|$)') : new RegExp(blocked[index]);
                    // console.log(pattern)
                    if (pattern.test(title)) {
                        classList += "blocker-blocked"
                        const found = blocked.filter(text => title.includes(text));
                        if (found.length >= 2) {
                            const last = found.pop();
                            result = found.join(', ') + ' and ' + last;
                        } else {
                            result = found.join(', ');
                        }
                        const newNode = document.createElement("a");
                        const textNode = document.createTextNode("Blocked for containing " + result + ".");
                        newNode.classList.add("block-notice")
                        newNode.appendChild(textNode);
                        newNode.onclick = function() { showComment(this); };
                        elem.children[0].insertBefore(newNode, elem.children[0].children[0]);
                        for (let index = 0; index < elem.children.length; ++index) {
                            if (elem.children[index].classList.contains('main-link')) {
                                elem.children[index].classList.add("blocker-blocked");
                            }
                        }
                        newNode.classList.remove("blocker-blocked");
                    }
                }
            
            // console.log(classList);
            return classList;
        });
    }
}

api.modifyClass("component:topic-list-item", {
    @discourseComputed()
    unboundClassNames() {
        return addIgnoredTopicClass.call(this);
    }
});
    
api.modifyClass("component:latest-topic-list-item", {
    
    @discourseComputed()
    unboundClassNames() {
        return addIgnoredTopicClass.call(this);
    }
});

أو على الأقل، اعتقدت أنني قمت بإنجاز هذا الأمر. ذهبت للعمل على شيء آخر لبعض الوقت والآن لم يعد يعمل :thinking: ربما لدي هذه المشكلة مع api.modifyClass؟

من باب الفضول، كيف يختلف هذا عن ميزة الكلمات الخاضعة للمراقبة المضمنة؟

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

حسب فهمي، فإن “الكلمات المُراقبة” (Watched Words) هي إعداد إداري ينطبق على جميع المستخدمين، صحيح؟ ما أحاول فعله هو السماح للمستخدمين بأن يكون لديهم مرشح كلمات مُراقبة خاص بهم يمكنه استبعاد المشاركات التي تقع ضمن قواعد المنتدى ولكن قد لا يرغب المستخدم في رؤيتها لأسباب خاصة به.

سيناريو وهمي: قد يكون هناك منتدى للحيوانات الأليفة يحتوي على موضوع عام حول التعامل مع شعر الحيوانات الأليفة حيث لا يتم تمييز الموضوع الرئيسي بنوع معين من الحيوانات. يرد المستخدم أ بشأن كلبه، ويرد المستخدم ب بشأن قطته، ولكن المستخدم أ لا يريد رؤية أي شيء عن القطط على الإطلاق. ما يفعله مكون السمة هذا هو السماح للمستخدم أ بوضع “قطة” في قائمة الحظر الخاصة به، ثم في أي مكان تظهر فيه كلمة “قطة” في موضوع أو رد، يتم استبدالها بـ “محظور لاحتوائه على قطط” مع خيار لإظهارها على أي حال.

الغرض منه هو التعامل مع الأشياء التي تقع ضمن الموضوع وضمن قواعد المنتدى بشكل عام، ولكن قد لا يتم تمييزها أو تظهر في ردود موضوع تم تمييزه بشيء يرغب المستخدم أ في رؤيته. المنتدى الذي أنتقل منه كان يستخدم نصًا برمجيًا للمتصفح لفحص الصفحة بعد تحميلها، وأحد عوامل الجذب في Discourse كان إمكانية بناء وظيفة الحظر مباشرةً بحيث تعمل على الهاتف المحمول أيضًا (النص البرمجي الذي كنا نستخدمه لا يعمل على متصفحات الهاتف المحمول). إنه يقلل من الإبلاغات والخلافات حول ما ينتمي إلى المواضيع العامة إذا كان بإمكان المستخدمين ببساطة أن يقرروا أنهم لا يريدون رؤية “س” دون أن يكون ذلك انتهاكًا للقواعد.

لا أعتقد أنني سأنشر هذا كمكون سمة مناسب لأنه يتطلب إنشاء ثلاثة حقول للمستخدم في لوحة الإدارة (والتي أعتقد أنها ستحتاج إلى إضافة لإنشائها تلقائيًا؟). أنا على خطة استضافة أساسية هنا ولن أعبث بالإضافات، ولكن يمكنني نشر كود مكون السمة النهائي وإعدادات حقول المستخدم عند الانتهاء.

4 إعجابات

هذا يبدو رائعًا. :slight_smile: يمكنني التفكير في عدد قليل من المنتديات التي ستجد ذلك مفيدًا.

3 إعجابات

نعم، يمكنني رؤية الإمكانات. وحتى استخدام نسخة معدلة لتوسيع وظيفة كتم صوت المستخدم. حيث لدي مستخدم واحد يشتكي :man_facepalming: من أنه لا يزال بإمكانه رؤية ردود الآخرين على الأشخاص الذين قام بكتمهم. هههه

الكثير من الإمكانات المثيرة للاهتمام. سأراقب مشروعك.
:vulcan_salute::smiling_face_with_sunglasses::+1:

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

كيف يمكنني معرفة مكان المشكلة؟ باستخدام وضع الجوال عبر أدوات مطوري Chrome، يعمل بشكل صحيح، ولكن في Chrome على هاتف فعلي وفي تطبيق Android لا يعمل. باستخدام مكون سمة Plugin Outlets، لا يبدو أن هناك منفذًا ذا صلة لأنني أحاول التعديل داخل عنصر قائمة الموضوع نفسه.

عذرًا إذا كان هذا سؤالًا أساسيًا، فهذه هي المرة الأولى التي أعمل فيها مع Ember.

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

لقد نجحت في تشغيل هذا على الهاتف المحمول وسأقوم بالنشر على Theme component بمجرد الموافقة على انضمامي. كانت المشكلة المتعلقة بالهاتف المحمول هي أنني كنت أضيف فئة إلى العنصر الفرعي topic-list الذي يحتوي على فئة “main-link”، ولكن على الهاتف المحمول، يكون هذا العنصر الفرعي main-link على بعد خطوات قليلة إضافية في التسلسل الهرمي مقارنةً بما هو عليه على سطح المكتب.

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