Componente de Revelar Tags em Listas de Tópicos - Expandir/Recolher tags em listas de tópicos

Dev
15

Você usa isso em uma classe. Não funcionará de outra forma.

Você quer escrever 3.6.0.beta1 então, caso contrário, ninguém poderá instalá-lo no momento.

Eu verifiquei um pouco. De fato, não há uma maneira direta de conseguir isso; no entanto, encontrei um método interessante e simplificado para fazer isso usando a API.

  • Ele usa o modelo de tópico para alterar quais tags visíveis serão geradas antes que o template seja gerado. Isso significa que não há manipulação de DOM e é independente das configurações. Dependendo do estado (revealTags), ele retornará a lista original ou uma parcial.

  • Para criar o botão de alternância, ele usa a API para adicionar uma tag com o HTML de um botão (infelizmente, não há um plugin outlet aqui). O evento de clique é tratado separadamente. Ao clicar, o estado de alternância é atualizado (revealTags) e acionamos uma nova renderização da lista de tags.

A grande vantagem dessa abordagem é que você não precisa mexer no HTML e descobrir o que mostrar/ocultar com CSS, com base nos diferentes estilos.

chrome_lSKqwYt5Z7

Compartilhando meu código de teste aqui:

import { apiInitializer } from "discourse/lib/api";
import { i18n } from "discourse-i18n";
import { computed } from "@ember/object";

export default apiInitializer((api) => {
  const siteSettings = api.container.lookup("service:site-settings");

  const maxVisibleTags = Math.min(
    settings.max_tags_visible,
    siteSettings.max_tags_per_topic
  );

  let topicModels = {};

  api.modifyClass(
    "model:topic",
    (Superclass) =>
      class extends Superclass {
        revealTags = false;

        init() {
          super.init(...arguments);
          topicModels[this.id] = this;
        }

        @computed("tags")
        get visibleListTags() {
          if (this.revealTags) {
            return super.visibleListTags;
          }
          return super.visibleListTags.slice(0, maxVisibleTags);
        }
      }
  );

  api.addTagsHtmlCallback(
    (topic, params) => {
      if (topic.tags.length <= maxVisibleTags) {
        return "";
      }

      const isExpanded = topic.revealTags;
      const label = isExpanded
        ? i18n(themePrefix("js.tag_reveal.hide"))
        : i18n(themePrefix("js.tag_reveal.more_tags"), {
            count: topic.tags.length - maxVisibleTags,
          });

      return `<a class="reveal-tag-action" role="button" aria-expanded="${isExpanded}">${label}</a>`;
    },
    {
      priority: siteSettings.max_tags_per_topic + 1,
    }
  );

  document.addEventListener("click", (event) => {
    const target = event.target;
    if (!target?.matches(".reveal-tag-action")) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();

    const element =
      target.closest("[data-topic-id]") ||
      document.querySelector("h1[data-topic-id]");
    const topicId = element?.dataset.topicId;
    if (!topicId) {
      return;
    }

    const topicModel = topicModels[topicId];
    if (!topicModel) {
      return;
    }

    topicModel.revealTags = !topicModel.revealTags;
    topicModel.notifyPropertyChange("tags");
  });
});

.reveal-tag-action {
  background-color: var(--primary-50);
  border: 1px solid var(--primary-200);
  color: var(--primary-800);
  font-size: small;
  padding-inline: 3px;
}

.discourse-tags__tag-separator:has(+ .reveal-tag-action) {
  visibility: hidden;
}
2 curtidas