إظهار مكون العلامة في قوائم المواضيع - توسيع/طي العلامات في قوائم المواضيع

مطور
15

أنت تستخدم هذا في فئة. لن يعمل بخلاف ذلك.

تريد كتابة 3.6.0.beta1 بعد ذلك، وإلا فلن يتمكن أحد من تثبيته في الوقت الحالي.

لقد تحققت قليلاً. بالفعل، لا توجد طريقة مباشرة لتحقيق ذلك؛ ومع ذلك، وجدت طريقة مثيرة للاهتمام ومبسطة للقيام بذلك باستخدام واجهة برمجة التطبيقات (API).

  • يستخدم نموذج الموضوع لتغيير العلامات المرئية التي سيتم إخراجها قبل إنشاء القالب. هذا يعني عدم وجود معالجة DOM وإعدادات مستقلة. اعتمادًا على الحالة (revealTags)، سيعيد القائمة الأصلية أو قائمة جزئية.

  • لإنشاء زر التبديل، يستخدم واجهة برمجة التطبيقات (API) لإضافة علامة مع HTML لزر (للأسف، لا يوجد منفذ إضافي للمكون الإضافي هنا). يتم التعامل مع حدث النقر بشكل منفصل. عند النقر، يتم تحديث حالة التبديل (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;
}
إعجابَين (2)