واجهة برمجة تطبيقات زر تذييل الموضوع

ستتيح لك هذه الـ API الجديدة التي ستُضاف إلى Discourse 2.3 إضافة أزرار في أسفل الموضوع إما كأزرار مضمنة أو داخل {{topic-footer-mobile-dropdown}} دون الحاجة إلى تكرار المنطق.

الاستخدام

api.registerTopicFooterButton({
    // معرف الزر، مطلوب
    id: null,

    // الأيقونة المعروضة على الزر
    icon: null,

    // المسار المحلي لمفتاح خاصية العنوان
    title: null,

    // عنوان مترجم مسبقًا
    translatedTitle: null,

    // المسار المحلي لمفتاح التسمية
    label: null,

    // تسمية مترجمة مسبقًا
    translatedLabel: null,

    // هل يتم عرض هذا الزر في القائمة المنسدلة للجوال أم كزر مضمن؟
    dropdown: false,

    // فئة CSS تُضاف إلى الزر
    classNames: [],

    // الخصائص المحسوبة التي يجب أن تجبر على تحديث حالة الزر
    // على سبيل المثال: ["topic.bookmarked", "topic.category_id"]
    dependentKeys: [],

    // هل يجب عرض هذا الزر؟
    displayed: true,

    // هل هذا الزر معطل؟
    disabled: false,

    // ترتيب العرض، كلما زاد الرقم ظهر أولاً
    priority: 0
  }
);

جميع المفاتيح ما عدا id يمكن أن تكون إما قيمة أو دالة:

icon: "user"
icon() {
  // هنا يكون السياق هو مكون topic-footer-buttons
  مما يسمح لك بالوصول
  // إلى نموذج الموضوع أو this.site على سبيل المثال
  return this.get("topic.some_icon_variable");
}

التركيز على dependentKeys

اعتبر dependentKeys جميع الخصائص المحسوبة التي تحتاجها لبناء الزر الخاص بك. سيتم إعادة عرض الأزرار عند تغيير أحد هذه المفاتيح. بشكل أساسي، في كل مرة تقوم فيها بـ this.get("something") أثناء تعريف زرك، يجب أن يكون something موجودًا في dependentKeys.

التركيز على dropdown

سيُتيح لك مفتاح dropdown تحديد ما إذا كنت تريد إضافة زرك كزر مضمن أم داخل {{topic-footer-mobile-dropdown}}.

كمثال، تنفيذ ينشئ زرًا مضمنًا على سطح المكتب وفي القائمة المنسدلة على الجوال، سيتصرف كالتالي:

dropdown() { return this.site.mobileView; }

ملاحظة: في الوقت الحالي، ستُظهر القائمة المنسدلة فقط على الجوال على أي حال. لذا، فإن هذا مفيد على الأرجح إذا كنت لا تريد أبدًا عرضها في القائمة المنسدلة، أو إذا كنت تريد فرض عرض سطح المكتب في بعض الحالات عند تقديم عرض الجوال.

أمثلة واقعية قليلة

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/initializers/topic-footer-buttons.js.es6#L7

https://github.com/discourse/discourse-code-review/blob/master/assets/javascripts/discourse/initializers/init-code-review.js.es6#L78

19 إعجابًا