피드백 요청: 주제 목록의 태그 공개 컴포넌트 - 주제 목록에서 태그 확장/축소

개발
15

클래스 안에서 이 방법을 사용합니다. 그 외에는 작동하지 않습니다.

그렇다면 3.6.0.beta1로 작성해야 합니다. 그렇지 않으면 현재로서는 아무도 설치할 수 없습니다.

조금 찾아보았습니다. 실제로 이를 달성하는 직접적인 방법은 없지만, API를 사용하여 이를 수행하는 흥미롭고 단순화된 방법을 발견했습니다.

  • 토픽 모델을 사용하여 템플릿이 생성되기 전에 출력될 가시적 태그를 변경합니다. 이는 DOM 조작이 필요 없으며 설정에 무관합니다. 상태(revealTags)에 따라 원래 목록 또는 일부 목록을 반환합니다.

  • 토글 버튼을 만들기 위해, 버튼의 HTML을 가진 태그를 추가하는 API를 사용합니다(불행히도 여기에는 플러그인 아웃렛이 없습니다). 클릭 이벤트는 별도로 처리됩니다. 클릭 시 토글 상태(revealTags)가 업데이트되고, 태그 목록의 재렌더링을 트리거합니다.

이 방식의 큰 장점은 HTML을 만지지 않아도 되고, 다양한 스타일에 따라 CSS로 무엇을 표시/숨길지 파악할 필요가 없다는 점입니다.

chrome_lSKqwYt5Z7

제 테스트 코드를 여기에 공유합니다:

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;
}