TyphonJS•2y ago

How do I get the elementRoot of a ChatMessage?

SvelteApplication provides elementRoot prop to components that implement it, which is very useful. I'm looking to get something similar for my Svelte chat message templates. I'm using this in index.js

Hooks.on('renderChatMessage, (message, html) => {
    message._svelteComponent = new SurgeRoll(
      {
        target: html[0],
        props: {
          surgeMessage,
          messageId: message._id
        }
      }
    )
}

Hooks.on('renderChatMessage, (message, html) => {
    message._svelteComponent = new SurgeRoll(
      {
        target: html[0],
        props: {
          surgeMessage,
          messageId: message._id
        }
      }
    )
}

SurgeRoll.svelte does this:

<script>
  import * as ChatComponents from "~/view/chatmessage/rollchat";
  export let surgeMessage;
</script>

<svelte:component this={ChatComponents[surgeMessage.chatTemplate]} {...$$props} />

<script>
  import * as ChatComponents from "~/view/chatmessage/rollchat";
  export let surgeMessage;
</script>

<svelte:component this={ChatComponents[surgeMessage.chatTemplate]} {...$$props} />

The svelte:component is the component in which I want to get hold of that root element. Specifically I want to be able to do something like:

elementRoot.style.setProperty("--sheet-color", owner.color);

elementRoot.style.setProperty("--sheet-color", owner.color);

... which I'm currently using successfully in my SvelteApplication ActorSheet component.

4 Replies

TyphonJS (Michael)•2y ago

elementRoot is a prop of the component ApplicationShell, so you are in full control with your own components for chat messages.

geoidesicOP•2y ago

Ok I don't understand what ApplicationShell has to do with the above? (Nor where to find it)

TyphonJS (Michael)•2y ago

It doesn't and you are not using it in this case. If you are not using it there is no elementRoot to bind. I suggest though that you check out the applyStyles action from @typhonjs-fvtt/runtime/svelte/action This import will change in the coming release. Unfortunately I don't have time right now to have a lengthy discussion. I need to finish this release up absolutely by tomorrow.

geoidesicOP•2y ago

Thanks I managed to get it working using style-props for the Chat Message: https://svelte.dev/docs/component-directives#style-props However, I've been looking at applyStyles within the context of Application Shell and haven't quite figured out how to get it to apply the styles. I tried:

 stylesApp = `--sheet-color="${getActorOwner($documentStore).color}"`;

 stylesApp = `--sheet-color="${getActorOwner($documentStore).color}"`;

and then

ApplicationShell(bind:elementRoot bind:stylesApp)

ApplicationShell(bind:elementRoot bind:stylesApp)

And I can see that the value is reaching ApplicationShell's props but it's not populating to the rendered style property for the app. Maybe it's the wrong type. Should be an object I guess. Yup! That did it 🙂

Gaming

Programming

How do I get the elementRoot of a ChatMessage?