الحالة النشطة لا تعمل للروابط المضافة في مكون الشريط الجانبي

مطور
1

مرحباً، أنا أضيف بعض الفئات كروابط فردية إلى الشريط الجانبي لـ Discourse، ولكن عندما أنقر على هذه الروابط، على عكس الروابط الأصلية الأخرى في هذا المكون، فإن حالة CSS النشطة لا تعمل للروابط الفردية أو روابط الأقسام. نظرًا لأن الحالة النشطة لا تعمل، لا يمكن للزوار تحديد الصفحة التي يعرضونها. هل هناك طريقة لإصلاح هذا؟

الحالة النشطة تعمل:

image
image680×112 1.54 KB

الحالة النشطة لا تعمل
image

3 إعجابات
2

كحل مؤقت، يمكنك استخدام هذا المُهيئ في المكون/الإضافة الخاصة بك:

import { withPluginApi } from "discourse/lib/plugin-api";

/**
 * دور هذا المُهيئ هو إضافة فئة "active" إلى رابط قسم الشريط الجانبي
 * عندما تتطابق الصفحة الحالية مع عنوان URL الخاص بالرابط. من الناحية النظرية، يمكن أن يتعامل Discourse الأساسي مع هذا،
 * ولكن في الوقت الحالي لا يفعل ذلك للروابط المخصصة، لذلك ننفذه هنا.
 *
 * @see https://meta.discourse.org/t/active-state-not-working-for-added-links-in-the-sidebar-component/323422
 */
function initialize(api) {
  // محدد روابط أقسام الشريط الجانبي التي ليست طرق عرض Ember. يبدو
  // أن طرق عرض Ember تحصل على معالجة الحالة النشطة الخاصة بها على عكس الروابط المخصصة.
  const LINK_SELECTOR = ".sidebar-section-link:not(.ember-view)";
  const CLASS_ACTIVE = "active";
  const applyClass = () => {
    document.querySelectorAll(LINK_SELECTOR).forEach((link) => {
      const href = link.getAttribute("href");
      const toggle = window.location.pathname === href;
      link.classList.toggle(CLASS_ACTIVE, toggle);
    });
  };
  // تطبيق مرة واحدة
  applyClass();
  // إعادة التطبيق أيضًا عند تغيير الصفحة (رخيص + مرن)
  api.onPageChange(applyClass);
}

export default {
  name: "sidebar-section-link-active-class",

  initialize() {
    withPluginApi(initialize);
  },
};