Componente Tag Reveal nelle liste di argomenti - Espandi/Comprimi tag nelle liste di argomenti

Sviluppatore
15

Lo usi in una classe. Altrimenti non funzionerà.

Allora devi scrivere 3.6.0.beta1, altrimenti nessuno potrà installarlo al momento.

Ho controllato un po’. In effetti, non c’è un modo semplice per ottenere ciò; tuttavia, ho trovato un metodo interessante e semplificato per farlo utilizzando l’API.

  • Utilizza il modello di topic per modificare quali tag visibili verranno generati prima che il template venga generato. Ciò significa nessuna manipolazione del DOM e indipendenza dalle impostazioni. A seconda dello stato (revealTags), restituirà l’elenco originale o uno parziale.

  • Per creare il pulsante di attivazione/disattivazione, utilizza l’API per aggiungere un tag con l’HTML di un pulsante (purtroppo non c’è un plugin outlet qui). L’evento click viene gestito separatamente. Al click, lo stato di attivazione/disattivazione viene aggiornato (revealTags) e viene attivato un re-render dell’elenco dei tag.

Il grande vantaggio di questo metodo è che non devi pasticciare con l’HTML e capire cosa mostrare/nascondere con il CSS, in base ai diversi stili.

chrome_lSKqwYt5Z7

Condivido il mio codice di test qui:

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 Mi Piace