Impossibile aggiungere una nuova classe agli elementi della pagina dell'argomento usando jQuery?

Sviluppatore
1

I’m struggling to learn more about how discourse works and I’m still confused after reading this. I’m trying to add a dynamic title to the admin’s username on the post page using jQuery but is not working.

But if I’ll target let’s say the body tag, and add a class, it works.
So can somebody please explain why is not working?
The code is inserted in the header tab btw.

<script>
  $(".names span.admin a").attr('title', 'Community Admin');
</script>

Do I need to inject this in a plugin outlet or something?

2

Probably because in this case jQuery is not playing nicely with the Ember & Widget rendering pipeline.

You see in this script, you have no control over when this fires and in relation to where the javascript app has got to whilst drawing the screen.

There’s an javascript api method for this though, see more here:

decorateWidget()

And this specific widget:

However, before you go down that rabbit hole, let’s back up a bit, do you just want a Title to be shown?

e.g. on Jeff’s posts:

image

He has title: “co-founder”

Just create a new Group, add the Admins, go to Manage => Membership and edit the Default Title.

Now they can select this Title in their account settings in Preferences (or you can do that for them).

image
image994×551 14.4 KB

You can also use this to show a special Avatar flair (also demostrated by the above screen clip).

Obviously if you don’t want this so “fixed” you will have to look at the coding route, but this, I’m sure you’d agree, is a lot less effort

5 Mi Piace
3

Thanks for your help. Not the actual forum title I’m looking for but to display a title on hover on this little crown icon I made ( visible only for admins ):
image

Btw the CSS code for this is:

.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;
4

Nice.

Sounds like you might want to consider the widget route.

Also consider this api method:

api.reopenWidget("poster-name", {

      html() {
          <<your-code-here-but-consider-using-the-original-as-template>>
      }
}

I would recommend you look at: A tour of how the Widget (Virtual DOM) code in Discourse works

It’s significantly more effort to do this kind of thing in Discourse because it is an auto-magical-web-app, but once you do it right, the solution can be very robust.

5 Mi Piace
5

Awesome, thanks a lot. I’ll take a look and post the solution if I’ll succeed. At first sight, Discourse looks so scary when it comes to customizing, and I thought WordPress is difficult :smile: .But, for sure once I’ll get familiar with all this plugins-templates thing, I guess it will become easier.

6

Actually, boom, there might be an even easier solution:

Consider this api method to swap out the normal moderator shield:

 api.replaceIcon('shield-alt', 'crown');

and then change the text of the tooltip here:

image
image1152×402 10.7 KB

At which point, your original CSS is potentially redundant (though you can re-color the icon)

3 Mi Piace
7

But this will remove the shield icon for moderators, right? Cause I don’t want that. I need to add that crown icon and the hovering text only for admins since they don’t have any at all on the posts page.

1 Mi Piace
8

Ah, yeah, I’m too used to my sites where I’m both a mod and an admin. If you split these roles that won’t work (ie Admin’s are never mods). You’d need to give Admins mod rights.

So explore the other options.

1 Mi Piace
9

Try this:

api.reopenWidget("poster-name", {
  posterGlyph(attrs) {
    if (attrs.moderator || attrs.groupModerator) {
      return iconNode("shield-alt", {
        title: I18n.t("user.moderator_tooltip"),
      });
    };
    if (attrs.admin) {
      return iconNode("crown", {
        title: I18n.t("user.admin_tooltip"),
      });
    }
  }
})

and

image
image1129×388 10.3 KB

works for me:

image
image736×305 14.6 KB

In this case the first user is both admin and mod, second is just admin. You can embellish that logic; make the crown take precedence by switching the order of the if statements.

1 Mi Piace
10

Sounds like a solution but as I said I’m new to customizing Discourse…can you please explain where exactly do I need to paste your code cause I didn’t try any API method so far.

11

… give me a second, I’ll build this properly for you

12

Ok, this is now a Theme Component:

https://github.com/merefield/discourse-tc-staff-icons

(How do I install a Theme or Theme Component?)

Admin role takes precendence - by default a crown will show for an admin who also has moderator role.

You can now configure the icon by staff type.

image

Just make sure you add the icon names to the svg icon subset setting (or it won’t show):

image
image1141×242 9.07 KB

Customize your title text here:

image
image1129×388 10.3 KB

similarly for the moderator.

5 Mi Piace
13

Awesome :slightly_smiling_face:. Thank you so much for your help!

14

pleasure (that one was quite fun!)

2 Mi Piace
15

I’ve updated the TC so it now changes the staff icons on the User Card too (and possibly other places since I’ve modified the helper).

The icons are now configurable for both the admin and the moderator, though crown is the default for admin whilst moderator’s default is vanilla shield.

I’ve renamed the TC.

There are bound to be places where the icons are not converted, perhaps I’ll catch more in the future.

3 Mi Piace
16

Grazie mille! Mi hai aiutato con quello che volevo fare per il mio forum! Penso che il tuo commento dovrebbe essere fissato per altri utenti che hanno problemi con un’icona che viene visualizzata accanto al loro nome come amministratore. Ho usato la tua funzionalità per visualizzare l’icona dello scudo che è pubblicamente mostrata sul profilo dei moderatori per gli amministratori. Ora, posso avere l’icona dello scudo senza avere i permessi di moderatore e ha il corretto tooltip dell’amministratore quando ho solo i permessi di amministratore. Grazie mille per il tuo tempo nel creare questo fantastico componente per i forum delle persone!

Modifica: Non viene visualizzato pubblicamente sul loro profilo. Attualmente funziona solo sui post.

1 Mi Piace
17

Piacere. Sentiti libero di fare fork, estendere e inviare PR!

2 Mi Piace