Replace touch and mouse events with pointer events

[nerdyman]

The library currently uses mouse and touch event bindings from V1 when IE11 was supported. All currently targeted browsers support pointer events so they should be used instead.

See https://github.com/nerdyman/react-compare-slider/commit/5c84c5c7334dd2724d12a4c6e0eba043dd6aa687 (full file here) for a reference implementation.

Requirements

• [ ] Add touchAction: 'none' style property to root element
• [ ] Replace mousedown event binding with pointerdown
• [ ] Remove touchstart event binding
• [ ] Update mouse and touch handlers to replace MouseEvent | TouchEvent with PointerEvent
• [ ] Remove instanceof ternaries in mouse and touch handlers, we can use ev.pageX and ev.pageY

Testing

• [ ] Test on iOS Safari
• [ ] Test on Firefox Android
• [ ] Test on Chrome Safari
• [ ] Test on Android Chrome
• [ ] Test on Desktop Safari
• [ ] Test on Desktop Chrome
• [ ] Test on Desktop Firefox

Notes

Some automated testing with Storybook has been set up in #65 so it's probably worth waiting for that to be merge before starting this.

[muditchoudhary]

hey @nerdyman I would like to work on this. But could you describe a more like What are the files where I need to replace touch/mouse events with a pointer?

[nerdyman]

Hey @muditchoudhary! I've updated the ticket to include a link to a reference implementation and have added some requirements. I still need to do #87 before any Hacktoberfest tickets can be merged, I'll be sorting it out later today.

[muditchoudhary]

okay, No issue.

[nerdyman]

This is ready to tackle @muditchoudhary , let me know if you need any more info.

[muditchoudhary]

This is ready to tackle @muditchoudhary, let me know if you need any more info.

okay, that's awesome, I'll start working today If I need any help I'll surely reach you. Thanks!!

[muditchoudhary]

Hello, @nerdyman I'm getting this error when I replace MouseEvent | TouchEvent with PointerEvent :

But If I Put it like this function moveCall(ev: PointerEvent | MouseEvent) { the error has gone. So what should I do? should I put both PointerEvent & MouseEvent?

[muditchoudhary]

One more thing, where will I find the touchAction: 'none' property? I did not see any style file and I've also checked other files where I could find this. can you please tell me in which file do I need to check this?

[nerdyman]

@muditchoudhary Those events need removed/replaced with pointerup and pointermove events. I've updated the description for this issue to include links to the full file and also to the previously closed PR. Note that the linked PR also includes a new transition feature, that feature is not part of this ticket, just the pointer events changes listed in the description of this issue.

Here's a link to the diff for the pointer events in that PR. The styles for the root element are in rootStyles in the main component.

The linked PR should have everything needed to check the requirements for this PR. This isn't the simplest issue so if you'd like something else for Hacktoberfest #75 is also open.

[muditchoudhary]

@nerdyman If this issue requires the work of just replacing the events in the code I could do that. I'll try to fix this issue with the help of your PR. If I will not able to do it I'll tell you.