api: Function for injecting dynamic content on each Tidy render with Handlebars-style rendering behavior about foundry-vtt-tidy-5e-sheets HOT 6 CLOSED

Hooks.on('tidy5e-sheet.renderActorSheet', (sheet, element, data) => {
  element
    .querySelector(`[data-tidy-sheet-part="resources-container"]`)
    ?.insertAdjacentHTML(
      'afterbegin',
      `<div style="display: contents;" data-tidy-render-scheme="handlebars">
        <h2 type="button" style="width: 100%;">Resources for ${data.actor.name}</h2>
      </div>`
    );
});

const api = game.modules.get('tidy5e-sheet').api ?? game.modules.get('tidy5e-sheet-kgar').api;

api.registerCharacterContent(
  api.getSheetPartSelector(api.constants.SHEET_PARTS.RESOURCE),
  'afterbegin',
  new api.models.HtmlContent({
    html: `<span class="test-emoji" style="cursor: pointer; position: absolute; bottom: 0; right: 1rem;">😊</span>`,
    onRender({ app, element, data }) {
      element
        .querySelectorAll('.test-emoji')
        .forEach((el) =>
          el.addEventListener(
            'click',
            (ev) => (ev.currentTarget.innerHTML = '💀')
          )
        );
    },
  })
);

Hooks.once("tidy5e-sheet.ready", (api) => {
  api.registerActorContent(
    new api.models.HtmlContent({
      html: `<a title="Example Button" class="my-custom-button"><i class="fas fa-user"></i></a>`,
      injectParams: {
        selector: api.getSheetPartSelector(
          api.constants.SHEET_PARTS.NAME_CONTAINER
        ),
        position: "beforebegin",
      },
      onContentReady: (params) => {
        console.log("content ready to render", params);
        console.log("my content", params.content);
      },
      onRender: (params) => {
        params.element
          .querySelector(".my-custom-button")
          .addEventListener("click", () => alert("🤺"));
      },
    })
  );
});