Como exibir um widget no menu hambúrguer?

Suporte
1

Olá,

Gostaria de exibir um widget no menu hambúrguer. Pesquisei em (Deprecated) Display a "Discord Widget" in a dropdown button para descobrir como fazer, mas não consegui mostrar o botão no menu hambúrguer.
Aqui está meu código:

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

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

  html() {
    return "Abrir Modal";
  },

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

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

O que estou fazendo de errado?

2

Pelo que pude constatar, acredito que seu único problema é que helper.attach() não existe.

Você deve estar usando helper.widget.attach()

3

Obrigado pela sua rápida resposta!
Tentei sua sugestão, mas também não funcionou :man_shrugging:

Tentei adicionar um elemento HTML simples com isso:

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

E não funcionou :thinking:

4

Você está fazendo isso de dentro de withPluginApi()?

5

Não que eu saiba. Deveria?

Este código funciona, pois adiciona corretamente o elemento no menu hambúrguer:

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

image
image250×205 3.95 KB

Mas não sei se posso chamar showModal("fareharbor"); sem usar um widget.

E feliz aniversário. :slight_smile:

edição:
Aqui está meu código completo:

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

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

  html() {
    return "Abrir Modal";
  },

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

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

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

A parte return [helper.widget.attach('modal-button')]; cria um link vazio:

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

Onde esse código está hospedado? Você está usando o menu personalizado do administrador para adicioná-lo?

Além disso, você pode tentar adicionar console.log(showModal) dentro da área html() { } e ver o que é registrado no seu console?

7

Sim, estou.

Sim, mostra algumas coisas normais, imagino (quando eu ativo o modal):
(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…

Mas, a menos que eu esteja entendendo algo errado, meu problema não é a interação com o modal (que funciona), mas sim colocar meu widget no menu hambúrguer.

Segui este tutorial de criação de modal e funciona perfeitamente; o botão personalizado mostra o modal.

image
image591×352 8.87 KB

image
image333×399 4.62 KB

O modal funciona.
Adicionar o botão do widget em um template funciona e ativa o modal.
Adicionar um link regular no menu hambúrguer funciona.
…Mas adicionar o botão do widget no menu hambúrguer não funciona e cria um link vazio em vez disso. Existem alguma espécie de restrições ao usar decorateWidget com “hamburger-menu”? :thinking:

8

Encaminhei isso para o canal adequado e será analisado em breve. Pode haver algo impedindo que isso funcione corretamente.

Obrigado por trazer isso à tona :smile:

9

Feliz aniversário, Jordan!

11

A API foi projetada com a ideia de que tudo em generalLinks seria um widget link:

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

Portanto, o exemplo acima está retornando outra instância de Widget, quando, na verdade, você precisa retornar um ou mais literais de objeto JavaScript, como no seu exemplo funcional. Esses objetos são os argumentos para o widget link para que os links apareçam corretamente.

Parece que o motivo pelo qual você deseja fazer isso é abrir um modal. Isso é possível usando uma action. Tente o seguinte:

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

Neste caso, eu anexo uma nova ação chamada openThing ao menu hambúrguer e, em seguida, disparo essa ação por meio do meu link.