Skip to content

Commit

Permalink
fix slidable
Browse files Browse the repository at this point in the history
  • Loading branch information
@ali322
ali322 committed Mar 22, 2016
1 parent 90eb23a commit 7c313f8
Show file tree
Hide file tree
Showing 4 changed files with 321 additions and 163 deletions.
77 changes: 49 additions & 28 deletions src/component/slidable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,63 +119,76 @@ class Slidable extends Component{
if(this.props.onlyInside && !inTouchableRegion){
return;
}
if(this.props.handleActiveChange === false){
return;
}
// if(this.props.handleActiveChange === false){
// return;
// }
// let touchDirection = Math.abs(this.endTouchX - this.startTouchX) > Math.abs(this.endTouchY - this.startTouchY) ?
// "x":"y";
if(this.moveDirection !== axis){
return;
}
let nextIndex = this.state.activeIndex;
let activeIndex = this.state.activeIndex;
let itemNode = ReactDOM.findDOMNode(this).firstChild
if(axis === "y"){
let itemHeight = itemNode.offsetHeight;
let activeIndex = Math.abs(this.translateY) / itemHeight
// let activeIndex = Math.abs(this.translateY) / itemHeight
let step = (this.endTouchY - this.startTouchY) / itemHeight
activeIndex = (Math.abs(step) > thresholdOfChange && step < 0) ? Math.ceil(activeIndex):Math.floor(activeIndex)
activeIndex = (Math.abs(step) > thresholdOfChange && step > 0) ? Math.floor(activeIndex):Math.ceil(activeIndex)
// activeIndex = (Math.abs(step) > thresholdOfChange && step < 0) ? Math.ceil(activeIndex):Math.floor(activeIndex)
// activeIndex = (Math.abs(step) > thresholdOfChange && step > 0) ? Math.floor(activeIndex):Math.ceil(activeIndex)
if(Math.abs(step) > thresholdOfChange){
if(step > 0){
activeIndex -= 1
}else if(step < 0){
activeIndex += 1
}
}
if(this.lastY !== this.startTouchY && activeIndex !== this.state.activeIndex){
nextIndex = activeIndex;
this.setState({
activeIndex:activeIndex
},()=>this.props.handleActiveChange(activeIndex))
}
this.translateY = (nextIndex * itemNode.offsetHeight) > 0 ?
- (nextIndex * itemNode.offsetHeight) :0;
this.translateY = (activeIndex * itemNode.offsetHeight) > 0 ?
- (activeIndex * itemNode.offsetHeight) :0;
}else if(axis === "x"){
let itemWidth = itemNode.offsetWidth;
let activeIndex = Math.abs(this.translateX) / itemWidth
// let activeIndex = Math.abs(this.translateX) / itemWidth
let step = (this.endTouchX - this.startTouchX) / itemWidth
// console.log('step',this.endTouchX,this.startTouchX,step)
activeIndex = (Math.abs(step) > thresholdOfChange && step < 0) ? Math.ceil(activeIndex):Math.floor(activeIndex)
activeIndex = (Math.abs(step) > thresholdOfChange && step > 0) ? Math.floor(activeIndex):Math.ceil(activeIndex)
if(Math.abs(step) > thresholdOfChange){
if(step > 0){
activeIndex -= 1
}else if(step < 0){
activeIndex += 1
}
}
// activeIndex = (Math.abs(step) > thresholdOfChange && step < 0) ? Math.ceil(activeIndex):Math.floor(activeIndex)
// activeIndex = (Math.abs(step) > thresholdOfChange && step > 0) ? Math.floor(activeIndex):Math.ceil(activeIndex)
console.log('step',step,activeIndex)
if(this.lastX !== this.startTouchX && activeIndex !== this.state.activeIndex){
nextIndex = activeIndex;
this.setState({
activeIndex:activeIndex
},()=>this.props.handleActiveChange(activeIndex))
}
this.translateX = (nextIndex * itemNode.offsetWidth) > 0 ?
- (nextIndex * itemNode.offsetWidth) :0;
this.translateX = (activeIndex * itemNode.offsetWidth) > 0 ?
- (activeIndex * itemNode.offsetWidth) :0;
}
this.checkBound()
// console.log('this.translateX',Math.abs(this.endTouchX - this.startTouchX),Math.abs(this.endTouchY - this.startTouchY))
// console.log('translateY',this.translateY)
// this.transitionTouch(this.props.animateDuration)
// if(this.touchDirection() === axis){
let transitionTouch = this.transitionTouch.bind(this,animateDuration)
this.timeout = setTimeout(()=>{
transitionTouch()
clearTimeout(this.timeout)
},30)
// this.timeout = setTimeout(()=>{
// transitionTouch()
// clearTimeout(this.timeout)
// },10)
transitionTouch()
// rAF(this.transitionTouch.bind(this,animateDuration))
dom.removeClass(ReactDOM.findDOMNode(this),"sliding")
}
}
handleTouchMove(e){
e && e.preventDefault()
// e && e.stopPropagation();
e && e.stopPropagation();
const {animateDuration,axis} = this.props;
const {clientY,clientX} = e.changedTouches[0];
const inTouchableRegion = dom.inTouchableRegion(clientX,clientY,e.currentTarget);
Expand All @@ -184,13 +197,14 @@ class Slidable extends Component{
}
let moveY = Math.abs(clientY - this.startTouchY);
let moveX = Math.abs(clientX - this.startTouchX);
if(axis === "x" && moveX < 30){
return
}else if(axis === "y" && moveY < 10){
return
if(axis === "x" && moveX < 3){
// return
}else if(axis === "y" && moveY < 3){
// return
}
let touchAngle = Math.atan2(moveY,moveX) * 180 / Math.PI
let moveDirection = touchAngle < 45 ?"x":"y"
// console.log('touchAngle',touchAngle,moveY,moveX)
let moveDirection = touchAngle < 15 ?"x":"y"
// let moveDirection = moveY > moveX ?"y":"x"
if(this.moveDirection && this.moveDirection !== moveDirection){
return
Expand Down Expand Up @@ -233,6 +247,13 @@ class Slidable extends Component{
let translateNode = ReactDOM.findDOMNode(this);
let maxBeyondY = translateNode.offsetHeight - translateNode.parentNode.offsetHeight;
let maxBeyondX = translateNode.offsetWidth - translateNode.parentNode.offsetWidth;
if(maxBeyondY < 0 && axis === "y"){
// console.log('cant translateY')
this.translateY = 0
}
if(maxBeyondX < 0 && axis === "x"){
this.translateX = 0
}
if(maxBeyondY <= (- this.translateY) && maxBeyondY > 0 && axis === "y"){
this.translateY = - maxBeyondY
}else if(maxBeyondX <= (- this.translateX) && maxBeyondX > 0 && axis === "x"){
Expand Down Expand Up @@ -283,7 +304,7 @@ Slidable.defaultProps = {
pinMode:false,
transitionMove:true,
simulateTranslate:false,
handleActiveChange:false
handleActiveChange:()=>{}
}

export default Slidable;
18 changes: 9 additions & 9 deletions src/component/slider/slider.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,29 +116,29 @@ class Slider extends Component{
}
}
handleTouchStart(e){
if(this.props.touchEnabled === false){
return
}
// e && e.preventDefault();
e && e.stopPropagation();
if(this.animateSlide() === true){
return;
}
if(this.touchEnabled === false){
return
}
const {clientY,clientX} = e.changedTouches[0];
this.startTouchX = clientX;
this.startTouchY = clientY;
this.moveDirection = null;
// console.log('touch start',e.changedTouches,e.targetTouches,e.touches)
}
handleTouchEnd(e){
if(this.props.touchEnabled === false){
return
}
// e && e.preventDefault();
e && e.stopPropagation();
if(this.animateSlide() === true){
return;
}
if(this.touchEnabled === false){
return
}

const {clientY,clientX} = e.changedTouches[0];
const inTouchableRegion = this.inTouchableRegion(clientX,clientY,e.currentTarget);
Expand Down Expand Up @@ -201,12 +201,12 @@ class Slider extends Component{
handleTouchMove(e){
// e && e.preventDefault();
// e && e.stopPropagation();
if(this.props.touchEnabled === false){
return
}
if(this.animateSlide() === true){
return;
}
if(this.touchEnabled === false){
return
}

const {clientY,clientX} = e.changedTouches[0];
const inTouchableRegion = this.inTouchableRegion(clientX,clientY,e.currentTarget);
Expand Down

0 comments on commit 7c313f8

Please sign in to comment.