È questo il modo corretto per creare un componente tema?

Sviluppatore
1

Ho esperienza nella creazione di soluzioni personalizzate con altre piattaforme/framework e voglio capire se questo è il modo corretto per creare un componente tema in Discourse.

Sembra funzionare, ma non significa necessariamente che sia il modo corretto.

In breve, questo dovrebbe nascondere la reazione a seconda della categoria in cui si trova un argomento. È il modo giusto per farlo?

<script type="text/discourse-plugin" version="0.1">
$(document).ready(function() {
    try {
      const isTopicPage = /^\/t\//.test(window.location.pathname);
      
      if (!isTopicPage) return;

      const allowedCategories = ['ask-a-question'];

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

      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'}.`);
        }
      };

      toggleReactionEmoji();

      const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          mutation.addedNodes.forEach(node => {
            if (node.nodeType === 1) {
              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'}.`);
              }
            }
          });
        });
      });

      observer.observe(document.body, { childList: true, subtree: true });

      api.cleanupStream(() => observer.disconnect());

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

Sebbene questo modo di fare le cose sia tecnicamente possibile, non è l’approccio ideale.

Invece di usare tag script e $(document).ready di jQuery, sarebbe meglio lavorare correttamente con il sistema di rendering di Ember.

Per iniziare, sarebbe bene creare un repository di componenti tematici con una corretta struttura di cartelle per il tuo tema-component. Dai un’occhiata alla discourse_theme CLI poiché questa creerà la struttura per te e ti renderà facile sviluppare il componente. (In alternativa, c’è anche lo scheletro del tema se hai bisogno solo della struttura e non di altri vantaggi della CLI del tema).

Da qui, utilizzerei gli strumenti che Discourse ha a disposizione per l’estensibilità come apiInitializers, la pluginAPI, i plugin outlet, ecc. per ottenere ciò che stai cercando di fare.

Il modo migliore per imparare queste cose è consultare le Guide per sviluppatori qui su Meta (in particolare le sezioni sui temi/componenti tematici). Inoltre, ti consiglio di consultare la categoria Theme component e trovare i loro repository GitHub. Esaminare il loro codice e come realizzano le cose ti aiuterà anche.

Spero che questo aiuti!

7 Mi Piace
3

Se questo è il tuo obiettivo, puoi farlo con semplice CSS:

body.category-ask-a-question .discourse-reactions-picker.frog {
  display: none;
}
5 Mi Piace