j/s I have some custom j/s in my theme. (It’s my solution to, Interactive SVG using ? - #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 ) [Screen Shot 2021-05-13 at 08.03.55] 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 · GitHub ) 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(…. [Screen Shot 2021-05-13 at 08.02.55] The same thing happens in emails that get sent out… [e58e96d4c014c7676c4e2844db707b7831c61e09] 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?

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: /vmm/longstringhere Instead, you could do something like this: fallback content for emails/excerpts 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 Fallback content 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.

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

…yeah, works purrfectly @david, thanks! [Screen Shot 2021-05-14 at 08.01.26]

Sometimes the :heart: 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. :beers:

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

Development

craigconstantine (Craig Constantine) May 14, 2021, 12:02pm 4

…yeah, works purrfectly @david, thanks!

Topic		Replies	Views
Anything like api.decoreateCooked() for topics displayed via Page Publishing? Development	4	687	April 9, 2023
How to modify the preview with javascript? Development	4	751	March 9, 2021
Modernizing inline script tags for templates & JS API Development dev-news	46	6215	March 25, 2026
Topic Template Placeholder Text theme component Theme component	60	7732	August 21, 2026
Using api from custom component Development plugin-api	2	447	April 19, 2024

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

Related topics