[🚀esl-event-listener]: ability to block swipe/longwheel events for scrollable content in the "middle" state

[ala-n]

As an ESL user, I want predictable UX behavior when the native event is shared with the scroll in the area.

Use case:

<my-swipe-area>
    <!-- esl-scrollable-content or just native overflow: scroll -->
    <div class="esl-scrollable-content">
        ... some large content 
    </div>
</my-swipe-area>

Where:

class MySwipeArea extends ESLBaseElement {
    static is = 'my-swipe-area';

    @listen({
        event: 'swipe',
        target: ESLSwipeGestureTarget.for
    })
    onSwipe() {
        // handle swipe
    }
}

In the described example, the swipe event will be triggered each time the user swipes the area long enough. But what if the user was manipulating with the scroll / "inner" scroll...

Proposed API:

Proposed is to add an ability to filter gesture events like swipe or longwheel when they conflict with the meaningful scroll action, i.e., the pointer/focus is on the scrollable element that is not on the axis bound that relates to the gesture direction.

Note: updated property from ignoreScroll to processOverflow

ESLSwipeGestureTarget.for($el, {
    processOverflow: boolean // true by default, false if the user does not need the described type of filtering
})

[ala-n]

:tada: This issue has been resolved in version 5.0.0-beta.10 :tada:

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[ala-n]

:tada: This issue has been resolved in version 4.16.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[ala-n]

:tada: This issue has been resolved in version 5.0.0-beta.12 :tada:

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: