Взаимодействие между компонентом темы, 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 )

Что я наблюдаю…

Я использую компонент предпросмотра списка тем ( GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub ), и мой j/s, похоже, не вызывается.

На этом скриншоте строка /vmm/gibberish… — это просто содержимое <div data-custom="…, которое отображается, потому что мой j/s не достигает его через api.decorateCooked(….

То же самое происходит и в рассылках по электронной почте…

Чего бы я хотел…

На самом деле я не хочу полной замены. Долгая история. Я просто хочу расширить свой 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 (обернуть) голову вокруг этого.