テーマコンポーネント、テーマJavaScript、「プレビュー」間の相互作用

[craigconstantine]

j/s

テーマに独自の j/s を実装しています（Interactive SVG using <object>? - #9 by craigconstantine の解決策です）。将来的には、この j/s を Git リポジトリに移し、適切なテーマコンポーネントとしてインストールする予定です。現状では、単にテーマのヘッダーに j/s を貼り付けています。この問題は、j/s を適切なコンポーネントとしてインストールすれば解決するかもしれませんが、私にはそうは思えません。

私の j/s は、ブラウザに送信される前に DOM を変更します…

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

動作例…

適切な <div data-custom="… を選択し、新しい要素を追加します。例えば、以下のスクリーンショットでは、矢印より下のすべてが j/s によって挿入されたものです（https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160 で動作を確認できます）。

現状の状況…

Topic List Previews コンポーネント（https://github.com/merefield/discourse-topic-list-previews-theme.git）を使用していますが、私の j/s は呼び出されていないようです。

このスクリーンショットでは、/vmm/gibberish… という文字列が、私の j/s が api.decorateCooked(… を介して処理できていないために、生身の <div data-custom="… の内容として表示されています。

メール送信時にも同様の現象が発生します…

希望する動作…

完全な置換は実際には行いたくありません（長い話になります）。単に、私の j/s を拡張して、<div data-custom="… ブロックから生身のガベージではなく、静的な文字列をそこに配置できるようにしたいだけです。

他にフックできる api. メソッドはありますか？

[david (David Taylor)]

残念ながら、トピック一覧のトピック「抜粋」を変更するための JavaScript API は存在しません。また、セキュリティ上の理由から、テーマコンポーネントはサーバーサイドでレンダリングされたコンテンツ（メールなど）にアクセスできません。メールを変更したい場合は、プラグインを使用する必要があります。

ただし、別の方法で解決できるかもしれません。現在、コンポーザーには以下のようなコードを貼り付けているようです。

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

代わりに、以下のように実装することも可能です。

<div data-custom="umbdv" data-theme-longstring="/vmm/longstringhere">
  メールや抜粋用のフォールバックコンテンツ
</div>

あるいは、少し凝ったことをしたい場合は、汎用的な BBCode ラッパー を使用することもできます。

[wrap=umbdv longstring="/vmm/longstringhere"]
フォールバックコンテンツ
[/wrap]

これにより、以下のような div が自動的に生成されます。

<div class="d-wrap" data-wrap="umbdv" data-longstring="/vmm/longstringhere" dir="ltr">
<p dir="ltr">フォールバックコンテンツ</p>
</div>

その後、テーマコンポーネントのコードを調整して、フォールバックコンテンツを削除し、表示したいコンテンツに置き換える必要があります。

[craigconstantine]

…おおお、それで解決ですね。少しいじってみて、また報告します。

[craigconstantine]

…ええ、完璧に動いています @david、ありがとう！

[pfaffman (Jay Pfaffman)]

時には、 だけでは不十分なこともあります。これは素晴らしい回答で、JavaScript と CSS について十分に理解して d-wrap できるようになるのももうすぐです。