Como implementar a ordenação de tags personalizada

Dev
1

Olá.\n\nEstou tentando realizar uma ordenação personalizada de tags de tópico pelo valor do nome do grupo de tags.\n\nTenho olhado os componentes de tema e acho que esse é o caminho a seguir, mas gostaria de ter uma opinião sobre isso, bem como algumas dicas, já que este seria meu primeiro componente de tema.\n\nAbraços

3 curtidas
2

Acabei usando o campo de descrição da tag para armazenar um inteiro para simular a ordenação que eu queria. O fato é que o grupo de tags não é exposto na estrutura da tag nem no DOM, por isso usei essa forma.

Depois disso, usando um trecho de código de cabeçalho do editor de temas, injetei o seguinte script no DOM.

Isso me permitiu reordenar as tags dinamicamente. Embora seja um “hack” no momento, pelo menos está funcionando.

<script type="text/discourse-plugin" version="0.8">
  api.addTagsHtmlCallback(function(topic, params) {
    const containers = document.querySelectorAll(".discourse-tags");
    for (const container of containers) {
      const children = Array.from(container.children);

      children.sort((a, b) => {
        const orderA = parseInt(a.getAttribute("title"));
        const orderB = parseInt(b.getAttribute("title"));
        return orderA - orderB;
      });

      children.forEach(child => container.appendChild(child));
    }
  }, {priority: 100});
</script>