Kann keine neue Klasse zu Topic-Seiten-Elementen mit jQuery hinzufügen?

[cosdesign (Cos)]

Ich habe Schwierigkeiten, mehr darüber zu erfahren, wie Discourse funktioniert, und bin nach dem Lesen dieses Artikels immer noch verwirrt. Ich versuche, mit jQuery einen dynamischen Titel zum Benutzernamen des Administrators auf der Beitragsseite hinzuzufügen, aber das funktioniert nicht.

Wenn ich jedoch beispielsweise das Body-Tag ansteuere und eine Klasse hinzufüge, funktioniert es.
Kann mir bitte jemand erklären, warum das nicht funktioniert?
Der Code wird übrigens im Header-Tab eingefügt.

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

Muss ich dies in einen Plugin-Ausgang injizieren oder ähnliches?

[merefield (Robert)]

@cosdesign

Kann mir bitte jemand erklären, warum das nicht funktioniert?

Wahrscheinlich, weil jQuery in diesem Fall nicht gut mit der Ember- und Widget-Rendering-Pipeline harmoniert.

Sie sehen, in diesem Skript haben Sie keine Kontrolle darüber, wann dies ausgelöst wird und in welchem Verhältnis dies zum Stand der JavaScript-App beim Zeichnen des Bildschirms steht.

Es gibt jedoch eine JavaScript-API-Methode dafür. Weitere Informationen finden Sie hier:

decorateWidget()

Und dieses spezifische Widget:

app/assets/javascripts/discourse/app/widgets/poster-name.js

Bevor Sie sich jedoch in dieses Kaninchenloch begeben, lassen Sie uns kurz zurücktreten: Möchten Sie nur einen Titel anzeigen lassen?

z. B. bei Jeffs Beiträgen:

Er hat den Titel: „Co-Founder“

Erstellen Sie einfach eine neue Gruppe, fügen Sie die Administratoren hinzu, gehen Sie zu Verwalten => Mitgliedschaft und bearbeiten Sie den Standardtitel.

Jetzt können sie diesen Titel in ihren Kontoeinstellungen unter „Einstellungen“ auswählen (oder Sie können das für sie tun).

Sie können dies auch verwenden, um ein spezielles Avatar-Flair anzuzeigen (ebenfalls im obigen Bildschirmfoto demonstriert).

Offensichtlich müssen Sie, wenn Sie dies nicht so „fest“ haben möchten, den Programmierweg einschlagen, aber das ist, wie Sie sicher zustimmen werden, viel weniger Aufwand.

[cosdesign (Cos)]

Danke für deine Hilfe. Nicht der eigentliche Forumstitel, den ich suche, sondern um einen Titel beim Hovern über dieses kleine Kronen-Icon anzuzeigen, das ich erstellt habe (nur für Admins sichtbar):

Übrigens ist der CSS-Code dafür:

.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;

[merefield (Robert)]

Schön.

Das klingt so, als würdest du vielleicht den Widget-Weg in Betracht ziehen.

Betrachte auch diese API-Methode:

