Basculer le champ utilisateur de la barre latérale

[Lhc_fl (Linca)]

|||
|-|-|-|
| | Résumé | Ajouter des bascules dans la nouvelle barre latérale
| |Dépôt| GitHub - Lhcfl/sidebar-user-field-toggle: Add toggles into new sidebar |
| |Guide d’installation|Comment installer un thème ou un composant de thème|
| |Nouveau sur les thèmes Discourse ?| Guide du débutant pour l’utilisation des thèmes Discourse|

<!- Remplir “repoName” et “repoURL” pour le bouton d’installation automatique →

Installer ce composant de thème

<!- Décrire ce thème/composant en une ou deux phrases →

Un grand merci à @Kinetiksoft sur Discourse Meta pour son soutien dans le développement de ce composant de thème. Sans @Kinetiksoft, ce composant de thème n’existerait pas.

Ce composant de thème vous permet d’ajouter un ensemble de boutons à la barre latérale pour ajuster les champs utilisateur.

<!- Ajouter des captures d’écran (si applicable) →

<!- Ajouter plus de détails et expliquer les paramètres (si applicable) →

Instructions supplémentaires pour les développeurs

Le composant de thème envoie un AppEvent lorsque le bouton est pressé et lorsqu’il est chargé pour la première fois.

Si vous avez besoin d’effectuer une action lorsque le bouton est pressé, utilisez api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });

    // Utiliser `api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });`
    // pour gérer l'événement de bascule du bouton
    this.appEvents.trigger("sidebar_user_fields_toggled", { user_fields });

[kinetiksoft]

Merci à @Lhc_fl pour une solution rapide et de qualité.

Notre cas d’utilisation est basé sur la description de notre demande de marketplace :
L’idée s’est inspirée de Our solution for blurring NSFW content, nous avons juste commencé par inverser la logique et avions besoin d’un interrupteur pour que notre communauté puisse flouter et déflouter les médias.

Ajoutez simplement un Champ utilisateur personnalisé sous forme de Case à cocher et suivez notre approche ci-dessous.

Nous utilisons le Toggle de champ utilisateur de la barre latérale avec un composant personnalisé supplémentaire comme ceci :

1. Créez un nouveau composant de thème directement dans votre tableau de bord d’administration
   /admin/customize/ → Composants → Installer → Créer un nouveau (composant)
2. Ajouter du CSS :

CSS

/* afficher le floutage nsfw et le texte de superposition sur tous les médias dans les sujets #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. Ajouter du JS (Head) :

Code 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") { // Ou autre chose
                $('body').addClass('nsfw-hide' );
            } else {
                $('body').removeClass('nsfw-hide' );
            }
        });
    }
});

</script>

4. Configurez simplement les boutons du composant de bascule comme vous le souhaitez. Nous utilisons l’ID du champ utilisateur personnalisé comme référence.

P.S. Il se pourrait que nous puissions entrer le même code dans le composant Toggle lui-même, mais je n’ai pas pris la peine de le tester et pourquoi toucher à un code qui fonctionne parfaitement de toute façon ?

Le composant de @Lhc_fl fonctionne parfaitement aussi dans le type de navigation déroulante.