Canapin
(Coin-coin le Canapin)
10월 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 "Open Modal";
},
click() {
showModal("fareharbor");
}
});
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return [helper.attach('modal-button')];
});
무엇이 잘못된 것일까요?
제 판단으로는, 문제가 되는 부분은 helper.attach()가 존재하지 않는다는 점뿐인 것 같습니다.
helper.widget.attach()를 사용해야 합니다.
Canapin
(Coin-coin le Canapin)
10월 12, 2020, 9:19오후
3
빠른 답변 감사합니다!
제안해 주신 방법을 시도해 보았지만, 역시 작동하지 않았습니다
아래처럼 간단한 HTML 요소를 추가하려고 해 보았는데요:
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return helper.h("div", "test text");
});
하지만 이것도 작동하지 않았습니다
withPluginApi() 안에서 이렇게 하고 계신 건가요?
Canapin
(Coin-coin le Canapin)
10월 12, 2020, 10:16오후
5
제가 아는 한으로는 아닙니다. 그렇게 해야 하나요?
이 코드는 햄버거 메뉴에 요소를 올바르게 추가하기 때문에 동작합니다:
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
return {href: "", rawLabel: "test"}
});
하지만 위젯을 사용하지 않고 showModal("fareharbor");를 호출할 수 있는지는 알지 못합니다.
생일 축하합니다.
수정:
제 전체 코드입니다:
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>
이 코드는 어디에 있나요? 관리자 맞춤 메뉴를 사용하여 이 기능을 추가하고 있나요?
또한, html() { } 영역 안에 console.log(showModal)을 추가해 보고 콘솔에 어떤 값이 출력되는지 확인해 볼 수 있을까요?
Canapin
(Coin-coin le Canapin)
10월 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…
하지만 제가 무언가를 잘못 이해하고 있지 않는 한, 제 문제는 모달 상호작용(이는 정상적으로 작동합니다)이 아니라 위젯을 햄버거 메뉴에 배치하는 것입니다.
이 모달 생성 튜토리얼 을 따랐고 완벽하게 작동하며, 커스텀 버튼이 모달을 표시합니다.
모달은 작동합니다.
템플릿에 위젯 버튼을 추가하면 작동하고 모달을 트리거합니다.
햄버거 메뉴에
일반 링크 를 추가하면 작동합니다.
…하지만 햄버거 메뉴에
위젯 버튼 을 추가하면 작동하지 않고 대신 빈 링크가 생성됩니다. "hamburger-menu"를 decorateWidget과 함께 사용할 때 어떤 제한 사항이 있나요?
해당 내용을 적절한 채널로 전달했으며, 곧 확인될 예정입니다. 제대로 작동하지 않도록 하는 어떤 문제가 있을 수 있습니다.
말씀해 주셔서 감사합니다
eviltrout
(Robin Ward)
10월 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 인스턴스를 반환하고 있지만, 실제로는 정상 작동하는 예제처럼 하나 이상의 자바스크립트 객체 리터럴을 반환해야 합니다. 이러한 객체들은 링크가 올바르게 표시되도록 하는 link 위젯의 인자입니다.
이렇게 하려는 이유가 모달을 여는 것인 것 같습니다. 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이라는 새로운 액션을 연결한 후, 링크를 통해 해당 액션을 트리거합니다.