تثبيت رؤية إشعار الموضوع الجديد أو المحدث

[Don]

مرحباً،

قد يكون هذا مفيداً إذا تم تثبيت شريط شاهد x موضوعاً جديداً أو محدّثاً في أعلى الصفحة أسفل الرأس، بحيث تظهر فوراً أثناء التمرير عبر قائمة المواضيع. عند النقر على الشريط، سيقفز إلى الأعلى لتحميل المواضيع الجديدة أو المحدّثة.

يعمل الجزء الثابت بشكل ممتاز مع هذا الكود

#list-area .show-more.has-topics {
  position: sticky;
  top: var(--header-offset);
}

أما الجزء الآخر (جافا سكريبت) الذي سيكون دالة للنقر للقفز إلى الأعلى أو التمرير إلى القمة، فأنا لا أعرف كيفية تنفيذه أو ما هي أفضل طريقة للقيام بذلك.

وجدت هذا القسم في القالب discovery/topics.hbs و discovery/categories.hbs. إذا قمت بتعديل href من href="/" قد يعمل (غير متأكد، لم أجرب ذلك) ولكن مع هذا، سيتم التحميل في كل مرة وكأنك نقرت على الشعار.

app/assets/javascripts/discourse/app/templates/discovery/topics.hbs

شكراً لمساعدتكم

[Johani (Joe)]

@Don

إذا قمت بتعديل a href إلى a href="/" فقد يعمل (لست متأكدًا، لم أجرب ذلك) ولكن مع هذا، كل مرة يتم فيها التحميل، يحدث الأمر كما لو نقرت على الشعار.

نعم، إضافة عنوان URL ستسبب التنقل لأنه لا توجد منطقية لاعتراض الحدث.

الرابط يستدعي إجراءً في Ember. جميع الإجراءات في Discourse قابلة للتوسيع. لذا، فهي تعمل كخطافات تخصيص بطريقة ما. إذن، كيف تعدّل إجراءً؟ حسنًا، دعنا نتحقق مما يفعله أولاً.

ابحث على GitHub أو محليًا عن اسم الإجراء. تُعرّف الإجراءات دائمًا في ملفات JS ويتم الإشارة إليها في Handlebars. نريد رؤية التعريف، لذا نضيق نطاق البحث إلى ملفات JS فقط.

Repository search results · GitHub

ستحصل على أربعة ملفات. أيها يجب أن تنظر إليه؟ تريد تخصيص قالب

discovery/topics.hbs

إذن،

discovery/topics.js

هو ما تريد النظر إليه.

app/assets/javascripts/discourse/app/controllers/discovery/topics.js

هل أي من هذا الكود مفيد؟ لا، لكننا الآن نعرف مكان تعريف الإجراء. إذن، دعنا نعدله.

discovery/topics.js هو فئة Ember. يمكنك تعديل فئات Ember باستخدام طريقة في plugin-api تسمى… modifyClass

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L166-L195

نحن نعرف بالفعل الفئة التي نريد تعديلها. إنها discovery/topics. نحتاج إلى معرفة نوع الفئة. لذا، دعنا نتحقق من دليل الملفات.

discourse/app/controllers/discovery/topics.js

إنه وحدة تحكم (controller).

نعلم أيضًا أننا نريد تعديل إجراء showInserted في تلك الفئة. لذا، نبدأ بهذا.

api.modifyClass("controller:discovery/topics", {
  pluginId: 'sticky-new-topics-banner',
  actions: {
    showInserted() {
      // لنقم ببعض العمل
    }
  }
});

يمكنك بعد ذلك إضافة أي كود تريده لتمرير النافذة عندما يضغط المستخدم على شريط “المواضيع الجديدة”. لقد اخترت شيئًا مثل هذا.

const listControls = document.querySelector(".list-controls");
listControls.scrollIntoView();

يمكنك قراءة المزيد حول scrollIntoView() هنا.

ثم تضيف ذلك إلى طريقة plugin-api كما يلي.

api.modifyClass("controller:discovery/topics", {
  pluginId: 'sticky-new-topics-banner',
  actions: {
    showInserted() {
+     const listControls = document.querySelector(".list-controls");
+     listControls.scrollIntoView();
    }
  }
});

إذن، هل انتهينا؟ لا. هذا يكسر Discourse لأنك تتجاوز الإجراء بالكامل. عند النقر على الرابط، سيتم التمرير إلى عنصر list-controls، لكنه لن يحمل المواضيع الجديدة. لماذا؟ لأن الكود في النواة لم يعد يُطبَّق. أعني، هذا الشيء

app/assets/javascripts/discourse/app/controllers/discovery/topics.js

إذن، كيف تصلح ذلك؟ بهذا السطر البسيط

this._super(...arguments);

لا تحتاج إلى نسخ أي كود من النواة إذا كنت تريد فقط إضافة إليه. قم بعملك، ثم أضف هذا السطر. كل ما يفعله هو التأكد من تطبيق الكود من النواة.

api.modifyClass("controller:discovery/topics", {
  pluginId: 'sticky-new-topics-banner',
  actions: {
    showInserted() {
     const listControls = document.querySelector(".list-controls");
     listControls.scrollIntoView();
+
+    this._super(...arguments);
    }
  }
});

إذا جربت هذا، فسترى أن كل شيء يعمل بشكل رائع تقريبًا، باستثناء… أن الرأس يتداخل مع list-controls. لماذا؟ لأن الرأس مضبوط على sticky.

يمكنك إصلاح ذلك بعدة طرق في JS - احسب الارتفاع، احصل على الإزاحة، استورد مساعدًا من Discourse… إلخ. لن أدخل في التفاصيل.

الأسهل هو CSS باستخدام scroll-margin-top، ويمكنك قراءة المزيد عنها هنا.

إذن، نضيف هذا

.list-controls {
  scroll-margin-top: calc(var(--header-offset) * 2);
}

باللغة الإنجليزية: عند النقر على الرابط، قم بالتمرير إلى أعلى list-controls - 2 × ارتفاع الرأس، حتى لا يتداخل ويترك مساحة صغيرة تحته.

إذن، دعنا نجمع كل هذا معًا.

علامة التبويب الرأس المشتركة

<script type="text/discourse-plugin" version="0.8">
api.modifyClass("controller:discovery/topics", {
  pluginId: "sticky-new-topics-banner",
  actions: {
    showInserted() {
      const listControls = document.querySelector(".list-controls");
      listControls.scrollIntoView();
      this._super(...arguments);
    }
  }
});
</script>

CSS المشترك

#list-area {
  // للهاتف المحمول تخطيط مختلف
  .alert-info,
  .show-more.has-topics {
    position: sticky;
    // Safari يكون أحيانًا متطلبًا بدون البادئة
    position: -webkit-sticky;
    top: var(--header-offset);
    // يجب أن يكون الشريط فوق المحتوى
    z-index: z("header");
  }
}

.list-controls {
  scroll-margin-top: calc(var(--header-offset) * 2);
}

[Don]

شكرًا لك يا @Johani! إنه مفيد جدًا لي، وأعتقد أنني فهمت أخيرًا الكثير من الأمور. أعجبني جدًا إجاباتك التفصيلية لأننا نستطيع التعلم الكثير منها، وكيف تعمل الأشياء، وبالطبع أنها تعمل بشكل مثالي. شكرًا لك مرة أخرى!