Interaction entre le composant thème, le javascript du thème et les "aperçus"

[craigconstantine]

j/s

J’ai du j/s personnalisé dans mon thème. (C’est ma solution à : Interactive SVG using <object>? - #9 by craigconstantine ) À terme, je déplacerai le j/s vers un dépôt Git et l’installerai comme un véritable composant de thème. Pour l’instant, j’ai simplement collé le j/s dans l’en-tête de mon thème. Je suppose que ce problème pourrait disparaître si j’installais ce j/s comme un véritable composant, mais cela ne me semble pas être le cas.

Mon j/s modifie le DOM avant qu’il ne soit envoyé au navigateur…

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

En action…

Il sélectionne les <div data-custom="… appropriés, puis ajoute de nouveaux éléments. Par exemple, sur la capture d’écran suivante, tout ce qui se trouve en dessous des flèches est inséré par le j/s. (Vous pouvez le voir en action ici : https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160 )

Ce que j’observe…

J’utilise le composant Topic List Previews ( GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub ) et mon j/s ne semble pas être appelé.

Sur cette capture d’écran, la chaîne /vmm/gibberish… correspond au contenu brut du <div data-custom="… qui s’affiche car mon j/s n’atteint jamais cette zone via api.decorateCooked(….

La même chose se produit dans les e-mails envoyés…

Ce que je souhaite…

Je ne veux pas en réalité effectuer le remplacement complet. Longue histoire. Je voudrais simplement étendre mon j/s afin qu’il puisse y placer une chaîne statique, plutôt que le charabia brut de mon bloc <div data-custom="….

Existe-t-il une autre méthode api. à laquelle je pourrais me raccrocher ?

[david (David Taylor)]

Malheureusement, il n’existe pas d’API JavaScript pour modifier les « extraits » des sujets dans la liste des sujets. De plus, pour des raisons de sécurité, les composants de thème n’ont aucun accès au contenu rendu côté serveur (par exemple, les e-mails).

Cependant, je me demande si nous ne pourrions pas résoudre ce problème d’une autre manière. Actuellement, vous collez quelque chose comme ceci dans le compositeur :

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

Au lieu de cela, vous pourriez faire quelque chose comme ceci :

<div data-custom="umbdv" data-theme-longstring="/vmm/longstringhere">
  contenu de repli pour les e-mails/extraits
</div>

Ou, si vous voulez faire les choses avec un peu plus de style, vous pourriez utiliser l’encapsulateur BBCode générique :

[wrap=umbdv longstring="/vmm/longstringhere"]
Contenu de repli
[/wrap]

Cela générera automatiquement un div comme ceci :

<div class="d-wrap" data-wrap="umbdv" data-longstring="/vmm/longstringhere" dir="ltr">
<p dir="ltr">Contenu de repli</p>
</div>

Ensuite, vous devrez ajuster le code de votre composant de thème pour qu’il supprime le contenu de repli et le remplace par ce que vous souhaitez afficher.

[craigconstantine]

…oooooooooooh, ça devrait le faire. Je vais bidouiller un peu et je reviens vers vous.

[craigconstantine]

…oui, ça fonctionne à merveille @david, merci !

[pfaffman (Jay Pfaffman)]

Parfois, le ne suffit pas. C’est une excellente réponse, et je suis vraiment sur le point de comprendre suffisamment JavaScript et CSS pour d-wrap mon esprit autour du sujet.