Comment créer un composant de thème pour une bannière basée sur TL

Dev
1

Il devrait être possible d’écrire le sujet de la bannière dans différents <div> et d’utiliser ensuite la condition relative au niveau de confiance mentionnée ici pour afficher ou masquer le <div> correspondant à l’utilisateur, par exemple :

if (Discourse.User.current() && trust >= "2") {

Par exemple, afficher le premier <div> pour le niveau TL0, le second pour TL1, etc.

#banner-content div:nth-of-type(1) { display: none; }

Est-ce possible ? Si oui, quelqu’un sait-il comment créer le thème ?

J’essaie quelque chose comme cela, mais cela ne fonctionne pas. Vos conseils sont appréciés :

en-tête :

<script type="text/discourse-plugin" version="0.8.18">
    api.onPageChange(() => {
        if (Discourse.User.current() && trust == "0") {$('#banner-content div:nth-child(1)').addClass( "TL-selected" );}
    });
</script>

CSS :

#banner-content {display: none; }

#banner-content .TL-selected {display: block;}
2

This will depend on your desired goal. If there’s no problem with using CSS, then yeah, this is pretty straightforward.

The reason why the code you added in the header doesn’t work is because trust is not defined. First you need to define what trust is. You can do it with something like this:

const container = Discourse.__container__,
  controller = container.lookup("controller:application"),
  trust = controller.get("currentUser.trust_level");

In the context of the code you tried it would look like this:

<script type="text/discourse-plugin" version="0.8.18">
const container = Discourse.__container__,
  controller = container.lookup("controller:application"),
  trust = controller.get("currentUser.trust_level");

api.onPageChange(() => {
  if (Discourse.User.current() && trust == "0") {
    $("#banner-content div:nth-child(1)").addClass("TL-selected");
  }
});
</script>

Now this works, but is not ideal. onPageChange fires on everypage change and if you do that and navigate a few pages on your site then check #banner-content div:nth-child(1) it would look like this:

<div id="banner-content">
  <div class="TL-selected TL-selected TL-selected TL-selected TL-selected TL-selected TL-selected TL-selected TL-selected TL-selected TL-selected TL-selected"></div>
</div>

Because the class would get added with every page change.

Perhaps a better way is to add the current user’s trust level to the <html> tag. This is of course only one option as this component can be as simple or as complex as you need it to be. However, let’s keep things simple for now.

So you can use something like this:

<script type="text/discourse-plugin" version="0.8.18">
$(document).ready(function() {
  const container = Discourse.__container__,
    controller = container.lookup("controller:application"),
    trust = controller.get("currentUser.trust_level"),
    trustClass = "trust-level-" + trust;

  $("html").addClass(trustClass);
});
</script>

All this does is find out what the trust_level is like I mentioned before, then constructs a CSS class name and adds it to the <body> tag. I wrapped it around in document ready for good measure.

This runs only once on initial page load. The result looks like this:

Capture

So, now you have a class in place that you can target with CSS. For a basic example you can do something like this:

.tl1-content,
.tl2-content,
.tl1-content,
.tl4-content {
  display: none;
}

.trust-level-1 .tl1-content,
.trust-level-2 .tl2-content,
.trust-level-3 .tl3-content,
.trust-level-4 .tl4-content {
  display: block;
}
3

thanks for the clear guide :four_leaf_clover: as well as the solution.

I’m not sure if people like css solutions, but using these simple css tweaks, forums can make useful habits in their new-users; without disrupting high level ones.