sync-by-unito[bot]
commented
1 year ago ➤ Sam commented:
I asked GPT
I have transparent HTML div.gesture-detector element. Behind div.gesture-detector element I have an iframe. I want to div.gesture-detector element to react only to swipe left/right every other gestures should be passed to iframe element. how can I achieve it?
GPT answer
To achieve this, you can use the Pointer Events API to listen for pointerdown, pointermove, and pointerup events on the div.gesture-detector element. You can then calculate the movement and detect if a swipe left or right has occurred. If any other gestures are detected, you can use the elementFromPoint() method to find the iframe element beneath the div.gesture-detector and manually dispatch the events to that element.
Here's an example of how to implement this behavior:
htmlCopy code
<!DOCTYPE html>
In this example, we have an iframe and a transparent div.gesture-detector element. The script detects swipe left/right gestures on the div.gesture-detector element. If a swipe left/right is not detected, the events are passed through to the iframe element using the elementFromPoint() method and manually dispatching the events.
Summary: our use case bit different but it's good starting point.
Relevant Comment by @Sam on [issue] capture details swipe left, right is not showing expected capture
One experiment we can try is to use pointer-event:
Put iframe behind invisible area.
Invisible area will detect gestures such as
if gesture is swipe left/right we use it to change asset details page
else we pass gesture to iframe
┆Issue is synchronized with this Asana task by Unito ┆Created By: Sam