Come visualizzare un widget nel menu hamburger?

Supporto
1

Ciao,

Vorrei visualizzare un widget nel menu hamburger. Ho consultato (Deprecated) Display a "Discord Widget" in a dropdown button per capire come fare, ma non riesco a far apparire il pulsante nel menu hamburger.
Ecco il mio codice:

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

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

  html() {
    return "Apri Modale";
  },

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

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

Cosa sto sbagliando?

4 Mi Piace
2

Da quanto posso capire, credo che il tuo unico problema sia che helper.attach() non esiste.

Dovresti utilizzare helper.widget.attach()

2 Mi Piace
3

Grazie per la tua rapida risposta!
Ho provato il tuo suggerimento, ma non ha funzionato nemmeno così :man_shrugging:

Ho provato ad aggiungere un semplice elemento HTML con questo:

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

Ma non ha funzionato :thinking:

1 Mi Piace
4

Lo stai facendo all’interno di withPluginApi()?

2 Mi Piace
5

Non che io sappia. Dovrei?

Questo codice funziona, tuttavia, in quanto aggiunge correttamente l’elemento nel menu hamburger:

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

image
image250Ă—205 3.95 KB

Ma non so se posso chiamare showModal("fareharbor"); senza utilizzare un widget.

E buon compleanno. :slight_smile:

modifica:
Ecco il mio codice completo:

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

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

  html() {
    return "Apri Modale";
  },

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

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

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

La parte return [helper.widget.attach('modal-button')]; crea un link vuoto:

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

Dove risiede questo codice? Stai utilizzando il menu personalizzato dell’amministratore per aggiungerlo?

Inoltre, puoi provare ad aggiungere console.log(showModal) all’interno dell’area html() { } e vedere cosa viene registrato nella tua console?

1 Mi Piace
7

Sì, lo faccio.

Sì, mostra alcune cose normali, immagino (quando attivo la 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…

Ma a meno che non stia fraintendendo qualcosa, il mio problema non è l’interazione con la modale (che funziona), ma posizionare il mio widget nel menu hamburger.

Ho seguito questo tutorial sulla creazione di modali e funziona perfettamente: il pulsante personalizzato mostra la modale.

image
image591Ă—352 8.87 KB

image
image333Ă—399 4.62 KB

La modale funziona.
Aggiungere il pulsante del widget in un template funziona e attiva la modale.
Aggiungere un link normale nel menu hamburger funziona.
…Ma aggiungere il pulsante widget nel menu hamburger non funziona e crea invece un link vuoto. Ci sono delle restrizioni di qualche tipo quando si usa decorateWidget con “hamburger-menu”? :thinking:

2 Mi Piace
8

Ho inoltrato la questione al canale competente e verrĂ  esaminata a breve. Potrebbe esserci qualcosa che impedisce il corretto funzionamento.

Grazie per averne parlato :smile:

1 Mi Piace
9

Buon compleanno, Jordan!

1 Mi Piace
11

L’API è stata progettata con l’idea che tutto in generalLinks fosse un widget link:

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

Quindi, l’esempio sopra restituisce un’altra istanza di Widget, mentre in realtà è necessario restituire uno o più oggetti letterali JavaScript come nel tuo esempio funzionante. Questi oggetti sono gli argomenti per il widget link per far sì che i link appaiano correttamente.

Sembra che il motivo per cui vuoi farlo sia aprire un modal. Questo è ottenibile utilizzando un action. Prova così:

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 questo caso, allego una nuova azione chiamata openThing al menu hamburger, quindi la attivo tramite il mio link.

4 Mi Piace