From f96437e8a9468be4c5f5a91b813a8da2f3bd9816 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Tue, 19 Dec 2017 21:14:01 +1300
Subject: [PATCH] Touchend detection of taps, removes need for select zone

---
 src/js/components/Track.js      | 40 +++++++++------
 src/js/components/TrackList.js  |  2 -
 src/scss/components/_lists.scss | 88 +++++++++------------------------
 3 files changed, 47 insertions(+), 83 deletions(-)

diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 1a98b159..1accf805 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -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 (
diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js
index 773ad0e5..2024ecd5 100755
--- a/src/js/components/TrackList.js
+++ b/src/js/components/TrackList.js
@@ -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];
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index 6837d795..da4b73eb 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -118,6 +118,29 @@
 				margin-top: -3px;
 				background: transparent;
 			}
+
+			&.has-touch-drag-zone {
+				padding-left: 45px;				
+
+				.drag-zone {
+					position: absolute;
+					top: 0;
+					left: 0;
+					height: 100%;
+					width: 34px;
+					font-size: 14px;
+					display: block;
+					color: $mid_grey;
+					
+					.fa {
+						position: absolute;
+						top: 50%;
+						left: 10px;
+						margin-top: -6px;
+						pointer-events: none;
+					}
+				}
+			}
 		}
 	}
 
@@ -240,71 +263,6 @@
 		}
 	}
 
-	.touch &.track-list {
-		.list-item {	
-
-			&.can-sort {
-				padding-left: 70px !important;
-			}
-			
-			&:not(.can-sort){
-				padding-left: 45px !important;
-			}
-
-			.select-zone {
-				position: absolute;
-				top: 0;
-				left: 0;
-				height: 100%;
-				width: 34px;
-				font-size: 8px;
-				display: block;
-				
-				.fa {
-					position: absolute;
-					top: 50%;
-					left: 17px;
-					margin-top: -3px;
-					pointer-events: none;
-					color: $white;
-					z-index: 1;
-				}
-
-				&:after {
-					display: block;
-					content: '';
-					border: 1px solid $mid_grey;
-					border-radius: 50%;
-					width: 14px;
-					height: 14px;
-					position: absolute;
-					top: 50%;
-					left: 14px;
-					margin-top: -7px;
-				}
-			}
-
-			.drag-zone {
-				position: absolute;
-				top: 0;
-				left: 34px;
-				height: 100%;
-				width: 34px;
-				font-size: 14px;
-				display: block;
-				color: $mid_grey;
-				
-				.fa {
-					position: absolute;
-					top: 50%;
-					left: 6px;
-					margin-top: -6px;
-					pointer-events: none;
-				}
-			}
-		}
-	}
-
 	@include responsive($bp_medium){
 
 		.list-item {