يأتي Discourse 3.1.0.beta6 بواجهة برمجة تطبيقات جديدة تمامًا تعتمد على المكون <DModal> .
هذا يحل محل واجهة برمجة التطبيقات القديمة المستندة إلى المتحكم، والتي تم إيقافها الآن. إذا كانت لديك نوافذ منبثقة موجودة تستخدم واجهات برمجة التطبيقات القديمة، فراجع دليل الترحيل هنا.
عرض نافذة منبثقة
يتم عرض النوافذ المنبثقة عن طريق تضمين المكون <DModal> في قالب handlebars. إذا لم يكن لديك قالب مناسب بالفعل، فراجع Using Plugin Outlet Connectors from a Theme or Plugin.
قد تبدو النافذة المنبثقة البسيطة شيئًا كهذا:
<DButton
@translatedLabel="Show Modal"
@action={{fn (mut this.modalIsVisible) true}}
/>
{{#if this.modalIsVisible}}
<DModal @title="My Modal" @closeModal={{fn (mut this.modalIsVisible) false}}>
Hello world, this is some content in a modal
</DModal>
{{/if}}
mutهنا كطريقة لتعيين قيمة خاصة بـ hbs فقط. يمكنك أيضًا تعيينmodalIsVisibleباستخدام أي طريقة Ember قياسية أخرى.
سينشئ هذا المثال نافذة منبثقة بسيطة كهذه:
التغليف في مكون
قبل إدخال المزيد من التعقيد، من الأفضل عادةً تغليف النافذة المنبثقة الجديدة في تعريف المكون الخاص بها. دعنا ننقل عناصر <DModal> إلى مكون جديد <MyModal />
{{! components/my-modal.hbs }}
<DModal @title="My Modal" @closeModal={{@closeModal}}>
Hello world, this is some content in a modal
</DModal>
سيسمح لك تقديم ملف مكون .js مصاحب بإدخال منطق وحالة أكثر تعقيدًا.
للاستفادة من المكون الجديد، قم بتحديث موقع الاستدعاء للإشارة إليه، مع التأكد من تمرير وسيطة @closeModal.
<DButton
@translatedLabel="Show Modal"
@action={{fn (mut this.modalIsVisible) true}}
/>
{{#if this.modalIsVisible}}
<MyModal @closeModal={{fn (mut this.modalIsVisible) false}} />
{{/if}}
إضافة تذييل
تحتوي العديد من النوافذ المنبثقة على نوع من الدعوة إلى اتخاذ إجراء. في Discourse، تميل هذه إلى أن تكون موجودة في أسفل النافذة المنبثقة. لجعل هذا ممكنًا، يحتوي DModal على عدد من ‘الكتل المسماة’ التي يمكن عرض المحتوى بداخلها. إليك المثال المحدث ليشمل زرين في التذييل، أحدهما هو زر DModalCancel القياسي الخاص بنا.
<DModal @title="My Modal" @closeModal={{@closeModal}}>
<:body>
Hello world, this is some content in a modal
</:body>
<:footer>
<DButton class="btn-primary" @translatedLabel="Submit" />
<DModalCancel @close={{@closeModal}} />
</:footer>
</DModal>
عرض نافذة منبثقة من سياق غير hbs
من الناحية المثالية، يجب عرض مثيلات <DModal> من داخل قالب handlebars الخاص بـ Ember باستخدام التقنية التصريحية الموضحة أعلاه. إذا لم يكن ذلك ممكنًا لحالة الاستخدام الخاصة بك (على سبيل المثال، تحتاج إلى تشغيل نافذة منبثقة من أنظمة العرض القديمة ‘raw-hbs’ أو ‘widget’ الخاصة بـ Discourse)، فيمكن القيام بذلك عن طريق حقن خدمة modal واستدعاء modal.show().
تأكد من أنك قمت بتغليف النافذة المنبثقة الخاصة بك في المكون الخاص بها كما هو موضح أعلاه. ثم، قم بتشغيل النافذة المنبثقة عن طريق تمرير مرجع لفئة المكون الخاص بك إلى showModal:
import MyModal from "discourse/components/my-modal";
// (حقن خدمة modal في المكان المناسب)
// أضف هذا الاستدعاء كلما أردت فتح النافذة المنبثقة.
// سيتم تمرير وسيطة `@closeModal` إلى المكون الخاص بك تلقائيًا.
this.modal.show(MyModal);
// اختياريًا، قم بتمرير معلمة 'model'. يتم تمريرها كـ `@model` إلى المكون الخاص بك.
// يمكن أن يشمل هذا البيانات، وكذلك الإجراءات/ردود النداء لاستخدامها من قبل النافذة المنبثقة.
this.modal.show(MyModal, {
model: { topic: this.topic, someAction: this.someAction },
});
// `modal.show()` تُرجع وعدًا، لذا يمكنك الانتظار حتى يتم إغلاقه
// سيتم حله مع البيانات التي تم تمريرها إلى إجراء `@closeModal`
const result = await this.modal.show(MyModal);
المزيد من التخصيص!
يحتوي <DModal> على عدد من الكتل المسماة والوسائط. تحقق من دليل الأسلوب التفاعلي للوسائط، و تنفيذ قالب d-modal للكتل المسماة.
هذه الوثيقة يتم التحكم في إصدارها - اقترح تغييرات على github.