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

[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 ضمن نوع التنقل المنسدل بشكل مثالي أيضًا.