Cómo mostrar un widget en el menú hamburguesa?

Soporte
1

Hola,

Me gustaría mostrar un widget en el menú hamburguesa. Miré (Deprecated) Display a "Discord Widget" in a dropdown button para averiguar cómo hacerlo, pero no logro que el botón aparezca en el menú hamburguesa.
Aquí está mi 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')];
});

¿Qué estoy haciendo mal?

4 Me gusta
2

Por lo que puedo ver, creo que tu único problema es que helper.attach() no existe.

Deberías estar usando helper.widget.attach()

2 Me gusta
3

¡Gracias por tu rápida respuesta!
Probé tu sugerencia, pero tampoco funcionó :man_shrugging:

Intenté agregar un elemento HTML simple con esto:

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

Y no funcionó :thinking:

1 me gusta
4

¿Lo estás haciendo desde dentro de withPluginApi()?

2 Me gusta
5

No que yo sepa. ¿Debería?

Este código funciona, ya que agrega correctamente el elemento en el menú hamburguesa:

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

image
image250×205 3.95 KB

Pero no sé si puedo llamar a showModal("fareharbor"); sin usar un widget.

¡Y feliz cumpleaños! :slight_smile:

edición:
Aquí está mi 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");
  }
});

// no 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"}
});

La parte return [helper.widget.attach('modal-button')]; crea un enlace vacío:

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

¿Dónde reside este código? ¿Estás utilizando el menú personalizado de administración para agregarlo?

Además, ¿puedes intentar agregar console.log(showModal) dentro del área html() { } y ver qué se registra en tu consola?

1 me gusta
7

Sí, lo hago.

Sí, muestra algunas cosas normales, supongo (cuando activo el 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…

Pero, a menos que esté malinterpretando algo, mi problema no es la interacción con el modal (que funciona), sino colocar mi widget en el menú hamburguesa.

Seguí este tutorial de creación de modales y funciona perfectamente; el botón personalizado muestra el modal.

image
image591×352 8.87 KB

image
image333×399 4.62 KB

El modal funciona.
Agregar el botón del widget en una plantilla funciona y activa el modal.
Agregar un enlace regular en el menú hamburguesa funciona.
…Pero agregar el botón del widget en el menú hamburguesa no funciona y crea un enlace vacío en su lugar. ¿Existen algunas restricciones de algún tipo al usar decorateWidget con “hamburger-menu”? :thinking:

2 Me gusta
8

He trasladado esto al canal correspondiente y se revisará pronto. Puede haber algo que impida que funcione correctamente.

Gracias por mencionarlo :smile:

1 me gusta
9

¡Feliz cumpleaños, Jordan!

1 me gusta
11

La API fue diseñada con la idea de que todo en generalLinks sería un widget link:

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

Por lo tanto, el ejemplo anterior devuelve otra instancia de Widget, cuando en realidad necesitas devolver uno o más literales de objetos de JavaScript, como en tu ejemplo funcional. Esos objetos son los argumentos para el widget link para que los enlaces se muestren correctamente.

Parece que la razón por la que quieres hacer esto es abrir un modal. Eso se puede lograr usando una action. Intenta lo siguiente:

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

En este caso, adjunto una nueva acción llamada openThing al menú hamburguesa y luego la activo a través de mi enlace.

4 Me gusta