Tag-Reveal-Komponente in Themenlisten – Tags in Themenlisten erweitern/zusammenklappen

Entwickler
15

Sie verwenden dies in einer Klasse. Es funktioniert sonst nicht.

Sie möchten dann 3.6.0.beta1 schreiben, sonst kann es im Moment niemand installieren.

Ich habe ein wenig nachgesehen. Tatsächlich gibt es keine einfache Möglichkeit, dies zu erreichen; ich habe jedoch eine interessante und vereinfachte Methode gefunden, dies mit der API zu tun.

  • Sie verwendet das Topic-Modell, um zu ändern, welche sichtbaren Tags ausgegeben werden, bevor die Vorlage generiert wird. Das bedeutet keine DOM-Manipulation und ist einstellungsunabhängig. Abhängig vom Zustand (revealTags) gibt sie die ursprüngliche Liste oder eine teilweise Liste zurück.

  • Um den Umschaltknopf zu erstellen, verwendet sie die API, um ein Tag mit dem HTML eines Knopfes hinzuzufügen (leider gibt es hier keinen Plugin-Outlet). Das Klickereignis wird separat behandelt. Beim Klicken wird der Umschaltzustand aktualisiert (revealTags) und wir lösen ein erneutes Rendern der Tag-Liste aus.

Der große Vorteil dieser Methode ist, dass Sie sich nicht mit dem HTML herumschlagen und herausfinden müssen, was basierend auf den verschiedenen Stilen mit CSS angezeigt/verborgen werden soll.

chrome_lSKqwYt5Z7

Ich teile hier meinen Testcode:

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 „Gefällt mir“