إضافة زر مباشر إلى الردود الجاهزة في المحرر

مطور
2

نقرتان ليستا عملًا كبيرًا حقًا، ولكن هذه فرصة جيدة لتقديم شرح عام يوثق كيفية العمل مع أزرار المصنّف (composer buttons) مع التركيز على ما تحاول إنجازه.

يتم إضافة الأزرار إلى شريط الأدوات باستخدام طريقة مختلفة في واجهة برمجة التطبيقات (pluginAPI).

يستخدم شريط الأدوات هذه الطريقة plugin-api.js.es6#L375-L391، بينما يستخدم قائمة منبثقة هذه الطريقة plugin-api.js.es6#L396-L411.

يستخدم ملحق الردود الجاهزة (canned replies plugin) طريقة القائمة المنبثقة على النحو التالي:

https://github.com/discourse/discourse-canned-replies/blob/master/assets/javascripts/initializers/add-canned-replies-ui-builder.js.es6#L18-L25

لا يمكنك نقل الزر إلا إذا قمت بتفرع (fork) الملحق - وهو أمر غير موصى به بشدة.

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

يوجد نوعان من الأزرار في شريط الأدوات. النوع الأول هو الأزرار التي تتعامل مع التنسيق مثل عريض و مائل. نظرًا لأنها لا تشبه ما تريد تحقيقه، دعنا نتجاهلها مؤقتًا.

النوع الآخر هو الأزرار التي تُدخل أشياء مثل التواريخ والرموز التعبيرية (emojis). دعنا ننظر إلى زر التاريخ - التقويم.

الآن لدينا مثال يمكن الرجوع إليه. لذا دعنا نحاول إنشاء الزر الجديد.

نبدأ بهذا:

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
  
  });
});

ونضيف سمات زر الردود الجاهزة واحدة تلو الأخرى. للرجوع إليها، هي:

id: "canned_replies_button",
icon: "far-clipboard",
action: "showCannedRepliesButton",
label: "canned_replies.composer_button_text"

id: يسمح لك بإضافة فئات CSS للزر - سنستخدم custom-canned-button.

icon: الأيقونة التي سيستخدمها الزر - سنحافظ عليها كما هي.

label: الأزرار المنبثقة تحتوي على نص بينما أزرار المصنّف لا تحتوي على نص، لذا نحتاج إلى تغيير ذلك إلى title واستخدام نفس القيمة.

action: هنا يتم تعريف ما يفعله الزر. دعنا نجمع كل ذلك معًا:

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
    id: "custom-canned-replies",
    icon: "far-clipboard",
    action: "showCannedRepliesButton",
    title: "canned_replies.composer_button_text"
  });
});

إذا جربت هذا، ستحصل على زر في شريط الأدوات، لكن النقر عليه لن يفعل شيئًا. يحدث هذا لأن الإجراء showCannedRepliesButton غير مُعرَّف. يحدث هذا بسبب سياق مختلف - نظرًا لأنك تقوم بذلك في سمة (theme).

إذا نظرت إلى ملحق الردود الجاهزة، ستلاحظ أن هذا الإجراء مُعرَّف في وحدة تحكم المصنّف (composer controller):

https://github.com/discourse/discourse-canned-replies/blob/master/assets/javascripts/initializers/add-canned-replies-ui-builder.js.es6#L5-L16

لذا فإن الخطوة التالية هي الرجوع إلى وحدة تحكم المصنّف لتكون قادرًا على إرسال هذا الإجراء عند النقر على الزر. يمكنك فعل ذلك على النحو التالي:

const composerController = api.container.lookup("controller:composer");

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
    title: "canned_replies.composer_button_text",
    id: "custom-canned-replies",
    group: "extras",
    icon: "far-clipboard",
    sendAction: () => composerController.send("showCannedRepliesButton")
  });
});

لاحظ أننا استخدمنا نفس النمط من زر التقويم لـ sendAction. الاستثناءان الوحيدان هما بدلاً من هذا:

toolbar.context.send نستخدم composerController.send

ولا نقوم بتمرير الحدث كما لا أعتقد أن ذلك ضروريًا.

هذا يجب أن يمنحك زرًا وظيفيًا بالكامل في شريط الأدوات:

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

أذونات استخدام الردود الجاهزة موجودة هنا:

https://github.com/discourse/discourse-canned-replies/blob/master/assets/javascripts/initializers/add-canned-replies-ui-builder.js.es6#L34-L38

لذا نحتاج فقط إلى تكرار هذه الشروط كشرط لإضافة الزر. لذا شيء مثل هذا:

const currentUser = api.getCurrentUser();
const canUseCannedReplies = currentUser
  ? currentUser.can_use_canned_replies
  : false;

if (!canUseCannedReplies) return;

وهذا سيضمن عرض الزر فقط إذا كان لديك الأذونات المطلوبة.

لذا، دعنا نجمع كل شيء معًا:

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

export default {
  name: "move-canned-button",
  initialize() {
    withPluginApi("0.8.7", api => {
      const currentUser = api.getCurrentUser();
      const canUseCannedReplies = currentUser
        ? currentUser.can_use_canned_replies
        : false;

      if (!canUseCannedReplies) return;

      const composerController = api.container.lookup("controller:composer");

      api.onToolbarCreate(toolbar => {
        toolbar.addButton({
          title: "canned_replies.composer_button_text",
          id: "custom-canned-replies",
          group: "extras",
          icon: "far-clipboard",
          sendAction: () => composerController.send("showCannedRepliesButton")
        });
      });
    });
  }
};

يتم وضع هذا في هذا الملف في مكون السمة:

javascripts/discourse/initializers/move-canned-button.js.es6

إذا كنت تستخدم الميزة الجديدة Split up theme Javascript into multiple files - موصى به بشدة.

أو يمكنك ببساطة إضافة هذا السكربت إلى علامة التبويب الرأس (header tab) في سمتك إذا كنت تقوم بذلك من لوحة المسؤول.

البناء القديم 
<script type="text/discourse-plugin"
        version="0.8">
const currentUser = api.getCurrentUser();
const canUseCannedReplies = currentUser
  ? currentUser.can_use_canned_replies
  : false;

if (!canUseCannedReplies) return;

const composerController = api.container.lookup("controller:composer");

api.onToolbarCreate(toolbar => {
  toolbar.addButton({
    title: "canned_replies.composer_button_text",
    id: "custom-canned-replies",
    group: "extras",
    icon: "far-clipboard",
    sendAction: () => composerController.send("showCannedRepliesButton")
  });
});
</script>

آخر شيء تحتاجه هو إخفاء الزر القديم ويمكنك فعل ذلك على النحو التالي:

.toolbar-popup-menu-options {
  [data-name="Canned replies"] {
    display: none;
  }
}