Sidebar User Field Toggle

[Lhc_fl (Linca)]

	Summary	Add toggles into new sidebar
	Repository	GitHub - Lhcfl/sidebar-user-field-toggle: Add toggles into new sidebar
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Special thanks to @Kinetiksoft on Discourse Meta for supporting me in developing this theme component. Without @Kinetiksoft, this theme component would not exist.

This theme component allows you to add a set of buttons to the sidebar to adjust user fields.

Additional instructions for developers

The theme component sends an AppEvent when the button is pressed and when it is loaded for the first time.

If you need to perform an action when the button is pressed, use api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });

    // Use `api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });`
    // to handle button toggle event
    this.appEvents.trigger("sidebar_user_fields_toggled", { user_fields });

[kinetiksoft]

Thank you, @Lhc_fl, for quick and quality solution.

Our use case is based on our marketplace request’s description:

The idea was inspired by Our solution for blurring NSFW content, we just started by inverting the logic and needed a toggle for our community to blur & unblur media.

Just add Custom User Field as a Checkbox and follow our approach below.

We use Sidebar User Field Toggle with additional custom component like so:

1. Create new theme component right within your admin dashboard
   /admin/customize/ → Components → Install → Create new (component)
2. Add 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. Add 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. Just set up the toggle component’s buttons the way you want them to be. We use Custom User’s Field ID there as a reference.

P.S. It may be we could enter the same code into the Toggle’s component itself, but I just don’t bother to test it and why touch perfectly working code anyway?

The @Lhc_fl’s component works within Dropdown navigation type perfectly too.