È possibile associare gestori di eventi ai widget nel tema/plugin?

Sviluppatore
1

Ciao,

Sto cercando di aggiungere un gestore di eventi click agli elementi dell’elenco principale degli argomenti (per aggiungere comportamenti personalizzati in alcune condizioni). È possibile utilizzare qualcosa come api.decorateWidget() per aggiungere un gestore di eventi a ogni istanza di un particolare widget?

—

Altri approcci presi in considerazione:

  • Non è pratico utilizzare addEventListener in una funzione globale perché gli elementi dell’elenco degli argomenti possono essere caricati dopo il caricamento della pagina, ad esempio con lo scroll infinito. (L’implementazione dovrebbe utilizzare qualcosa come MutationObserver per osservare le modifiche nel DOM e aggiungere altri gestori di eventi man mano che vengono renderizzati nuovi widget)
  • Potrebbe essere possibile attaccare un gestore di click a body e monitorare attraverso la propagazione degli eventi (ad esempio come fatto con jQuery con $("body").on("click", ".list-item-topic", function())), ma ho bisogno di poter utilizzare preventDefault() e stopPropagation(), che credo non siano supportati da questo approccio
1 Mi Piace
2

api.attachWidgetAction è la strada da seguire. Puoi cercare nel codebase e sarai a posto.

Esempi qui

3

Ah, grazie! Si tratta di eventi DOM standard? Cioè:

  • Dagli esempi, non sembra che gli eventi siano eventi DOM standard come click, mouseover, ecc. È possibile fare, ad esempio, api.attachWidgetAction("topic-list-item", "click", ...)?
  • È possibile accedere a event, ad esempio per eseguire event.stopPropagation()?
  • Se questi non sono eventi DOM standard, come posso scoprire quali eventi diffonde un determinato widget?

Grazie per i suggerimenti!

4

Inoltre: sono un po’ confuso, ma come posso trovare il “widget” associato a un particolare elemento dell’interfaccia utente? (nel mio caso: il widget che gestisce topic-list-item mostrando un singolo argomento in una lista di argomenti). Dalla directory dei widget, nessuno sembra essere correlato a topic-list-item. Questo “componente” sembra invece essere responsabile del rendering di topic-list-item.

Non è chiara la distinzione tra widget e componenti (mi scuso per la mia scarsa familiarità) — presumibilmente è possibile collegare gestori di eventi solo ai “widget” tramite api.attachWidgetAction e non ai “componenti”. Esiste un equivalente per i componenti?

5

Informazioni sul Widget e sul Componente:

1 Mi Piace
6

Grazie a tutti! L’ho risolto.

Per gli altri che in futuro vorranno sovrascrivere i gestori di eventi per i componenti, aggiungi quanto segue a javascripts/nome-del-tuo-plugin/inizializzatori/nome-script-a-scelta.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 Mi Piace