Adds pointer capture and disabling support to eventcatcher widget #9609
Conversation
✅ Deploy Preview for tiddlywiki-previews ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Confirmed: saqimtiaz has already signed the Contributor License Agreement (see contributing.md) |
📊 Build Size Comparison:
|
| Branch | Size |
|---|---|
| Base (master) | 2448.0 KB |
| PR | 2453.6 KB |
Diff: ⬆️ Increase: +5.6 KB
✅ Change Note Status
All change notes are properly formatted and validated!
📝 $:/changenotes/5.4.0/#9609
Type: enhancement | Category: widget
Release: 5.4.0
adds support for pointer capture and enabling/disabling the widget
🔗 #9609
👥 Contributors: saqimtiaz
📖 Change Note Guidelines
Change notes help track and communicate changes effectively. See the full documentation for details.
|
@Jermolene seeing as how this is a complete rewrite, should we take this opportunity to switch to using JavaScript classes?
|
| if(matchSelector && !selectedNode.matches(matchSelector)) { | ||
| return null; | ||
| } | ||
| if(selector) { |
There was a problem hiding this comment.
Could we have something like
// Search ancestors for a node that matches the selector
const matchedAncestor = selectedNode.closest(selector);
// Exit if we didn't find the selector, or if we went past domNode
if(!matchedAncestor || !domNode.contains(matchedAncestor)) {
return false;
}
using closest() instead of the while loop? All rlevant browser should support this from 2017 on.
There was a problem hiding this comment.
The while loop is actually problematic when you have a listener like "pointerdown" on a DOM element that changes or disappears due to the click. That can lead to parentNode being null at some point in the traversal, giving an RSoE. In an exemplary case this happens with a Pikaday calendar.
There was a problem hiding this comment.
Using closest() wont stop at the widget DOM node boundary and could give therefore give false positive results. We can guard against parentNode being null.
This might work but I will need to investigate next week, I am away until Wednesday, Feb 4th.
const matchedAncestor = selectedNode.closest(selector);
selectedNode = (matchedAncestor && domNode.contains(matchedAncestor))
? matchedAncestor
: null;
|
Hi @saqimtiaz, we should probably unify the parameter names between this PR and #9528. |
2 participants
This PR introduces three major enhancements to the EventCatcher widget:
Optional Pointer Capture Support
Adds native pointer capture handling to improve pointer event reliability and tracking outside the widget DOM nodes boundaries. When enabled, pointer events such as
pointermove,pointerup, andpointercancelare correctly captured and routed to the widget, even if the pointer moves off-screen or outside the element.The pointer capture logic supports two modes of event listener attachment for better performance and control.
Widget Enable/Disable Control
Adds a new attribute to enable or disable the EventCatcher widget at runtime. This allows users to temporarily deactivate event handling without removing the widget or disrupting the DOM structure, enhancing flexibility for dynamic UIs.
Access to a JSON blob containing event properties via the variable
eventJSON. The event.detail related variables have been deprecated as they were always brittle and the seem needs can now be met viaeventJSON.User-Facing Attributes
enabledyesno, all event listeners are removed.pointerCapturenoyes,no,dynamic).Detailed Behavior of
pointerCaptureWhen
pointerCaptureisdynamicpointerdown,pointerupandpointercancelevent listeners at the appropriate time even if they are not specified in the widget attributes.pointerdownevent listener is attached when the widget is initialized and when apointerdownoccurs, pointer capture is set withsetPointerCapture.pointeruppointercancelpointermove(only if the user has specified it in the widget attributes)pointeruporpointercancel), these active listeners are removed, and pointer capture is released.When
dynamicPointerListenersisyespointerdownhas been specified, it initiates pointer capture.pointeruporpointercancelhave been specified, they release pointer capture.To Do: