slider
slider copied to clipboard
react-component
Touch direction locking
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.
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
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 ?
@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?
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 : )
