Is the detail data of custom events intercepted by tiddlywiki?

[oeyoews]

    const event = new Event('menubarNavChange', { detail: 'test' });
    window.menubarNav = menubarNav;
    $tw.rootWidget.dispatchEvent(event);
    // window.dispatchEvent(event);
    console.log(event.detail, event);

I want to trigger a menubarNavChange event and pass detail, but it seems that detail is intercepted by tiddlywiki, and I can't get detail.

Is it something I did wrong? @Jermolene

[saqimtiaz]

Use CustomEvent(), example:
startEl.dispatchEvent(new CustomEvent('swiped', { bubbles: true, cancelable: true, detail: eventData }));

[oeyoews]

CustomEvent is indeed effective, but I am a little confused. The mdn documentation does not mention the detail parameter of Event, but it can indeed be used in normal web pages.

[saqimtiaz]

@oeyoews apologies, I suspect now that I missed a crucial detail in your original post. Are you trying to send a custom DOM event, or a custom widget message?

widget.dispatchEvent is meant for use with widget messages and not DOM events, therefore the CustomEvent approach is not appropriate either. See the following for an example of how to send a custom widget message:

TiddlyWiki5/core/modules/widgets/action-sendmessage.js

Lines 85 to 93 in 9069992

	var params = {
	type: this.actionMessage,
	param: param,
	paramObject: paramObject,
	event: event,
	tiddlerTitle: this.getVariable("currentTiddler"),
	navigateFromTitle: this.getVariable("storyTiddler")
	};
	this.dispatchEvent(params);

[oeyoews]

I'm trying to trigger some TiddlyWiki events in js, some of which require a navigator widget, and I didn't know how to handle them, so I tried the motion plugin approach. Actually, using the startup module to add a custom event to pass data is a bad solution here, because the corresponding listener is not always added at the beginning. Just encapsulating it into a function and triggering it when the user clicks is enough.

module.exports = () => {
    function getNavigatorWidget(widget) {
      const child = widget.children?.[0];
      if (child?.parseTreeNode.type == 'navigator') {
        return child;
      }
      return getNavigatorWidget(child);
    }
    const menubarNav = getNavigatorWidget($tw.rootWidget);
    return menubarNav;
}