¿Reacciones específicas de la categoría en temas y publicaciones?

Soporte del producto
3

Perfecto :slight_smile:

Tengo algo de experiencia con desarrollo en otros entornos, pero estoy explorando si es posible a través de un componente de tema.

Con un poco de ayuda de la IA :sweat_smile: parece que lo tengo funcionando, pero no estoy 100% seguro de si esta es la forma correcta de hacerlo en Discourse:

<script type="text/discourse-plugin" version="0.1">
  api.onPageChange(() => {
    try {
      const isTopicPage = /^\/t\//.test(window.location.pathname);

      // Solo ejecutar en páginas de temas
      if (!isTopicPage) return;

      const allowedCategories = ['ask-a-question']; // Usar slugs de categoría directamente

      // Acceder a los detalles del tema para obtener el slug de la categoría
      const topic = Discourse.__container__.lookup("controller:topic");
      const categorySlug = topic && topic.get("model.category.slug");
      const isAllowedCategory = categorySlug && allowedCategories.includes(categorySlug);

      // Función para ocultar o mostrar el emoji específico
      const toggleReactionEmoji = () => {
        const emoji = document.querySelector("[data-reaction='frog']");

        if (emoji) {
          emoji.style.display = isAllowedCategory ? '' : 'none';
          console.log(`Emoji con data-reaction='frog' ${isAllowedCategory ? 'mostrado' : 'oculto'}.`);
        }
      };

      // Comprobación inicial en caso de que el elemento ya esté en el DOM
      toggleReactionEmoji();

      // Configurar un observador de mutaciones para ocultar/mostrar el emoji según los cambios de categoría
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          mutation.addedNodes.forEach((node) => {
            if (node.nodeType === 1) { // Comprobar si es un nodo de elemento
              const emoji = node.querySelector("[data-reaction='frog']");
              if (emoji) {
                emoji.style.display = isAllowedCategory ? '' : 'none';
                console.log(`Emoji con data-reaction='frog' encontrado en la mutación y ${isAllowedCategory ? 'mostrado' : 'oculto'}.`);
              }
            }
          });
        });
      });

      // Observar el body para cambios en la lista de hijos (por ejemplo, adición de reacciones)
      observer.observe(document.body, { childList: true, subtree: true });

      // Limpiar el observador al navegar
      api.cleanupStream(() => observer.disconnect());

    } catch (error) {
      console.error("Ocurrió un error en el script de alternancia de emoji:", error);
    }
  });
</script>