Interazione tra componente tema, javascript tema e "anteprime"

[craigconstantine]

j/s

Ho del j/s personalizzato nel mio tema. (È la mia soluzione a: Interactive SVG using <object>? - #9 by craigconstantine ) Alla fine, sposterò il j/s in un repository Git e lo installerò come componente del tema a tutti gli effetti. Per ora, ho semplicemente incollato il j/s nell’intestazione del mio tema. Immagino che questo problema potrebbe scomparire se installassi questo j/s come componente a tutti gli effetti, ma non mi sembra che sia così.

Il mio j/s modifica il DOM prima che venga inviato al browser…

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

In azione…

Seleziona i <div data-custom="… appropriati e poi aggiunge nuovi elementi. Ad esempio, nello screenshot seguente, tutto ciò che si trova sotto le frecce è stato inserito dal j/s. (Puoi vederlo in azione qui: https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160 )

Cosa vedo…

Sto utilizzando il componente Topic List Previews ( GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub ) e il mio j/s non sembra essere chiamato.

In questo screenshot, la stringa /vmm/gibberish… è il contenuto nudo del <div data-custom="… che appare perché il mio j/s non riesce a raggiungerlo tramite api.decorateCooked(….

La stessa cosa accade nelle email inviate…

Cosa vorrei…

In realtà non voglio che venga effettuata la sostituzione completa. Lunga storia. Vorrei semplicemente espandere il mio j/s in modo che possa inserire lì una stringa statica, invece del semplice “gibberish” del mio blocco <div data-custom="….

Esiste qualche altro metodo api. a cui posso agganciarmi?

[david (David Taylor)]

Purtroppo non esiste un’API JavaScript per modificare gli ‘estratti’ dei topic nell’elenco dei topic. Inoltre, per motivi di sicurezza, i componenti del tema non hanno accesso ai contenuti renderizzati lato server (ad esempio, le e-mail).

Tuttavia, mi chiedo se possiamo risolvere il problema in un modo diverso. Attualmente stai incollando qualcosa di simile a questo nel compositore:

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

Invece, potresti fare qualcosa del genere:

<div data-custom="umbdv" data-theme-longstring="/vmm/longstringhere">
  contenuto di fallback per e-mail/estratti
</div>

Oppure, se vuoi essere ancora più creativo, potresti utilizzare il wrapper bbcode generico per farlo:

[wrap=umbdv longstring="/vmm/longstringhere"]
Contenuto di fallback
[/wrap]

Questo genererà automaticamente un div simile a:

<div class="d-wrap" data-wrap="umbdv" data-longstring="/vmm/longstringhere" dir="ltr">
<p dir="ltr">Contenuto di fallback</p>
</div>

Dovrai quindi modificare il codice del tuo componente del tema in modo che elimini il contenuto di fallback e lo sostituisca con ciò che desideri mostrare.

[craigconstantine]

…oooooooooooh, questo dovrebbe funzionare. Farò qualche prova e farò sapere.

[craigconstantine]

Sì, funziona perfettamente @david, grazie!

[pfaffman (Jay Pfaffman)]

A volte il non basta. Questa è una risposta eccellente, e sono davvero vicino a capire JavaScript e CSS abbastanza bene da riuscire a d-wrap la testa.