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

Sviluppatore
1

Sto facendo fatica a capire come funziona Discourse e, dopo aver letto questo, sono ancora confuso. Sto cercando di aggiungere un titolo dinamico al nome utente dell’amministratore nella pagina dei post usando jQuery, ma non funziona.

Se invece targetto, per esempio, il tag body e aggiungo una classe, funziona.
Quindi qualcuno può per favore spiegare perché non funziona?
Il codice è inserito nella scheda Header, tra l’altro.

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

Devo iniettare questo in un plugin outlet o qualcosa del genere?

2

Probabilmente perché in questo caso jQuery non si integra bene con il pipeline di rendering di Ember e dei widget.

Vedi, in questo script non hai il controllo su quando viene eseguito e in relazione a dove si trova l’applicazione JavaScript mentre disegna lo schermo.

Esiste però un metodo dell’API JavaScript per questo; vedi ulteriori informazioni qui:

decorateWidget()

E questo widget specifico:

Tuttavia, prima di addentrarti in quel labirinto, facciamo un passo indietro: vuoi semplicemente che venga mostrata un’intestazione?

Ad esempio, nei post di Jeff:

image
image367×114 7.42 KB

Lui ha l’intestazione: “co-founder”

Basta creare un nuovo Gruppo, aggiungere gli Amministratori, andare su Gestisci => Membri e modificare l’Intestazione predefinita.

Ora possono selezionare questa intestazione nelle impostazioni del proprio account in Preferenze (o puoi farlo tu per loro).

image
image994×551 14.4 KB

Puoi anche utilizzarlo per mostrare un’aura speciale dell’avatar (anch’essa dimostrata dallo screenshot sopra).

Ovviamente, se non vuoi che sia così “fisso”, dovrai esplorare la strada della programmazione, ma questo, sono sicuro che sarai d’accordo, richiede molto meno sforzo.

5 Mi Piace
3

Grazie per il tuo aiuto. Non è il titolo del forum che stavo cercando, ma per mostrare un titolo al passaggio del mouse su questa piccola icona a corona che ho creato (visibile solo per gli amministratori):

image
image450×178 72.4 KB

Comunque, il codice CSS per questo è:

.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

Bene.

Sembra che tu possa prendere in considerazione la strada del widget.

Considera anche questo metodo API:

api.reopenWidget("poster-name", {

      html() {
          <<il-tuo-codice-qui-ma-considera-di-usare-quello-originale-come-modello>>
      }
}

Ti consiglio di dare un’occhiata a: A tour of how the Widget (Virtual DOM) code in Discourse works

È significativamente più impegnativo fare questo tipo di cose in Discourse perché è un’app web automatica e magica, ma una volta fatto correttamente, la soluzione può essere molto robusta.

5 Mi Piace
5

Fantastico, grazie mille. Darò un’occhiata e pubblicherò la soluzione se ci riuscirò. A prima vista, Discourse sembra molto spaventoso quando si tratta di personalizzazione, e pensavo che WordPress fosse difficile :grinning_face_with_smiling_eyes:. Ma, sicuramente una volta che mi sarò familiarizzato con tutto questo mondo di plugin e template, credo che diventerà più facile.

6

In realtà, boom, potrebbe esserci una soluzione ancora più semplice:

Considera questo metodo dell’API per sostituire lo scudo normale del moderatore:

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

e poi modifica il testo del tooltip qui:

image
image1152×402 10.7 KB

A quel punto, il tuo CSS originale potrebbe essere ridondante (anche se puoi ridisegnare il colore dell’icona)

3 Mi Piace
7

Ma questo rimuoverà l’icona dello scudo per i moderatori, giusto? Perché non voglio che accada. Devo aggiungere l’icona della corona e il testo al passaggio del mouse solo per gli amministratori, dato che non ne hanno affatto nella pagina dei post.

1 Mi Piace
8

Ah, sì, sono abituato ai miei siti in cui sono sia moderatore che amministratore. Se separi questi ruoli, non funzionerà (cioè, gli amministratori non sono mai moderatori). Dovresti dare agli amministratori i diritti di moderatore.

Quindi esplora le altre opzioni.

1 Mi Piace
9

Prova questo:

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"),
      });
    }
  }
})

e

image
image1129×388 10.3 KB

funziona per me:

image
image736×305 14.6 KB

In questo caso il primo utente è sia amministratore che moderatore, il secondo è solo amministratore. Puoi arricchire quella logica; fai sì che la corona abbia la precedenza scambiando l’ordine delle istruzioni if.

1 Mi Piace
10

Sembra una soluzione, ma come ho detto sono nuovo alla personalizzazione di Discourse… puoi spiegarmi esattamente dove devo incollare il tuo codice, dato che finora non ho provato alcun metodo API?

11

… dammi un secondo, te lo costruirò come si deve

12

Ok, ora questo è un componente del tema:

(Installing a theme or theme component)

Il ruolo di amministratore ha la precedenza: per impostazione predefinita, un’icona a forma di corona verrà mostrata per un amministratore che ha anche il ruolo di moderatore.

Ora puoi configurare l’icona in base al tipo di membro dello staff.

image
image569×174 3.2 KB

Assicurati solo di aggiungere i nomi delle icone all’impostazione del sottoinsieme di icone SVG (altrimenti non verranno visualizzate):

image
image1141×242 9.07 KB

Personalizza qui il testo del titolo:

image
image1129×388 10.3 KB

allo stesso modo per il moderatore.

5 Mi Piace
13

Fantastico :slightly_smiling_face:. Grazie mille per il tuo aiuto!

14

piacere (quella è stata molto divertente!)

2 Mi Piace
15

Ho aggiornato il TC in modo che ora modifichi anche le icone dello staff sulla Scheda Utente (e forse in altri punti, dato che ho modificato l’helper).

Le icone sono ora configurabili sia per l’amministratore che per il moderatore, sebbene la corona sia quella predefinita per l’amministratore, mentre lo scudo vanilla è quella predefinita per il moderatore.

Ho rinominato il TC.

È probabile che ci siano punti in cui le icone non sono state convertite; forse ne individuerò altri in futuro.

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