Componente de Revelación de Etiquetas en Listas de Temas - Expandir/Contraer etiquetas en listas de temas

Desarrollador
15

Lo usas en una clase. No funcionará de otra manera.

Entonces querrás escribir 3.6.0.beta1, de lo contrario nadie podrá instalarlo en este momento.

He comprobado un poco. De hecho, no hay una forma sencilla de lograr eso; sin embargo, encontré un método interesante y simplificado para hacerlo usando la API.

  • Utiliza el modelo de tema para cambiar qué etiquetas visibles se mostrarán antes de que se genere la plantilla. Significa que no hay manipulación del DOM y es independiente de la configuración. Dependiendo del estado (revealTags), devolverá la lista original o una parcial.

  • Para crear el botón de alternancia, utiliza la API para agregar una etiqueta con el HTML de un botón (desafortunadamente, no hay un plugin outlet aquí). El evento de clic se maneja por separado. Al hacer clic, se actualiza el estado de alternancia (revealTags) y se activa una nueva renderización de la lista de etiquetas.

La gran ventaja de esta manera es que no tienes que meterte con el HTML y averiguar qué mostrar/ocultar con CSS, basándote en los diferentes estilos.

chrome_lSKqwYt5Z7

Comparto mi código de prueba aquí:

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 Me gusta