Interaktion zwischen Theme-Komponente, Theme-JavaScript und „Vorschauen“

[craigconstantine]

j/s

Ich habe einige benutzerdefinierte j/s in meinem Theme. (Es ist meine Lösung für: Interactive SVG using <object>? - #9 by craigconstantine ) Irgendwann werde ich das j/s in ein Git-Repository verschieben und als ordentliches Theme-Komponente installieren. Derzeit habe ich das j/s einfach in den Header meines Themes eingefügt. Ich vermute, dieses Problem würde verschwinden, wenn ich das j/s als ordentliche Komponente installieren würde, aber es fühlt sich für mich nicht so an.

Mein j/s verändert das DOM, bevor es an den Browser gesendet wird…

api.decorateCooked(
    $elem => $elem.children('.cooked div[data-custom="umbdv"]').umbdv(),
    { id: 'umbdv' }
);

In Aktion…

Es wählt passende <div data-custom="… aus und fügt dann neue Elemente hinzu. Zum Beispiel wird in dem folgenden Screenshot alles unterhalb der Pfeile von dem j/s eingefügt. (Sie können es hier in Aktion sehen: https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160 )

Was ich sehe…

Ich verwende die Komponente „Topic List Previews“ ( GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub ) und mein j/s scheint nicht aufgerufen zu werden.

In diesem Screenshot ist der /vmm/gibberish…-String der rohe Inhalt von <div data-custom="…, der durchscheint, weil mein j/s über api.decorateCooked(… nie dazu kommt.

Das Gleiche passiert auch bei versendeten E-Mails…

Was ich möchte…

Ich möchte eigentlich keine vollständige Ersetzung durchführen. Lange Geschichte. Ich möchte mein j/s einfach so erweitern, dass es dort einen statischen String einfügt, anstatt den rohen „Gibberish“ aus meinem <div data-custom="…-Block.

Gibt es eine andere api.-Methode, an die ich anknüpfen kann?

[david (David Taylor)]

Leider gibt es keine JavaScript-API zum Ändern der ‘Auszüge’ von Themen in der Themenliste. Theme-Komponenten haben aus Sicherheitsgründen zudem keinen Zugriff auf serverseitig gerenderten Inhalt (z. B. E-Mails). Wenn Sie E-Mails ändern möchten, müssten Sie ein Plugin verwenden.

Ich frage mich jedoch, ob wir das auf eine andere Weise lösen können. Momentan fügen Sie im Composer etwas wie folgt ein:

<div data-custom="umbdv">/vmm/longstringhere</div>

Stattdessen könnten Sie etwas wie Folgendes tun:

<div data-custom="umbdv" data-theme-longstring="/vmm/longstringhere">
  Fallback-Inhalt für E-Mails/Auszüge
</div>

Oder wenn Sie es besonders ausgefeilt mögen, können Sie den generischen BBCode-Wrapper verwenden:

[wrap=umbdv longstring="/vmm/longstringhere"]
Fallback-Inhalt
[/wrap]

Dies generiert automatisch ein div wie folgt:

<div class="d-wrap" data-wrap="umbdv" data-longstring="/vmm/longstringhere" dir="ltr">
<p dir="ltr">Fallback-Inhalt</p>
</div>

Anschließend müssen Sie den Code Ihrer Theme-Komponente so anpassen, dass er den Fallback-Inhalt löscht und durch das ersetzt, was Sie anzeigen möchten.

[craigconstantine]

…oooooooh, das würde es richten. Ich werde etwas basteln und mich wieder melden.

[craigconstantine]

…ja, funktioniert einwandfrei @david, danke!

[pfaffman (Jay Pfaffman)]

Manchmal reicht das einfach nicht aus. Das ist eine großartige Antwort, und ich bin der Lösung schon sehr nahe, JavaScript und CSS gut genug zu verstehen, um mir das zu d-wrap.