نافذة معاينة الموضوع

تخصيص مكون السمة
4

بالنسبة لأي شخص يستخدم سمة Reddit-ish، إليك حل نجحت في تطبيقه.

توافق سمة Reddit-ish

ملاحظة سريعة لأي شخص يستخدم سمة Reddit-ish: زر النافذة المنبثقة (modal) نفسه يعمل، لكن مُفعّل الصف (row trigger) الافتراضي لا يعمل.

تكمن المشكلة في أن سمة Reddit-ish تحل محل سلوك صف قائمة المواضيع القياسي، وتتعامل مع النقرات على بطاقة الموضوع بأكملها. وبسبب ذلك، لا يعمل التعامل العادي مع نقرات الصف في النافذة المنبثقة كما هو مقصود.

تغيير إعداد “نافذة معاينة الموضوع” (Topic Preview Modal) إلى:

نوع المُفعّل: زر
منفذ الإضافة: topic-list-after-title

يعمل بشكل صحيح، لأن سمة Reddit-ish تتضمن بالفعل منفذ topic-list-after-title.

للحفاظ على سلوك النقر على البطاقة بأكملها، تركت نافذة معاينة الموضوع في وضع الزر، وقمت بتغيير إجراء openTopic() الموجود في سمة Reddit-ish بحيث يُفعّل زر المعاينة العامل.

إجراء Reddit-ish الأصلي هو:

@action
openTopic(event) {
  if (
    (event.target.nodeName === "A" && !event.target.closest(".raw-link")) ||
    event.target.closest(".badge-wrapper")
  ) {
    return;
  }

  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
  } else {
    navigateToTopic(topic, topic.lastUnreadUrl);
  }
}

قمت بتغييره إلى:

@action
openTopic(event) {
  if (
    (event.target.nodeName === "A" && !event.target.closest(".raw-link")) ||
    event.target.closest(".badge-wrapper") ||
    event.target.closest(".topic-preview-modal__trigger-wrapper")
  ) {
    return;
  }

  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
    return;
  }

  const previewButton = event.currentTarget.querySelector(
    ".topic-preview-modal__trigger-wrapper--button"
  );

  if (previewButton) {
    event.preventDefault();
    event.stopPropagation();
    previewButton.click();
    return;
  }

  navigateToTopic(topic, topic.lastUnreadUrl);
}

يتم عرض مُفعّل زر النافذة المنبثقة كالتالي:

<div class="topic-preview-modal__trigger-wrapper">
  <span
    role="button"
    class="topic-preview-modal__trigger-wrapper--button"
  >

لذلك، لا يعيد هذا أي منطق للنافذة المنبثقة. إنه ببساطة يجعل نقر بطاقة Reddit-ish يُفعّل زر المعاينة العامل الموجود مسبقًا.

النتيجة هي:

  • يفتح نقر بطاقة الموضوع نافذة المعاينة المنبثقة.

  • يفتح نقر عنوان الموضوع نافذة المعاينة المنبثقة.

  • لا يزال زر المعاينة يعمل.

  • لا يزال النقر مع Cmd/Ctrl يفتح الموضوع العادي في علامة تبويب جديدة.

  • تستمر الروابط العادية مثل الفئة وغيرها في العمل بشكل طبيعي.

  • إذا لم يكن زر المعاينة موجودًا، تعود سمة Reddit-ish إلى التنقل العادي في المواضيع.

لذلك، تعمل النافذة المنبثقة الأساسية بشكل جيد مع سمة Reddit-ish؛ عدم التوافق محدد مع مُفعّل الصف الافتراضي.

كما قمت بإخفاء الزر باستخدام

.topic-preview-modal__trigger-wrapper {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
3 إعجابات