Slider: Add touch event support for better mobile interaction

[nikunj8866]

Issues: #2361

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: nikunj8866 / name: Nikunj Hatkar (4222b13, 3670091)

[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]

I played with the PR a little. I'm a little torn where to go from there, so I'll present my thinking.

On one hand, this seems to work fine (though I'd have to spend a bit more time testing) and in so little code it's hard to believe.

On the other hand, jQuery UI has abstracted mouse interactions between many widgets into a separate https://github.com/jquery/jquery-ui/blob/1.14.1/ui/widgets/mouse.js file used by the slider, draggable, resizable, selectable & sortable widgets. All of them could use better touch support as well.

I've been thinking that it'd be good to make use of Pointer Events here and create a pointer.js version of the mouse.js file that just does everything in pointer events, with similar extension methods, without handling mouse & touch events separately.

For backwards compatibility with all the plugins out there who may expect touch events to not be handled, we'd probably have to keep mouse.js as an optional module, but we could switch our widgets to the new pointer.js one. It'd be good to preserve as much of the interface as possible unless it totally doesn't make sense in pointer events. This could then be shipped as part of 1.15.0.

The mouse.js module is bigger than this patch but it's still not huge. I think I'd prefer to at least try using Pointer Events for this and avoid forking the events - also because it will be easier to maintain that way, especially given our limited mobile test coverage.

We only support modern browsers in the latest versions of jQuery UI, so we don't need any fallbacks or polyfills for Pointer Events, we should just be able to use them.

What do you think? Would you like to attempt such an implementation?

P.S. If it turns out that this migration has some issues that would have to be ironed out for non-slider components currently using mouse.js, we could just migrate slider.js to use pointer.js initially and leave the other migrations for separate PRs or future versions, depending on the effort required.

@fnagel I'd also love your thoughts here.

[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.