Timer for touch_hold set to 500ms. This may change per device, but enough to fix #75

This commit is contained in:
James Barnsley
2017-03-14 08:31:53 +13:00
parent 87e4311d40
commit 7e67926cee
2 changed files with 20 additions and 12 deletions

View File

@ -20,13 +20,6 @@ export default class Track extends React.Component{
}
}
handleTouchStart(e){
var target = $(e.target);
if( !target.is('a') && target.closest('a').length <= 0 ){
this.props.handleTouchStart(e);
}
}
handleTouchEnd(e){
var target = $(e.target);
if( !target.is('a') && target.closest('a').length <= 0 ){

View File

@ -18,6 +18,8 @@ class TrackList extends React.Component{
this._touch_threshold = 10
this._touch_x = null
this._touch_y = null
this._touch_hold_timer = null
this._touch_held = false
this.state = {
tracks: [],
@ -61,11 +63,20 @@ class TrackList extends React.Component{
handleTouchStart(e,index){
this._touch_x = Math.round(e.changedTouches[0].pageX)
this._touch_y = Math.round(e.changedTouches[0].pageY)
this._touch_hold_timer = setTimeout(() => {this.handleTouchHold(e,index)}, 500, e)
}
handleTouchHold(e,index){
this._touch_held = true
var tracks = this.state.tracks
tracks[index].selected = true
this.setState({ tracks: tracks, lastSelectedTrack: index })
}
handleTouchEnd(e,index){
var pageX = Math.round(e.changedTouches[0].pageX)
var pageY = Math.round(e.changedTouches[0].pageY)
clearTimeout(this._touch_hold_timer)
// make sure our touch was within the threshold of the touch start
// this helps us differentiate between taps and drags but doesn't consider
@ -75,12 +86,16 @@ class TrackList extends React.Component{
this._touch_y < ( pageY + this._touch_threshold ) &&
this._touch_y > ( pageY - this._touch_threshold ) ){
// toggle selection
var tracks = this.state.tracks
tracks[index].selected = !tracks[index].selected
this.setState({ tracks: tracks, lastSelectedTrack: index })
// make sure we didn't touch and hold, as that's different to a tap
if (!this._touch_held){
var tracks = this.state.tracks
tracks[index].selected = !tracks[index].selected
this.setState({ tracks: tracks, lastSelectedTrack: index })
//this.handleContextMenu(e)
// release our held switch for the next interaction
} else {
this._touch_held = false
}
}
e.preventDefault()