api.reopenWidget("poster-name", {

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

Ich empfehle dir, dir Folgendes anzusehen: A tour of how the Widget (Virtual DOM) code in Discourse works

Es ist in Discourse deutlich aufwendiger, solche Dinge umzusetzen, da es sich um eine auto-magische Web-App handelt. Sobald du es jedoch richtig machst, kann die Lösung sehr robust sein.

[cosdesign (Cos)]

Toll, vielen Dank! Ich werde mir das ansehen und die Lösung posten, falls es klappt. Auf den ersten Blick wirkt Discourse beim Anpassen ziemlich einschüchternd, und ich dachte, WordPress sei schwierig . Aber sobald ich mich mit all diesen Plugins und Vorlagen vertraut gemacht habe, wird es sicher einfacher.

[merefield (Robert)]

Eigentlich, boom, es könnte sogar eine noch einfachere Lösung geben:

Betrachte diese API-Methode, um das normale Moderator-Schild auszutauschen:

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

Und ändere dann den Text des Tooltips hier:

An diesem Punkt ist dein ursprüngliches CSS möglicherweise überflüssig (obwohl du das Symbol neu einfärben kannst).

[cosdesign (Cos)]

Aber das wird das Schild-Symbol für Moderatoren entfernen, oder? Ich möchte das nicht. Ich muss das Kronen-Symbol und den Hover-Text nur für Administratoren hinzufügen, da diese auf der Beitragsseite überhaupt keine haben.

[merefield (Robert)]

Ah, ja, ich bin es einfach zu sehr gewohnt, auf meinen Seiten sowohl Moderator als auch Administrator zu sein. Wenn man diese Rollen trennt, funktioniert das nicht (d. h. Administratoren sind nie Moderatoren). Man müsste Administratoren Moderatorrechte geben.

Also schau dir die anderen Optionen an.

[merefield (Robert)]

Probier das hier:

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

und

funktioniert bei mir:

In diesem Fall ist der erste Benutzer sowohl Admin als auch Moderator, der zweite nur Admin. Du kannst diese Logik erweitern; setze die Krone in den Vordergrund, indem du die Reihenfolge der if-Anweisungen änderst.

[cosdesign (Cos)]

Klingt nach einer Lösung, aber wie gesagt, ich bin neu beim Anpassen von Discourse. Könntest du bitte erklären, wo genau ich deinen Code einfügen muss? Ich habe bisher keine API-Methode ausprobiert.

[merefield (Robert)]

… gib mir eine Sekunde, ich baue das ordentlich für dich auf.

[merefield (Robert)]

Ok, dies ist jetzt eine Theme-Komponente:

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

(Installing a theme or theme component)

Die Admin-Rolle hat Vorrang – standardmäßig wird für einen Admin, der auch die Moderator-Rolle hat, eine Krone angezeigt.

Sie können das Symbol nun nach Personaltyp konfigurieren.

Stellen Sie einfach sicher, dass Sie die Symbolnamen zur SVG-Symbol-Subset-Einstellung hinzufügen (sonst werden sie nicht angezeigt):

Passen Sie hier Ihren Titeltext an:

Ähnlich für den Moderator.

[cosdesign (Cos)]

Toll . Vielen Dank für deine Hilfe!

[merefield (Robert)]

Vergnügen (das war ziemlich spaßig!)

[merefield (Robert)]

Ich habe das TC aktualisiert, sodass es nun auch die Mitarbeiter-Icons auf der Benutzerkarte ändert (und möglicherweise an anderen Stellen, da ich den Helper modifiziert habe).

Die Icons sind nun sowohl für den Administrator als auch für den Moderator konfigurierbar, wobei die Krone standardmäßig für den Administrator und das normale Schild für den Moderator gilt.

Ich habe das TC umbenannt.

Es wird sicher Stellen geben, an denen die Icons nicht umgewandelt wurden; vielleicht werde ich in Zukunft noch weitere entdecken.

[AEW745 (Dev_Scripter)]

Vielen Dank! Das hat mir bei dem geholfen, was ich für mein Forum tun wollte! Ich denke, Ihr Kommentar sollte für andere Benutzer angepinnt werden, die Probleme mit einem Symbol haben, das neben ihrem Namen als Administrator angezeigt wird. Ich habe Ihre Funktion verwendet, um das Schildsymbol anzuzeigen, das auf den Profilen von Moderatoren öffentlich angezeigt wird, für Administratoren. Jetzt kann ich das Schildsymbol haben, ohne Moderatorberechtigungen zu haben, und es hat den korrekten Admin-Tooltip, wenn ich nur die Admin-Berechtigungen habe. Vielen Dank für Ihre Zeit, diese großartige Komponente für die Foren der Leute zu erstellen!

Bearbeiten: Es wird nicht öffentlich auf ihrem Profil angezeigt. Es funktioniert derzeit nur bei Beiträgen.

[merefield (Robert)]

Gern geschehen. Fühlen Sie sich frei, zu forken, zu erweitern und PRs einzureichen!