Möglich, Event-Handler an Widgets in Theme/Plugin anzuhängen?

Entwickler
1

Hallo,

ich möchte einen Klick-Handler für Elemente in der Hauptthemenliste hinzufügen (um unter bestimmten Bedingungen benutzerdefiniertes Verhalten zu implementieren). Ist es möglich, etwas wie api.decorateWidget() zu verwenden, um einen Event-Handler für jede Instanz eines bestimmten Widgets hinzuzufügen?

—

Andere in Betracht gezogene Ansätze:

  • Es ist nicht praktikabel, addEventListener in einer globalen Funktion zu verwenden, da nach dem Seitenladevorgang weitere Themenlistelemente geladen werden können, z. B. durch Infinite Scroll. (Die Implementierung müsste etwas wie MutationObserver verwenden, um Änderungen im DOM zu beobachten und weitere Event-Handler hinzuzufügen, wenn weitere Widgets gerendert werden.)
  • Es könnte möglich sein, einen Klick-Handler an body anzubinden und über Event-Bubbling zu überwachen (wie es beispielsweise mit jQuery durch $("body").on("click", ".list-item-topic", function()) gemacht wird), aber ich muss in der Lage sein, preventDefault() und stopPropagation() zu verwenden, was dieser Ansatz meiner Meinung nach nicht unterstützt.
1 „Gefällt mir“
2

api.attachWidgetAction ist der richtige Weg. Du kannst im Codebase suchen, und du bist startklar.

Beispiele hier

3

Ah, danke! Sind das Standard-DOM-Ereignisse? Also:

  • Aus den Beispielen scheint nicht hervorzugehen, dass es sich um Standard-DOM-Ereignisse wie click, mouseover usw. handelt. Ist es möglich, z. B. api.attachWidgetAction("topic-list-item", "click", ...) aufzurufen?
  • Ist es möglich, auf event zuzugreifen, z. B. um event.stopPropagation() auszuführen?
  • Wenn dies keine Standard-DOM-Ereignisse sind, wie kann ich herausfinden, welche Ereignisse ein bestimmtes Widget ausstrahlt?

Danke für die Hinweise!

4

Zusätzlich: Ich bin hier etwas verwirrt, aber wie finde ich das „Widget

5

Über das Widget und die Komponente:

1 „Gefällt mir“
6

Danke an alle! Habe es herausgefunden.

Für andere, die in Zukunft Event-Handler für Komponenten überschreiben möchten, fügt Folgendes in javascripts/your-plugin-name/initializers/script-name-of-your-choice.js.es6 hinzu:

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 „Gefällt mir“