사이드바 사용자 필드 토글

[kinetiksoft]

빠르고 품질 좋은 해결책을 제공해 주셔서 감사합니다, @Lhc_fl.

우리의 사용 사례는 마켓플레이스 요청 설명에 기반하고 있습니다:

이 아이디어는 Our solution for blurring NSFW content 에서 영감을 받아, 우리는 논리를 반전시켜 시작했고 커뮤니티가 미디어를 흐림 처리하고 흐림을 해제할 수 있는 토글이 필요했습니다.

**사용자 정의 필드(Custom User Field)**를 **체크박스(Checkbox)**로 추가하고 아래에 제시된 우리의 접근 방식을 따르세요.

우리는 다음과 같은 추가 사용자 정의 컴포넌트를 가진 **사이드바 사용자 필드 토글(Sidebar User Field Toggle)**을 사용합니다:

1. 관리자 대시보드에서 바로 새로운 테마 컴포넌트를 생성하세요.
   /admin/customize/ → Components → Install → Create new (component)
2. CSS 추가:

CSS

/* display nsfw blur and overlay text on any media in #nswf topics */
.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 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") { // Or some else
                $('body').addClass('nsfw-hide' );
            } else {
                $('body').removeClass('nsfw-hide' );
            }
        });
    }
});

</script>

4. 토글 컴포넌트의 버튼을 원하는 대로 설정하기만 하면 됩니다. 우리는 그곳에서 사용자 정의 필드 ID를 참조로 사용합니다.

P.S. 동일한 코드를 토글 컴포넌트 자체에 입력할 수도 있지만, 테스트하는 것을 귀찮아할 뿐 아니라 완벽하게 작동하는 코드를 건드릴 이유가 없기 때문입니다.

@Lhc_fl의 컴포넌트는 드롭다운(Dropdown) 내비게이션 유형에서도 완벽하게 작동합니다.