Possible de joindre des gestionnaires d'événements aux widgets dans le thème/plugin ?

Dev
1

Bonjour,

Je souhaite ajouter un gestionnaire de clic aux éléments de la liste principale des sujets (pour ajouter un comportement personnalisé dans certaines conditions). Est-il possible d’utiliser quelque chose comme api.decorateWidget() pour ajouter un gestionnaire d’événements à chaque instance d’un widget particulier ?

—

Autres approches envisagées :

  • Il n’est pas pratique d’utiliser addEventListener dans une fonction globale car des éléments de liste de sujets supplémentaires peuvent être chargés après le chargement de la page, par exemple avec un défilement infini. (L’implémentation devrait utiliser quelque chose comme MutationObserver pour observer les changements dans le DOM et attacher davantage de gestionnaires d’événements à mesure que davantage de widgets sont rendus)
  • Il pourrait être possible d’attacher un gestionnaire de clic à body et de surveiller via la propagation des événements (comme fait avec jQuery via $("body").on("click", ".list-item-topic", function())), mais j’ai besoin de pouvoir utiliser preventDefault() et stopPropagation(), ce que je crois que cette approche ne prend pas en charge.
1 « J'aime »
2

api.attachWidgetAction est la solution à adopter. Vous pouvez parcourir la base de code et vous serez opérationnel.

Exemples ici

3

Ah, merci ! S’agit-il d’événements DOM standards, c’est-à-dire :

  • D’après les exemples, il ne semble pas que les événements soient des événements DOM standards comme click, mouseover, etc. Est-il possible de faire par exemple api.attachWidgetAction("topic-list-item", "click", ...) ?
  • Est-il possible d’accéder à event, par exemple pour appeler event.stopPropagation() ?
  • Si ce ne sont pas des événements DOM standards, comment puis-je savoir quels événements un widget particulier émet ?

Merci pour les indications !

4

De plus : je suis un peu confus ici, mais comment puis-je trouver le « widget » associé à un élément d’interface utilisateur particulier ? (dans mon cas : le widget qui alimente topic-list-item affichant un sujet individuel dans une liste de sujets). Dans le répertoire des widgets, aucun ne semble lié à topic-list-item. Ce « composant » semble plutôt être responsable du rendu de topic-list-item.

Je ne saisis pas clairement la distinction entre les widgets et les composants (mes excuses pour ce manque de familiarité) — on suppose qu’il n’est possible de joindre des gestionnaires d’événements avec api.attachWidgetAction qu’aux « widgets » et non aux « composants ». Existe-t-il un équivalent pour les composants ?

5

À propos du widget et du composant :

1 « J'aime »
6

Merci à tous ! J’ai trouvé.

Pour les autres qui chercheront à remplacer les gestionnaires d’événements pour des composants, ajoutez ce qui suit à 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 « J'aime »