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


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…

    $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, List of Movers Mindset Podcast Episodes - Public - Movers Mindset Forum )

What I’m seeing…

I’m using the Topic List Previews component ( ) 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?

1 Like

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

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

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

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>

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!


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: