Canapin
12 أكتوبر 2020، 9:02م
1
مرحبًا،
أود عرض عنصر واجهة مستخدم في قائمة الهامبرغر. لقد راجعت الرابط (Deprecated) Display a "Discord Widget" in a dropdown button لمعرفة كيفية القيام بذلك، لكنني لم أستطع إظهار الزر في قائمة الهامبرغر.
const showModal = require("discourse/lib/show-modal").default;
api.createWidget("modal-button", {
tagName: "a.test",
html() {
return "فتح النافذة المنبثقة";
},
click() {
showModal("fareharbor");
}
});
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return [helper.attach('modal-button')];
});
ما الخطأ الذي أقوم به؟
4 إعجابات
من خلال ما أستطيع استنتاجه، أعتقد أن مشكلتك الوحيدة هي أن helper.attach() غير موجود.
يجب أن تستخدم helper.widget.attach()
إعجابَين (2)
Canapin
12 أكتوبر 2020، 9:19م
3
شكرًا لك على ردك السريع!
لقد حاولت إضافة عنصر HTML بسيط باستخدام الكود التالي:
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return helper.h("div", "نص تجريبي");
});
ولكنه لم ينجح
إعجاب واحد (1)
هل تقوم بذلك من داخل withPluginApi()؟
إعجابَين (2)
Canapin
12 أكتوبر 2020، 10:16م
5
ليس أنني أعرف. هل يجب أن أعرف؟
هذا الكود يعمل، حيث يضيف العنصر بشكل صحيح في قائمة الهامبرغر:
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return {href: "", rawLabel: "test"}
});
لكنني لا أعرف ما إذا كان بإمكاني استدعاء showModal("fareharbor"); دون استخدام عنصر واجهة مستخدم (widget).
ومبارك عيد ميلادك.
تعديل:
const showModal = require("discourse/lib/show-modal").default;
api.createWidget("modal-button", {
tagName: "a.test",
html() {
return "Open Modal";
},
click() {
showModal("fareharbor");
}
});
// لا يعمل
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return [helper.widget.attach('modal-button')];
});
// يعمل
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return {href: "", rawLabel: "test"}
});
الجزء الخاص بـ return [helper.widget.attach('modal-button')]; ينشئ رابطًا فارغًا:
<li><a class="widget-link" href="" title=""><span class="d-label"></span></a></li>
4 إعجابات
أين يقع هذا الكود؟ هل تستخدم قائمة المسؤول المخصصة لإضافته؟
أيضًا، هل يمكنك تجربة إضافة console.log(showModal) داخل منطقة html() { } ورؤية ما يتم تسجيله في وحدة التحكم؟
إعجاب واحد (1)
Canapin
13 أكتوبر 2020، 7:03م
7
نعم، أفعل ذلك.
نعم، يظهر بعض الأشياء العادية على ما أعتقد (عندما أشغّل النافذة المنبثقة):(e,t){t=t||{};var n=(0,c.getOwner)(this),s=n.lookup("route:application"),a=s.controllerFor("modal");a.set("modalClass",t.modalClass||"".concat((0,u.dasherize)(e).toLowerCase(),"-modal"));var i=t.admi…
لكن ما لم أكن أسيء فهم شيء ما، فإن مشكلتي ليست في تفاعل النافذة المنبثقة (الذي يعمل)، بل في وضع الويدجت الخاص بي في قائمة الهامبرغر.
لقد اتبعت هذا دليل إنشاء النوافذ المنبثقة ويعمل بشكل مثالي، حيث تظهر الزر المخصص النافذة المنبثقة.
النافذة المنبثقة تعمل.
إضافة زر الويدجت في قالب يعمل ويشغّل النافذة المنبثقة.
إضافة
رابط عادي في قائمة الهامبرغر يعمل.
…لكن إضافة
زر الويدجت في قائمة الهامبرغر لا يعمل وينشئ رابطًا فارغًا بدلاً من ذلك. هل توجد بعض القيود من نوع ما عند استخدام decorateWidget مع “hamburger-menu”؟
إعجابَين (2)
لقد نقلت هذا إلى القناة المناسبة وسيتم النظر فيه قريبًا. قد يكون هناك شيء ما يمنع هذا من العمل بشكل صحيح.
شكرًا لك على طرح هذا
إعجاب واحد (1)
eviltrout
14 أكتوبر 2020، 5:14م
11
تم تصميم الـ API بناءً على فكرة أن كل عنصر في generalLinks سيكون عنصر واجهة link:
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js#L189
لذلك، المثال أعلاه يعيد مثيلًا آخر من Widget، بينما في الواقع يجب أن تعيد كائنات حرفية (object literals) بلغة جافا سكريبت واحدة أو أكثر كما في مثالك الذي يعمل. هذه الكائنات هي الحجج الممررة إلى عنصر واجهة link لضمان ظهور الروابط بشكل صحيح.
يبدو أن السبب وراء رغبتك في القيام بذلك هو فتح نافذة منبثقة (modal). وهذا ممكن باستخدام action. جرّب ما يلي:
const showModal = require("discourse/lib/show-modal").default;
api.reopenWidget('hamburger-menu', {
openThing(e) {
showModal('thing-modal');
}
});
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return { action: 'openThing', label: 'open.thing' };
});
في هذه الحالة، أقوم بإرفاق إجراء جديد يسمى openThing بقائمة الهامبرغر، ثم تشغيله عبر الرابط الخاص بي.
4 إعجابات
