Interaction among theme component, theme javascript, and "previews"

[craigconstantine]

j/s

I have some custom j/s in my theme. (It’s my solution to, Interactive SVG using <object>? - #9 by craigconstantine ) Eventually, I’ll move the j/s to a Git repo, and install it as a proper Theme component. For now, I simply have the j/s pasted into my Theme’s header. I suppose, this problem might go away if I installed this j/s as a proper component, but it doesn’t smell that way to me.

My j/s modifies the DOM before it’s sent to the browser…

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

In action…

It selects appropriate <div data-custom="…, and then adds new elements. For example, in the following screenshot, everything below the arrows, is inserted by the j/s. (You can see it in action here, https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160 )

What I’m seeing…

I’m using the Topic List Previews component ( GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists ) and my j/s doesn’t seem to get called.

In this screenshot, the /vmm/gibberish… string is the bare <div data-custom="… contents showing through because my j/s never gets to it via api.decorateCooked(….

The same thing happens in emails that get sent out…

What I’d like…

I don’t actually want it do the full replacement. Long story. I’d just like to expand my j/s so it can put some static string there, rather than the bare gibberish from my <div data-custom="… block.

Is there some other api. method that I can hook into?

[david (David Taylor)]

Unfortunately there isn’t a javascript API for modifying the ‘excerpts’ of topics in the topic list. Theme components also do not have any access to server-side rendered content (i.e. emails) for security reasons. If you wanted to modify emails, you would have to use a plugin.

However, I wonder if we can solve this in a different way. Right now you are pasting something like this in the composer:

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

Instead, you could do something like this:

<div data-custom="umbdv" data-theme-longstring="/vmm/longstringhere">
  fallback content for emails/excerpts
</div>

Or if you’re feeling super fancy, you could use the generic bbcode wrapper to do it

[wrap=umbdv longstring="/vmm/longstringhere"]
Fallback content
[/wrap]

That will automagically generate a div like

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

Then you will need to tweak your theme component code so that it deletes the fallback content, and replaces it with whatever you want to show.

[craigconstantine]

…oooooooooooh, that would do it. I’ll tinker and report back.

[craigconstantine]

…yeah, works purrfectly @david, thanks!

[pfaffman (Jay Pfaffman)]

Sometimes the just isn’t enough. This is a great answer, and I’m really close to understanding javascript and CSS well enough to d-wrap my head around it.