Help with event capture please [technical] moved to Developer forum

[TW_Tones]

I am hoping to build a custom widget that transudes the calling widget contents.

• An example would be one or more links or buttons in fact any content
• I would then like to wrap the <$slot $name="ts-raw"/> in an eventcatcher to trigger an additional action for any that occur
  • In one specific case I want to set a timestamp on the currentTiddler if any of these items are clicked on.

Question

Is there a way to capture such event that occur inside this but not consume it?

• Such that I will have an additional action occur for each in the body of the calling widget.
• And the original actions still proceed as coded?

I have seen how the message catcher does this such as catching tm-navigate, you then have to trigger a replacement tm-navigate action or the original is “consumed” and no navigation occurs.

Thanks in advance

[CodaCoder]

@TW_Tones

Is there a way to capture such event that occur inside this but not consume it?

<$eventcatcher ... stopPropagation=never> ...

[TW_Tones]

Thanks @CodaCoder this looked promising although it sounds opposite to what I need, so I set a widget up.

\widget $and.touch()
<$let widget="$and.touch" codeTiddler=<<thisTiddler>> >
<$eventcatcher selector=".item" $click=<<clickactions>> $contextmenu=<<contextmenu-actions>> tag="div">
<div class="item">
<$slot $name="ts-raw"/>
</div>
</$eventcatcher>
</$let>
\end $and.touch
\procedure clickactions()
<$action-log name=clickactions tiddler=<<currentTiddler>> code=<<codeTiddler>> />
\end 

<$and.touch>
file:///I:////!Master/KeyWikis/BlogToSelf.html
[[TableOfContents]]
</$and.touch>
\end 

So before adding stopPropagation=never it seems to be doing as desired for the file link. Perhaps there are some cases where it will not work without this. So I will check a few content examples.

• The log entry seems to occur in clicking an external link but not on a tiddler link, instead a separate catcher is loging only the tm-navigate.

Is there away to capture any event?

[CodaCoder]

@TW_Tones

Is there away to capture any event?

No. There are unlimited types of events if you include custom events (though arguably not so likely in wikitext). Plus, you can only catch events that “bubble”.

[TW_Tones]

@CodaCoder

Plus, you can only catch events that “bubble”.

So does that answer this Question I was about to ask?

Is it possible to get a full list of events we can capture and map them to common tiddlywiki triggers?

• Except for mapping them to tiddlywiki
  • Why would a click on an external link be caught and not that to an internal link?

[CodaCoder]

@TW_Tones

Why would a click on an external link be caught and not that to an internal link?

Perhaps TW is eating it (i.e. not allowing it to bubble).

[TW_Tones]

Then I may have to explicitly capture and resend such tm-navigate events.

But I wonder how many different events I need to encode separately.

• Then I can’t write an easy generic even capture

[CodaCoder]

I just took a look in the debugger. It’s not obvious that TW is withholding the event for internal links, but I’m not an expert on the core.

However, this is removing “something” but I’m not sure what:

[TW_Tones]

moved to Developer forum because it’s getting too technical and relates to inner core behaviour!

[TW_Tones]

Bump for our developers who know more about Event catching?

• I moved this out of the discussion topic.

[saqimtiaz]

@TW_Tones please provide more concrete details on exactly what you are trying to accomplish along with the code for a minimal (non-functional) example.

Your original post seems to conflate DOM events and widget messages, which are two entirely different things, and therefore need to be handled completely differently. Your later posts in this thread don’t quite reconcile with the request for assistance with the eventcatcher widget.

[TW_Tones]

@saqimtiaz I don’t know much about the DOM so I would not know how to conflate.

• Thanks for asking, I will try and explain.

I was hoping to write a custom widget, with an event catcher wrapped around the <$slot $name="ts-raw"/> to capture the event(s) there in. I was hoping to use it to learn more about event capturing.

• I was trying to solve a particular problem at the time but can’t recall it right now.
  • I will see if I can find it.
• The question was framed to see if there is a way to make a generic solution.
• We would be able to use it to wrap a catcher around anything we can put in a custom widget body.

@TW_Tones

Is there a way to capture such event that occur inside this but not consume it?

• Such that I will have an additional action occur for each in the body of the calling widget.
• And the original actions still proceed as coded?

• Such that Without having to specifically code a replacement for the event caught.
• As I understand this is only possible if the event is not consumed by the catcher.

For example what If I want one or more events, inside the catcher to trigger an action log event. Trigger the log event but also process the original event.

[saqimtiaz]

@TW_Tones

For example what If I want one or more events, inside the catcher to trigger an action log event. Trigger the log event but also process the original event.

OK let’s take a step back for a moment. Can you give me an example of such an event that you want to catch and execute additional actions for?

[TW_Tones]

Thank @saqimtiaz its late here and I will find my notes and reply tomorrow.

• I think it related to transcluding a Projectify project view and if any click took place in side it to timestamp the project. But let me check.

Night

[Update] @saqimtiaz please forgive my verbosity, this is a little hard for me to express.

I reviewed my extensive notes: This Topic was primarily originating from the desire for a conceptual solution, to help me work on multiple issues, including but not limited to;

• Propose and alternative method to introduce message/event captures without new page templates
  • Each requires a new layout, I am trying to see if there is a way to give hackability to introduce event and message catchers to the whole wiki without modifying the page template or adding a layout.
• Use message catcher on tm-save-wiki to set last save time, whereever its triggered?
• Actions on Opening and closing tiddlers
• Additional actions on a block of transcluded content, while letting the existing actions to occur

Here is an example of where it “fails”;

\widget $catch.nav(tiddler)
   \procedure on-navigate-actions()
       <$action-log/>
   \end on-navigate-actions
<$messagecatcher $tm-navigate=<<on-navigate-actions>>>
<$transclude tiddler=<<tiddler>> mode=block/>
</$messagecatcher>
\end 

<$catch.nav tiddler=HelloThere/>

For all events you can trigger in HelloThere we can log to the console. We can only catch navigation events, and HelloThere only contains internal and external navigation events.

• However due to the use of the message catcher the navigation events are consumed by it and no navigation occurs.
• Of course we can correct this by introducing a new action to “on-navigate-actions” above, in this case <$action-navigate $to=<<event-navigateTo>>/>
  • The navigation will also occur.
• The problem here is we need to specifically trap navigation events and have to specifically replace the navigation action.
• If we could turn off the consumption of the navigation event it would continue without us needing to hard code it, back in.

The bigger picture

Now imagine something similar with the event catcher widget doing the same;

• Any event occurring inside the catcher will be caught and depending on the actions triggered, additional actions can be introduced, including a simple log of every event/action.
• If the events caught are not consumed they will continue to occur without hard coding their “alternative”.
• This method could be used to investigate “any actions” which occur inside the catcher whilst still performing them.

Of course this form works when I include the replacement action navigate;

\widget $catch.nav()
   \procedure on-navigate-actions()
       <$action-log/>
       <$action-navigate $to=<<event-navigateTo>>/>
   \end on-navigate-actions
<$messagecatcher $tm-navigate=<<on-navigate-actions>>>
<$slot $name="ts-raw"/>
</$messagecatcher>
\end 

<$catch.nav>
{{HelloThere}}
</$catch.nav>

The biggest picture,

Adding hackable message and event capture without editing the core pagetemplate or adding layouts.

Either using parameters or transclusions to alter the events captured, or the response to those events, we would be able to introduce message and event captures to the core page template,. without modifying the page template (once this is implemented).

Your sincerly
Tony