Hi, I’m looking to add a click handler to items in the main topic list (to add custom behavior under some conditions). Is it possible to use something like api.decorateWidget() to add an event handler to every instance of a particular widget? — Other approaches considered: It’s not practical to use addEventListener in a global function because additional topic list items can be loaded after page load, e.g. infinite scroll. (the implementation would need to use something like MutationObserver to observe changes in the DOM and attach more events handlers as more widgets render) It could be possible to attach a click handler to body and monitor through event bubbling (e.g. as done through jQuery with $("body").on("click", ".list-item-topic", function())), but I need to be able to use preventDefault() and stopPropagation(), which I believe this approach doesn’t support

[image] dchouinard: I’m looking to add a click handler to topic list items (to add custom behavior under some conditions). Is it possible to use something like api.decorateWidget() to add an event handler to every instance of a particular widget? api.attachWidgetAction is the way to go. You can read search the codebase and you’ll be gtg. Examples here

Ah, thank you! Are these standard DOM events? i.e.: From the examples, it doesn’t seems like the events are standard DOM events like click, mouseover, etc. Is it possible to do e.g. api.attachWidgetAction("topic-list-item", "click", ...)? Is it possible to access event, e.g. to do event.stopPropagation()? If this aren’t standard DOM events, how do I find out which events a particular widget broadcasts? Thanks for the pointers!

Additionally: a little confused here, but how do I find the “widget” associated with a particular UI element? (in my case: the widget powering topic-list-item showing an individual topic in a topic list). From the widget directory, none seem related to topic-list-item. This “component” seems to be instead be responsible for rendering topic-list-item. Not clear about the distinction between widgets and components (apologies for not being more familiar) — presumably it’s only possible to attach event handlers with api.attachWidgetAction to “widgets” but not to “components”. Is there an equivalent for components?

About the Widget and Component: [image] How different are Ember component and Discourse widget? Development Components are broadly used across most of Discourse. Where widgets come in useful is on some of our most highly-trafficked elements, such as the topic post stream and the header with its multiple menus. You’ll often see widgets used in plugins and themes to add to or modify existing widgets. Take for example this widget in the discourse-calendar plugin: This is a button rendered in the original post of a topic. It needs to be a widget because the post itself is rendered as a widget for per…

Thanks all! Figured it out. For others in the future looking to override event handlers for components, add the following to 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) { ... } }); }); }, };

Possible to attach event handlers to widgets in theme/plugin?

Development

hawm (Hawm) October 4, 2020, 5:22pm 5

About the Widget and Component:

Topic		Replies	Views
Render Component in Widget Development	1	439	June 27, 2023
Adding a button with Onclick Product Support	3	1225	March 31, 2020
A tour of how the Widget (Virtual DOM) code in Discourse works Development	75	30382	July 10, 2023
Topic List Item footer buttons - timeline content Development	3	1301	March 3, 2021
Render a component within a Widget. (Using select-kit components within plugin code) Development	29	4200	March 6, 2024

Possible to attach event handlers to widgets in theme/plugin?

Related topics