Touch direction locking

[DieterHolvoet]

Fixes issue #308. There's still 3 tests failing and all are related to dragOffset, but I don't really know what's wrong, so it would be nice if someone could have a look.

Biggest changes

Moved a big part of the code in onTouchStart to onFirstTouchMove to be called once within onTouchMove

Reason: It is impossible to determine the direction of the swipe in onTouchStart because there's only one touch point to work with. Because of that, we have to postpone the initialization of the component to the first call of onTouchMove, because at that point we have a second touch point to calculate the swipe direction with. If the swipe is in the wrong direction, the component will never be initialized, and page scroll will work as expected.

Added dragging state with matching class ${prefixCls}-dragging

Reason: because of the touch-action: none and touch-action: pan-x styles, page scrolling is interrupted regardless of what the component does. I added a new css class to set these styles after the component initialized to fix scrolling issues.

[DieterHolvoet]

I should also say that the horizontal slider with my changes has been used on a production site for about three months, everything working perfectly: https://www.klj.be/spelen/spelen-maken-of-vinden/spelendatabank

[dislick]

Your changes work very well for me, without them the slider is basically unusable on a mobile device where the user needs to scroll up and down the page. Could you please have a look at this @yesmeck ?

[luisrudge]

Any updates on this? 😬

[grahamcracker]

@zombieJ I'm interested in fixing this scroll issue as well - if I'm able to fix the unit tests, would this be a candidate for merging?

[zombieJ]

hi @grahamcracker , since I don't familiar with touch devices. I may need others to help check on this PR.
But yes, PR is welcomed : )

[0x5e5e]

any updates on this?

[yoyo837]

Rebase please.