¿Cómo implementar el ordenamiento de etiquetas personalizado?

Desarrollador
1

Hola.\n\nEstoy intentando realizar un orden personalizado de las etiquetas de temas por el valor del nombre de su grupo de etiquetas.\n\nHe estado investigando los componentes de temas y creo que esa es la forma de proceder, pero me gustaría tener alguna opinión al respecto, así como alguna indicación, ya que este sería mi primer componente de tema.\n\nSaludos.

3 Me gusta
2

Terminé usando el campo de descripción de la etiqueta para almacenar un entero y simular el orden que quería. La cuestión es que el grupo de etiquetas no está expuesto en la estructura de etiquetas ni en el DOM, por eso utilizo esta forma.

Después de eso, utilizando un fragmento de código de encabezado del editor de temas, inyecté el siguiente script en el DOM.

Esto me permitió reordenar las etiquetas dinámicamente. Si bien es un “hack” por ahora, al 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>