secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Touchend detection of taps, removes need for select zone

Browse Source
This commit is contained in:
James Barnsley
2017-12-19 21:14:01 +13:00
parent 46381d2319
commit f96437e8a9
3 changed files with 47 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/js/components/Track.js
View File

@ -158,11 +158,29 @@ export default class Track extends React.Component{
handleTouchEnd(e){
var target = $(e.target);
var timestamp = Math.floor(Date.now());
var tap_distance_threshold = 10; // Max distance (px) between touchstart and touchend to qualify as a tap
var tap_time_threshold = 200; // Max time (ms) between touchstart and touchend to qualify as a tap
var end_position = {
x: e.changedTouches[0].clientX,
y: e.changedTouches[0].clientY
}
// Clicked a nested link (ie Artist name), so no dragging required
if (!target.is('a')){
e.preventDefault();
}
// Too long between touchstart and touchend
if (this.start_time + tap_time_threshold < timestamp){
return false;
}
if (this.start_position.x + tap_distance_threshold > end_position.x &&
this.start_position.x - tap_distance_threshold < end_position.x &&
this.start_position.y + tap_distance_threshold > end_position.y &&
this.start_position.y - tap_distance_threshold < end_position.y){
this.props.handleSelection(e, true);
}
}
handleContextMenu(e){
@ -299,27 +317,17 @@ export default class Track extends React.Component{
<ContextMenuTrigger key="context" onTrigger={e => this.handleContextMenu(e)} />
)
if (this.props.mini_zones){
// If we're touchable, and can sort this tracklist
if (helpers.isTouchDevice() && this.props.can_sort){
className += " has-touch-drag-zone"
// Select zone handles selection events only
// We use onClick to capture touch as well as mouse events in one tidy parcel
track_actions.push(
<span
className="select-zone touch-selectable mouse-selectable"
key="select-zone">
{this.props.selected ? <FontAwesome name="check" className="selected" fixedWidth /> : null}
className="drag-zone touch-draggable mouse-draggable"
key="drag-zone">
<FontAwesome name="bars" fixedWidth />
</span>
)
if (this.props.can_sort){
track_actions.push(
<span
className="drag-zone touch-draggable mouse-draggable"
key="drag-zone">
<FontAwesome name="bars" fixedWidth />
</span>
)
}
}
return (

2
src/js/components/TrackList.js
View File

@ -184,8 +184,6 @@ class TrackList extends React.Component{
handleContextMenu(e, track_key = null){
let selected_tracks = this.props.selected_tracks;
console.log(selected_tracks);
// Not already selected, so select it prior to triggering menu
if (track_key && !selected_tracks.includes(track_key)){
selected_tracks = [track_key];