Alternar campo de usuario en la barra lateral

[Lhc_fl (Linca)]

|||
|-|-|-|
| | Resumen | Añadir interruptores a la nueva barra lateral
| |Repositorio| GitHub - Lhcfl/sidebar-user-field-toggle: Add toggles into new sidebar |
| |Guía de instalación|Cómo instalar un tema o componente de tema|
| |¿Nuevo en los temas de Discourse?| Guía para principiantes sobre el uso de temas de Discourse|

Instalar este componente de tema

Un agradecimiento especial a @Kinetiksoft en Discourse Meta por apoyarme en el desarrollo de este componente de tema. Sin @Kinetiksoft, este componente de tema no existiría.

Este componente de tema te permite añadir un conjunto de botones a la barra lateral para ajustar los campos de usuario.

Instrucciones adicionales para desarrolladores

El componente de tema envía un AppEvent cuando se presiona el botón y cuando se carga por primera vez.

Si necesitas realizar una acción cuando se presiona el botón, usa api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });

    // Usa `api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });`
    // para manejar el evento de alternancia del botón
    this.appEvents.trigger("sidebar_user_fields_toggled", { user_fields });

[kinetiksoft]

Gracias, @Lhc_fl, por la solución rápida y de calidad.

Nuestro caso de uso se basa en la descripción de nuestra solicitud de mercado:
La idea se inspiró en Our solution for blurring NSFW content, simplemente comenzamos invirtiendo la lógica y necesitábamos un interruptor para que nuestra comunidad difuminara y desenfocara los medios.

Simplemente agregue Campo de usuario personalizado como Casilla de verificación y siga nuestro enfoque a continuación.

Usamos Interruptor de campo de usuario de la barra lateral con un componente personalizado adicional de la siguiente manera:

1. Cree un nuevo componente de tema directamente en su panel de administración
   /admin/customize/ → Componentes → Instalar → Crear nuevo (componente)
2. Agregue CSS:

CSS

/* muestra el desenfoque nsfw y el texto superpuesto en cualquier medio en temas #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. Agregue JS (Head):

Código 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") { // O algún otro
                $('body').addClass('nsfw-hide' );
            } else {
                $('body').removeClass('nsfw-hide' );
            }
        });
    }
});

</script>

4. Simplemente configure los botones del componente de alternancia de la manera que desee. Usamos el ID del campo de usuario personalizado como referencia.

PD: Puede que hayamos podido introducir el mismo código en el propio componente de alternancia, pero no me molesté en probarlo y, ¿por qué tocar un código que funciona perfectamente de todos modos?

El componente de @Lhc_fl también funciona perfectamente dentro del tipo de navegación desplegable.