إجراء تغييرات مخصصة على الشريط الجانبي برمجياً

مطور
,
1

هذه ميزة رائعة، ولكن ماذا لو كان محتوى قسم الشريط الجانبي المخصص يحتاج إلى إنشائه برمجيًا؟ لقد حققت ذلك بطريقة مشابهة لطريقة @Olya_Fursova أعلاه، فقط أن المحتوى يتم إنشاؤه عن طريق الاستعلام من واجهة برمجة التطبيقات (API) ثم عرض الروابط، بعضها للفئات وبعضها مباشرة لمواضيع معينة. مشكلتان واجهتني هما:

  • إذا كان الشريط الجانبي مخفيًا عند عرض الصفحة في البداية، فلن يتم عرض المحتوى الديناميكي نظرًا لعدم وجود حاوية الشريط الجانبي. أيضًا، عندما يتم عرض الشريط الجانبي في البداية ثم يتم طيه وإظهاره مرة أخرى، يختفي المحتوى الديناميكي لأن حاوية الشريط الجانبي يتم إعادة عرضها دون تنفيذ المنطق المخصص. سؤال: هل هناك أي طريقة للربط بعملية عرض الشريط الجانبي لتنفيذ الكود المخصص الخاص بي كلما تم عرض الشريط الجانبي؟
  • عند النقر على الروابط التي أضيفها إلى الشريط الجانبي برمجيًا، يتم تحديث الصفحة بالكامل. سؤال: هل هناك أي طريقة لمنع تحديث الصفحة بالكامل عند النقر على أحد الروابط المخصصة في الشريط الجانبي؟

سيكون من الرائع حقًا إذا كانت هناك طريقة لتعديل الشريط الجانبي برمجيًا!

إعجابَين (2)
2

لقد قمنا ببناء واجهة برمجة تطبيقات (API) لإضافة أقسام مخصصة للشريط الجانبي أيضًا

هناك بعض الأمثلة في التعليقات هنا: discourse/app/assets/javascripts/discourse/app/lib/plugin-api.js at 00ab94bf53b784478d0aa7744bf3bb2d5b527580 · discourse/discourse · GitHub

تم وضع علامة تجريبية على هذا ولكنه يجب أن يكون آمنًا للاستخدام (نحن نستخدمه لإضافة محتوى الدردشة إلى الشريط الجانبي عند تمكينه، على سبيل المثال)

6 إعجابات
3

هذا يبدو مثيراً للاهتمام، شكراً! سيستغرق الأمر بعض الوقت لفهمه حقاً، على سبيل المثال، لم أفهم بعد آلية التوجيه. بالإضافة إلى ذلك، يبدو أن الروابط في القسم يمكن أن تكون مجرد قائمة مسطحة، صحيح؟ ما أحاول تحقيقه حالياً هو شيء كهذا، أي مستوى واحد من المسافة البادئة:

image
image234×292 1.84 KB

هل هذا شيء يمكنني تحقيقه باستخدام واجهة برمجة التطبيقات الجديدة لأقسام الشريط الجانبي المخصصة؟

إعجاب واحد (1)
4

لا، لم نقم ببناء أي نوع من المسافات البادئة في الشريط الجانبي افتراضيًا… ولكن طالما يمكنك ترتيب أقسامك بالترتيب الذي تريده باستخدام واجهة برمجة التطبيقات (API)، أعتقد أنه يمكن التعامل مع المسافات البادئة باستخدام تنسيق CSS؟

5

بعد البحث في الأمر بشكل أعمق قليلاً، أنا واثق من أن هذا سيعمل، نعم! تحديي الآن هو أن قائمة الروابط ديناميكية ويمكن أن تتغير بشكل محتمل مع كل تغيير في الصفحة. نهجي الساذج في استدعاء api.addSidebarSection من داخل api.onPageChange لا يعمل لأن (أ) الشريط الجانبي يتم تحديثه فقط عندما يتم إعادة عرضه عن طريق إخفائه وإظهاره مرة أخرى و (ب) تتكرر الأقسام لأن api.addSidebarSection لا يهتم إذا تم إعادة استخدام مفتاح الاسم.

هل هناك أي فرصة يمكنني من خلالها تحقيق قسم شريط جانبي يتم تحديثه عند كل انتقال للصفحة باستخدام واجهة برمجة التطبيقات الجديدة؟

إعجاب واحد (1)
6

يمكنك إلقاء نظرة على كيفية دمج المكون الإضافي للدردشة مع الشريط الجانبي:

في هذه الحالة، يتم الاحتفاظ بحالة الروابط في كائن الخدمة وكلما تغيرت الحالة، يتم تحديث الشريط الجانبي:

قد يكون الحل المحتمل هو الاشتراك في حدث تغيير الصفحة وتحديث الروابط. قد يبدو الكود الزائف كالتالي:

import { tracked } from "@glimmer/tracking";

api.addSidebarSection(
  (BaseCustomSidebarSection, BaseCustomSidebarSectionLink) => {
    const TestSectionLink = class extends BaseCustomSidebarSectionLink {
      // define your custom link properties here
    };

    const SidebarTestSection = class extends BaseCustomSidebarSection {
      @tracked links = [];

      constructor() {
        super(...arguments);

        this.#updateLinks();
        this.onAppEvent("page:changed", () => this.#updateLinks());
      }

      get newLinksArray() {
        // list of links based on current URL
      }

      #updateLinks() {
        this.links = this.newLinksArray.map(
          (link) =>
            new TestSectionLink({
              link,
            })
        );
      }

      get sectionLinks() {
        return this.links;
      }
    };
    return SidebarTestSection;
  }
);
6 إعجابات