Wie zeige ich ein Widget im Hamburger-Menü an?

Unterstützung
1

Hallo,

ich möchte ein Widget im Hamburger-Menü anzeigen. Ich habe mir angesehen, wie man ein Discord-Widget in einer Dropdown-Schaltfläche anzeigt: (Deprecated) Display a "Discord Widget" in a dropdown button, um eine Lösung zu finden. Ich kann die Schaltfläche jedoch nicht im Hamburger-Menü anzeigen.

Hier ist mein Code:

const showModal = require("discourse/lib/show-modal").default;

api.createWidget("modal-button", {
  tagName: "a.test",

  html() {
    return "Modal öffnen";
  },

  click() {
    showModal("fareharbor");
  }
});

api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
  return [helper.attach('modal-button')];
});

Was mache ich falsch?

2

Soweit ich das beurteilen kann, liegt dein einziges Problem darin, dass helper.attach() nicht existiert.

Du solltest helper.widget.attach() verwenden.

3

Vielen Dank für deine schnelle Antwort!
Ich habe deinen Vorschlag ausprobiert, aber er hat auch nicht funktioniert :man_shrugging:

Ich habe versucht, ein einfaches HTML-Element mit folgendem Code hinzuzufügen:

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

Das hat leider auch nicht geklappt :thinking:

4

Machst du das innerhalb von withPluginApi()?

5

Soweit ich weiß, nicht. Sollte ich?

Dieser Code funktioniert jedoch, da er das Element korrekt im Hamburger-Menü hinzufügt:

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

image
image250×205 3.95 KB

Aber ich weiß nicht, ob ich showModal("fareharbor"); aufrufen kann, ohne ein Widget zu verwenden.

Und alles Gute zum Geburtstag. :slight_smile:

Edit:
Hier ist mein vollständiger Code:

const showModal = require("discourse/lib/show-modal").default;

api.createWidget("modal-button", {
  tagName: "a.test",

  html() {
    return "Modal öffnen";
  },

  click() {
    showModal("fareharbor");
  }
});

// funktioniert nicht
api.decorateWidget("hamburger-menu:generalLinks", function(helper) {
  return [helper.widget.attach('modal-button')];
});

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

Der Teil return [helper.widget.attach('modal-button')]; erstellt einen leeren Link:

<li><a class="widget-link" href="" title=""><span class="d-label"></span></a></li>
6

Wo befindet sich dieser Code? Verwenden Sie das benutzerdefinierte Admin-Menü, um dies hinzuzufügen?

Können Sie außerdem versuchen, console.log(showModal) im Bereich html() { } hinzuzufügen und zu prüfen, was in Ihrer Konsole ausgegeben wird?

7

Ja, das tue ich.

Ja, es zeigt meiner Meinung nach einige normale Ausgaben (wenn ich den Modal auslöse):
(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…

Aber es sei denn, ich habe etwas falsch verstanden, liegt mein Problem nicht an der Modal-Interaktion (die funktioniert), sondern daran, mein Widget im Hamburger-Menü zu platzieren.

Ich habe dieses Tutorial zur Modal-Erstellung befolgt, und es funktioniert einwandfrei. Der benutzerdefinierte Button zeigt den Modal an.

image
image591×352 8.87 KB

image
image333×399 4.62 KB

Der Modal funktioniert.
Das Hinzufügen des Widget-Buttons in einer Vorlage funktioniert und löst den Modal aus.
Das Hinzufügen eines regulären Links im Hamburger-Menü funktioniert.
…Aber das Hinzufügen des Widget-Buttons im Hamburger-Menü funktioniert nicht und erstellt stattdessen einen leeren Link. Gibt es gewisse Einschränkungen, wenn man decorateWidget mit „hamburger-menu

8

Ich habe dies an den entsprechenden Kanal weitergeleitet, und es wird bald geprüft. Möglicherweise gibt es etwas, das eine ordnungsgemäße Funktionsweise verhindert.

Danke, dass du das angesprochen hast :smile:

9

Alles Gute zum Geburtstag, Jordan!

11

Die API wurde mit der Idee entwickelt, dass alles in generalLinks ein link-Widget sein würde:

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

Das obige Beispiel gibt also eine weitere Widget-Instanz zurück, obwohl Sie tatsächlich ein oder mehrere JavaScript-Objekt-Literale zurückgeben müssen, wie in Ihrem funktionierenden Beispiel. Diese Objekte sind die Argumente für das link-Widget, damit die Links korrekt angezeigt werden.

Es scheint, als wäre der Grund, warum Sie dies tun möchten, das Öffnen eines Modals. Das ist mit einer action möglich. Versuchen Sie Folgendes:

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' };
});

In diesem Fall hänge ich eine neue Aktion namens openThing an das Hamburger-Menü an und löse diese dann über meinen Link aus.