ハンバーガーメニューにウィジェットを表示する方法

サポート
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
2

私の知る限り、問題は helper.attach() が存在しない点だけだと考えられます。

helper.widget.attach() を使用するべきです。

「いいね！」 2
3

返信が早くてありがとうございます！
ご提案を試してみましたが、やはりうまくいきませんでした :man_shrugging:

シンプルな HTML 要素を追加しようとして、以下のように試みました：

api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
  return helper.h("div", "test text");
});

しかし、これも機能しませんでした :thinking:

「いいね！」 1
4

これは withPluginApi() の内部から実行していますか？

「いいね！」 2
5

私の知る限りではそうではありません。そうすべきでしょうか？

このコードは、ハンバーガーメニューに要素を正しく追加するため、機能しています：

api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
  return {href: "", rawLabel: "test"}
});

image
image250×205 3.95 KB

しかし、ウィジェットを使わずに showModal("fareharbor"); を呼び出せるかどうかはわかりません。

そして、お誕生日おめでとうございます。:slight_smile:

編集：
私の完全なコードは以下の通りです：

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
6

このコードはどこに配置されていますか？カスタム管理メニューを使用して追加していますか？

また、html() { } の中に console.log(showModal) を追加して、コンソールに何が出力されるか確認してみてください。

「いいね！」 1
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…

ただし、何かを誤解している可能性はありますが、私の問題はモダルの相互作用（これは機能しています）ではなく、ウィジェットをハンバーガーメニューに配置することにあります。

私はこの モーダル作成チュートリアル に従い、完璧に動作しています。カスタムボタンがモーダルを表示します。

image
image591×352 8.87 KB

image
image333×399 4.62 KB

モーダルは機能します。
テンプレートにウィジェットボタンを追加すると機能し、モーダルがトリガーされます。
ハンバーガーメニューに通常のリンクを追加しても機能します。
…しかし、ハンバーガーメニューにウィジェットボタンを追加すると機能せず、代わりに空のリンクが作成されます。“hamburger-menu” で decorateWidget を使用する際に、何らかの制限があるのでしょうか？:thinking:

「いいね！」 2
8

適切なチャンネルに引き継ぎましたので、近日中に確認いたします。動作に支障をきたす要因がある可能性があります。

ご報告いただきありがとうございます :smile:

「いいね！」 1
9

ジョーダン、誕生日おめでとう！

「いいね！」 1
11

この API は、generalLinks 内のすべての要素が link ウィジェットであるという考えに基づいて設計されています。

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/widgets/hamburger-menu.js#L189

したがって、上記の例は別の Widget インスタンスを返していますが、実際には、動作している例のように 1 つ以上の JavaScript のオブジェクトリテラルを返す必要があります。これらのオブジェクトは、リンクが正しく表示されるようにする 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 という新しいアクションを付け加え、リンクを通じてそれをトリガーしています。

「いいね！」 4