¿Es posible adjuntar manejadores de eventos a widgets en temas/plugins?

Desarrollador
1

Hola,

Estoy buscando agregar un manejador de clics a los elementos de la lista principal de temas (para agregar comportamiento personalizado bajo ciertas condiciones). ¿Es posible usar algo como api.decorateWidget() para agregar un manejador de eventos a cada instancia de un widget en particular?

—

Otros enfoques considerados:

  • No es práctico usar addEventListener en una función global, ya que se pueden cargar elementos adicionales de la lista de temas después de la carga de la página, por ejemplo, con desplazamiento infinito. (La implementación necesitaría usar algo como MutationObserver para observar cambios en el DOM y adjuntar más manejadores de eventos a medida que se renderizan más widgets)
  • Podría ser posible adjuntar un manejador de clics a body y monitorear a través de la propagación de eventos (por ejemplo, como se hace con jQuery mediante $("body").on("click", ".list-item-topic", function())), pero necesito poder usar preventDefault() y stopPropagation(), lo cual creo que este enfoque no soporta
1 me gusta
2

api.attachWidgetAction es la opción correcta. Puedes buscar en la base de código y estarás listo.

Ejemplos aquí

3

¡Ah, gracias! ¿Son estos eventos DOM estándar? Es decir:

  • Por los ejemplos, parece que los eventos no son eventos DOM estándar como click, mouseover, etc. ¿Es posible hacer, por ejemplo, api.attachWidgetAction("topic-list-item", "click", ...)?
  • ¿Es posible acceder al event, por ejemplo, para hacer event.stopPropagation()?
  • Si estos no son eventos DOM estándar, ¿cómo puedo averiguar qué eventos emite un widget en particular?

¡Gracias por las indicaciones!

4

Además: tengo una pequeña confusión aquí, pero ¿cómo puedo encontrar el “widget” asociado a un elemento de la interfaz de usuario en particular? (en mi caso: el widget que impulsa topic-list-item, que muestra un tema individual en una lista de temas). De el directorio de widgets, ninguno parece estar relacionado con topic-list-item. Este “componente” parece ser el responsable de renderizar topic-list-item en su lugar.

No tengo claro la distinción entre widgets y componentes (disculpas por no estar más familiarizado) —presumiblemente solo es posible adjuntar manejadores de eventos con api.attachWidgetAction a “widgets” pero no a “componentes”. ¿Existe un equivalente para componentes?

5

Acerca del widget y el componente:

1 me gusta
6

¡Gracias a todos! Ya lo resolví.

Para otros que en el futuro busquen anular los controladores de eventos de componentes, agreguen lo siguiente a javascripts/your-plugin-name/initializers/script-name-of-your-choice.js.es6:

import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: "custom-click-handler",

  initialize() {
    withPluginApi("0.8.20", (api) => {
      api.modifyClass("component:topic-list-item", {
        click(e) {
          ...
        }
      });
    });
  },
};
4 Me gusta