تبديل حقل المستخدم في الشريط الجانبي

[Lhc_fl (Linca)]

|||
|-|-|-|
| | ملخص | إضافة تبديلات إلى الشريط الجانبي الجديد
| |المستودع| GitHub - Lhcfl/sidebar-user-field-toggle: Add toggles into new sidebar |
| |دليل التثبيت|كيفية تثبيت سمة أو مكون سمة|
| |جديد في سمات Discourse؟| دليل المبتدئين لاستخدام سمات Discourse

<!- املأ “repoName” و “repoURL” لزر التثبيت التلقائي →

تثبيت مكون السمة هذا

شكر خاص لـ @Kinetiksoft على Discourse Meta لدعمه لي في تطوير مكون السمة هذا. بدون @Kinetiksoft، لن يكون مكون السمة هذا موجودًا.

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

تعليمات إضافية للمطورين

يرسل مكون السمة حدث تطبيق (AppEvent) عند الضغط على الزر وعند تحميله لأول مرة.

إذا كنت بحاجة إلى تنفيذ إجراء عند الضغط على الزر، استخدم api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });

    // استخدم `api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });`
    // لمعالجة حدث تبديل الزر
    this.appEvents.trigger("sidebar_user_fields_toggled", { user_fields });

[kinetiksoft]

شكراً لك، @Lhc_fl، على الحل السريع وعالي الجودة.

تستند حالة الاستخدام الخاصة بنا إلى وصف طلب السوق الخاص بنا:

تم استلهام الفكرة من https://meta.discourse.org/t/our-solution-for-blurring-nsfw-content/124584، لقد بدأنا للتو بعكس المنطق وكنا بحاجة إلى تبديل لمجتمعنا لطمس الوسائط وإظهارها.

فقط أضف حقل مستخدم مخصص كـ مربع اختيار واتبع نهجنا أدناه.

نحن نستخدم تبديل حقل مستخدم الشريط الجانبي مع مكون مخصص إضافي على النحو التالي:

1. أنشئ مكون سمة جديد مباشرة داخل لوحة تحكم المسؤول الخاصة بك
   /admin/customize/ → Components → Install → Create new (component)
2. أضف CSS:

CSS

/* عرض تمويه المحتوى غير الآمن للنظر والنص المتراكب على أي وسائط في مواضيع #nswf */
.nsfw-hide {
	.topic-body .cooked img:not(.emoji):not(.avatar),
	.topic-body .cooked iframe,
	.topic-body .cooked .lazyYT-container,
	.topic-body .cooked .video-container,
	.topic-thumbnail img:not(.emoji) {
        filter: blur(10px);
        -webkit-transition: .3s ease-in-out;
        transition: .2s ease-in-out;
	}

	.topic-body:hover .cooked img:not(.emoji),
	.topic-body:hover .cooked iframe,
	.topic-body:hover .cooked .lazyYT-container,
	.topic-body:hover .cooked .video-container,
	.topic-thumbnail:hover img:not(.emoji) {
        filter: blur(0);
        -webkit-transition: .3s ease-in-out;
        transition: .2s ease-in-out;
	}

	.topic-body .cooked a.lightbox:before,
	.topic-body .cooked iframe:before,
	.topic-thumbnail a:before {
	    z-index:2;
        padding: 5px;
        font-size:1em;
        position:absolute;

        color:#fff;
        content: '👀 Hover to show';
        background: #e86800;
	}

	.topic-body .cooked a.lightbox:before,
	.topic-body .cooked iframe:before {
        top: 15px;
        left: 10px;
	}

	.topic-thumbnail a:before {
        top: 65px;
        left: 20px;
	}

	.topic-body .cooked a.lightbox:hover:before,
	.topic-body .cooked iframe:hover:before,
	.topic-thumbnail a:hover:before,
	.topic-body .cooked .video-container:hover:before {
	    display:none;
	}
}

3. أضف JS (Head):

كود JS

<script type="text/discourse-plugin" version="0.8.7">
const { userPath } = require("discourse/lib/url");
const { ajax } = require("discourse/lib/ajax");

const you = api.getCurrentUser();

if (you) {
  ajax(userPath(`${you.username_lower}.json`)).then((res) => {
    api
      ._lookupContainer("model:site")
      .appEvents.trigger("sidebar_user_fields_toggled", {
        user_fields: res.user.user_fields,
      });
  });
}
// https://meta.discourse.org/t/css-classes-for-group-membership-for-simplified-ui-mode/60838/2

api.onAppEvent("sidebar_user_fields_toggled", (status) => {
    if (window.jQuery) {
        window.jQuery(function ($) {
            if (status.user_fields[2] === "true") { // أو شيء آخر
                $('body').addClass('nsfw-hide' );
            } else {
                $('body').removeClass('nsfw-hide' );
            }
        });
    }
});

</script>

4. فقط قم بإعداد أزرار مكون التبديل بالطريقة التي تريدها. نحن نستخدم معرف حقل المستخدم المخصص كمرجع.

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

يعمل مكون @Lhc_fl ضمن نوع التنقل المنسدل بشكل مثالي أيضًا.