Composant de révélation de balises dans les listes de sujets - Développer/réduire les balises dans les listes de sujets

Dev
15

Vous utilisez ceci dans une classe. Cela ne fonctionnera pas autrement.

Vous voulez alors écrire 3.6.0.beta1, sinon personne ne pourra l’installer pour le moment.

J’ai vérifié un peu. En effet, il n’y a pas de moyen simple d’y parvenir ; cependant, j’ai trouvé une méthode intéressante et simplifiée pour le faire en utilisant l’API.

  • Il utilise le modèle de sujet pour modifier les balises visibles qui seront générées avant que le modèle ne soit généré. Cela signifie aucune manipulation du DOM et aucune dépendance aux paramètres. Selon l’état (revealTags), il renverra la liste d’origine ou une liste partielle.

  • Pour créer le bouton basculant, il utilise l’API pour ajouter une balise avec le HTML d’un bouton (malheureusement, il n’y a pas de sortie de plugin ici). L’événement de clic est géré séparément. Au clic, l’état du basculement est mis à jour (revealTags), et nous déclenchons un nouveau rendu de la liste des balises.

Le grand avantage de cette méthode est que vous n’avez pas à toucher au HTML et à déterminer quoi afficher/masquer avec CSS, en fonction des différents styles.

chrome_lSKqwYt5Z7

Je partage mon code de test ici :

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 « J'aime »