Переключатель поля пользователя в боковой панели

[Lhc_fl (Linca)]

	Краткое описание	Добавление переключателей в новую боковую панель
	Репозиторий	GitHub - Lhcfl/sidebar-user-field-toggle: Add toggles into new sidebar · GitHub
	Руководство по установке	Как установить тему или компонент темы
	Новичок в темах Discourse?	Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Особая благодарность @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, за быстрое и качественное решение.

Наш кейс основан на описании запроса для маркетплейса:

Идея была вдохновлена Our solution for blurring NSFW content, мы просто начали с инверсии логики и нуждались в переключателе для нашего сообщества, чтобы размывать и размывать медиа-контент.

Просто добавьте Пользовательское поле в виде флажка и следуйте нашему подходу ниже.

Мы используем Sidebar User Field Toggle с дополнительным пользовательским компонентом следующим образом:

1. Создайте новый компонент темы прямо в вашей панели администратора
   /admin/customize/ → Components → Install → Create new (component)
2. Добавьте CSS:

CSS

/* отображение размытия NSFW и текста оверлея на любом медиа в темах #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: '👀 Наведите, чтобы показать';
        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 Code

<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. Просто настройте кнопки компонента переключателя так, как вам нужно. Мы используем ID пользовательского поля в качестве ссылки.

P.S. Возможно, мы могли бы ввести тот же код в сам компонент переключателя, но я просто не стал проверять это, и зачем трогать идеально работающий код?

Компонент @Lhc_fl также отлично работает с типом навигации Dropdown.