Category specific topic and post reactions?

Support
1

Is it possible to have category specific topic and post reactions?

I’m not finding anything out of the box and no existing components.

If it’s not possible currently, what would be the steps to achieve something like this?

2

Hey Noah,

You are correct, there isn’t a way to currently show different reactions for posts/topics based on a certain category.

Your best bet is to ask in Marketplace

1 Like
3

Perfect :slight_smile:

I have some experience with dev work in other environments, but exploring if it’s possible via a theme component.

With a little help from AI :sweat_smile: I seem to have it working, but not 100% sure if this is accurate on the way it should be achieved in Discourse:

<script type="text/discourse-plugin" version="0.1">
  api.onPageChange(() => {
    try {
      const isTopicPage = /^\/t\//.test(window.location.pathname);
      
      // Only run on topic pages
      if (!isTopicPage) return;

      const allowedCategories = ['ask-a-question']; // Use category slugs directly

      // Access the topic details to get the category slug
      const topic = Discourse.__container__.lookup("controller:topic");
      const categorySlug = topic && topic.get("model.category.slug");
      const isAllowedCategory = categorySlug && allowedCategories.includes(categorySlug);

      // Function to hide or show the specific emoji
      const toggleReactionEmoji = () => {
        const emoji = document.querySelector("[data-reaction='frog']");
        
        if (emoji) {
          emoji.style.display = isAllowedCategory ? '' : 'none';
          console.log(`Emoji with data-reaction='frog' ${isAllowedCategory ? 'shown' : 'hidden'}.`);
        }
      };

      // Initial check in case the element is already in the DOM
      toggleReactionEmoji();

      // Set up a mutation observer to hide/show emoji based on category changes
      const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          mutation.addedNodes.forEach(node => {
            if (node.nodeType === 1) { // Check if it's an element node
              const emoji = node.querySelector("[data-reaction='frog']");
              if (emoji) {
                emoji.style.display = isAllowedCategory ? '' : 'none';
                console.log(`Emoji with data-reaction='frog' found in mutation and ${isAllowedCategory ? 'shown' : 'hidden'}.`);
              }
            }
          });
        });
      });

      // Observe the body for child list changes (e.g., reactions being added)
      observer.observe(document.body, { childList: true, subtree: true });

      // Clean up the observer when navigating away
      api.cleanupStream(() => observer.disconnect());

    } catch (error) {
      console.error("An error occurred in the emoji toggle script:", error);
    }
  });
</script>
1 Like