Comment afficher un widget dans le menu hamburger ?

Soutien
1

Bonjour,

J’aimerais afficher un widget dans le menu hamburger. J’ai consulté (Deprecated) Display a "Discord Widget" in a dropdown button pour comprendre comment faire, mais je n’arrive pas à faire apparaître le bouton dans le menu hamburger.
Voici mon code :

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

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

  html() {
    return "Ouvrir la fenêtre modale";
  },

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

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

Qu’est-ce que je fais de mal ?

4 « J'aime »
2

D’après ce que je peux voir, je pense que votre seul problème est que helper.attach() n’existe pas.

Vous devriez utiliser helper.widget.attach()

2 « J'aime »
3

Merci pour votre réponse rapide !
J’ai essayé votre suggestion, mais cela n’a pas fonctionné non plus :man_shrugging:

J’ai essayé d’ajouter un simple élément HTML avec ceci :

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

Et cela n’a pas fonctionné :thinking:

1 « J'aime »
4

Le faites-vous depuis l’intérieur de withPluginApi() ?

2 « J'aime »
5

Pas que je sache. Dois-je ?

Ce code fonctionne, car il ajoute correctement l’élément dans le menu hamburger :

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

image
image250×205 3.95 KB

Mais je ne sais pas si je peux appeler showModal("fareharbor"); sans utiliser de widget.

Et joyeux anniversaire. :slight_smile:

edit :
Voici mon code complet :

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

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

  html() {
    return "Ouvrir la fenêtre modale";
  },

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

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

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

La partie return [helper.widget.attach('modal-button')]; crée un lien vide :

<li><a class="widget-link" href="" title=""><span class="d-label"></span></a></li>
4 « J'aime »
6

Où réside ce code ? Utilisez-vous le menu personnalisé de l’administration pour l’ajouter ?

Aussi, pouvez-vous essayer d’ajouter console.log(showModal) à l’intérieur de la zone html() { } et voir ce qui est affiché dans votre console ?

1 « J'aime »
7

Oui, c’est le cas.

Oui, cela affiche des informations normales, je suppose (lorsque je déclenche la fenêtre modale) :
(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…

Mais sauf si je comprends mal quelque chose, mon problème ne concerne pas l’interaction avec la fenêtre modale (qui fonctionne), mais le placement de mon widget dans le menu hamburger.

J’ai suivi ce tutoriel de création de fenêtre modale et cela fonctionne parfaitement : le bouton personnalisé affiche la fenêtre modale.

image
image591×352 8.87 KB

image
image333×399 4.62 KB

La fenêtre modale fonctionne.
L’ajout du bouton widget dans un modèle fonctionne et déclenche la fenêtre modale.
L’ajout d’un lien régulier dans le menu hamburger fonctionne.
…Mais l’ajout du bouton widget dans le menu hamburger ne fonctionne pas et crée un lien vide à la place. Y a-t-il des restrictions d’un certain type lors de l’utilisation de decorateWidget avec “hamburger-menu” ? :thinking:

2 « J'aime »
8

Je l’ai transmis au canal approprié et cela sera examiné sous peu. Il se peut qu’il y ait un élément qui empêche cela de fonctionner correctement.

Merci de l’avoir signalé :smile:

1 « J'aime »
9

Joyeux anniversaire, Jordan !

1 « J'aime »
11

L’API a été conçue avec l’idée que tout dans generalLinks serait un widget link :

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

Ainsi, l’exemple ci-dessus renvoie une autre instance de Widget, alors qu’en réalité, vous devez renvoyer un ou plusieurs objets littéraux JavaScript comme dans votre exemple fonctionnel. Ces objets sont les arguments du widget link pour afficher correctement les liens.

Il semble que la raison pour laquelle vous souhaitez faire cela soit d’ouvrir une fenêtre modale. Cela est réalisable à l’aide d’une action. Essayez ceci :

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

Dans ce cas, j’attache une nouvelle action appelée openThing au menu hamburger, puis je la déclenche via mon lien.

4 « J'aime »