Slider: Add touch event support for better mobile interaction

[nikunj8866]

Issues: #2361

[linux-foundation-easycla[bot]]

The committers listed above are authorized under a signed CLA.

• :white_check_mark: login: mgol / name: Michał Gołębiowski-Owczarek (8785ca9fac91830f1bb0335fb2304f74a0757324, 0fcab4c81976dac6628b0a473c21b1fc67a2e00c, ea2f0fa0d8c16e23369582da9c9d9f3debf86a4f)
• :white_check_mark: login: nikunj8866 / name: Nikunj Hatkar (4222b1346afb779c08cf4f666f688be416f201eb, f49700b186e494cb0c3bc83250f6e409d06c9790, 3670091b1d241fe5a2695c48b5acec010b10d896, 8d073693cc2b714e304acdf7bc9931296af5d43d)
• :white_check_mark: login: dependabot[bot] / name: dependabot[bot] (ce17d0df7429ed5ade0443f2493b547a4de1e358)

[joedolson]

This is a change that we'd really like to incorporate into the WordPress admin. If there's anything you need to help move it forward, happy to help.

[mgol]

Thanks for the PR. I'll look into it once we get jQuery 4.0.0-rc.1 out as that's our main focus at the moment.

[mgol]

In the meantime, can you fix the linting failures that you now should see reported?

[nikunj8866]

@mgol Thanks! I've resolved the reported linting errors. Let me know if there's anything else you'd like me to adjust in the meantime.

[mgol]

BTW, the test failures are a result of a config incompatibility between the older main branch and newer Node.js; please rebase and it should be green.

Of course, some unit tests could be useful here as well, but I see even our mouse coverage is not huge here due to difficulties testing such interactions in unit tests, so I didn't focus on that part; we'd manage to think about something, that's not the biggest issue to address.

[fnagel]

@mgol I agree that re-using (as in copy and modify) the mouse.js code would be good thing. Having support for pointer events and therefor better touch support would be great! Not quite sure how complicated it would be to use it in all widgets but I guess it has the potential for bugs ;-) Anyway, I'm no quite sure if its a good idea to create a special case for the slider (this PR and its built-in touch events) for the reasons you already noted but on the other hand I understand a fix is needed here.

The PR itself looks straight forward, but I have no time to test really test it thoroughly. Some, even basic unit test, would be very nice though.

FYI: there was once a plan to use PEP (Pointer Events Polyfill) everywhere, see the (very) old roadmap: https://jqueryui.pbworks.com/w/page/12138038/Roadmap Idea was to rewrite the mouse.js plugin to work with every type of events.

[markvantilburg]

There also is this project that translates touch events to mouse: https://github.com/RWAP/jquery-ui-touch-punch/tree/master

[mgol]

@nikunj8866 Are you willing to try to apply my remarks?

[nikunj8866]

Hi @mgol The Pointer Events approach and the idea of a pointer.js module sound really good, but it's a bit out of scope for me. I'm not that experienced with this area. I opened PR mainly to address the specific issue that was fixed in WordPress.

I think this Pointer Events approach is a great idea for a dedicated implementation.

[mgol]

@nikunj8866 Thanks for the response, I understand.

@joedolson you've asked what you can do to help moving this forward - that would be submitting a version of this PR with my feedback addressed. I can't say when I'd have time to look into it myself, our resources are limited here.

[markvantilburg]

Created a port of mouse.js to pointer.js https://github.com/jquery/jquery-ui/pull/2371/files

This would also be needed for the interactions "Draggable & Sortable"

[markvantilburg]

I also migrated Slider from Mouse to Pointer https://github.com/jquery/jquery-ui/pull/2373

Test fails since Pointer is not yet merged into main.