How to run code after page has rendered

Dev
1

I want to remove the parenthesis from span.category-topics--posts-count (rendered by GitHub - discourse/discourse-right-sidebar-blocks). I’m trying this api.onPageChange() call, but it’s not getting any countSpans, I think because it’s running before the other theme component has put them on the page.

What can I do? :crying_cat:


  api.onPageChange(() => {
    console.log("page changed");

    const countSpans = document.querySelectorAll(
      "span.category-topics--posts-count"
    );
    console.log("spans", countSpans);
    countSpans.forEach((span) => {
      const currentText = span.textContent.trim();
      const newText = currentText.replace(/[()]/g, "");
      span.textContent = newText;
      const number = parseInt(newText);
      if (isNaN(number)) {
        span.style.padding = "0px";
      } else if (number < 10) {
        span.style.padding = "0px";
      } else {
        span.style.padding = "0px 3px";
      }
    });
  });
});
2 Likes
2

I don’t believe that’s going to work.

you must perform these things via CSS or within the Ember run loop.

what’s stopping you forking that component and customising it to your taste under a different name, loading in a separate Theme Component and then adding it by name in RSB?

2 Likes
3

Laziness, mostly. And when I started it was just going to be a little css that would likely be static and they’d not need to maintain the fork, but yeah, it’s now obviously silly not to fork it.

Thanks

4 Likes