All events handled by targets, fixes #210

src/js/components/Track.js

@@ -24,17 +24,14 @@ export default class Track extends React.Component{
 	}
 
 	handleMouseEnter(e){
-		console.log("handleMouseEnter");
 		this.setState({hover: true});
 	}
 
 	handleMouseLeave(e){
-		console.log("handleMouseLeave");
 		this.setState({hover: false});
 	}
 
 	handleMouseDown(e){
-		console.log("handleMouseDown");
 		var target = $(e.target);
 
 		console.log(e.type);
@@ -58,7 +55,6 @@ export default class Track extends React.Component{
 	}
 
 	handleMouseMove(e){
-		console.log("handleMouseMove");
 		var target = $(e.target);
 
 		// No drag handling means NO
@@ -82,7 +78,6 @@ export default class Track extends React.Component{
 	}
 
 	handleMouseUp(e){
-		console.log("handleMouseUp");
 		var target = $(e.target);
 
 		// Only listen for left clicks
@@ -108,40 +103,47 @@ export default class Track extends React.Component{
 	}
 
 	handleDoubleClick(e){
-		console.log("handleDoubleClick");
 		this.props.handleDoubleClick(e);
 	}
 
 	handleTouchStart(e){
-		console.log("handleTouchStart");
 		var target = $(e.target);
 		var timestamp = Math.floor(Date.now());
 
 		// Clicked a nested link (ie Artist name), so no touch intervention required
 		if (target.is('a')){
-			console.log('a');
 			return false;
 
 		// We started a touchstart within 300ms ago, so handle as double-tap
 		} else if ((timestamp - this.last_touchstart) > 0 && (timestamp - this.last_touchstart) <= 300){
-			e.preventDefault();
+
+			// Update our selection. By not passing touch = true selection will work like a regular click
 			this.props.handleSelection(e);
-			this.props.handleDoubleClick(e);
+
+			// Wait a moment to give Redux time to update our selected tracks
+			// TODO: Use proper callback, rather than assuming a fixed period of time for store change
+			setTimeout(() => {
+					this.props.handleDoubleClick(e);
+				}, 
+				100
+			);
+			e.preventDefault();
 
 		// Touch-drag zone
 		} else if (target.hasClass('drag-zone')){
-			e.preventDefault();
 			this.props.handleTouchDrag(e);
+			e.preventDefault();
 
 		// Select zone
 		} else if (target.hasClass('select-zone')){
+			this.props.handleSelection(e, true);
 			e.preventDefault();
-			this.props.handleSelection(e);
 
 		// Touch contextable
 		} else if (target.hasClass('touch-contextable')){
+			this.props.handleSelection(e);
+			this.handleContextMenu(e);
 			e.preventDefault();
-			this.props.handleContextMenu(e);
 		}
 
 		// Save our last tap
@@ -151,7 +153,6 @@ export default class Track extends React.Component{
 	}
 
 	handleTouchEnd(e){
-		console.log("handleTouchEnd");
 		var target = $(e.target);
 		var timestamp = Math.floor(Date.now());
 
@@ -162,7 +163,6 @@ export default class Track extends React.Component{
 	}
 
 	handleContextMenu(e){
-		console.log("handleContextMenu");
 		e.preventDefault();
 		e.stopPropagation();
 		e.cancelBubble = true;

src/js/components/TrackList.js

@@ -158,14 +158,12 @@ class TrackList extends React.Component{
 				over = over.closest('.track')
 			}
 			if (over.length > 0){
-				let siblings = over.parent().children('.track')
-				let dropped_at = siblings.index(over) - 1
-
-				console.log('touchend',helpers.arrayOf('index',this.digestTracksKeys()),'to',dropped_at)
+				let siblings = over.parent().children('.track');
+				let dropped_at = siblings.index(over) - 1;
 
 				if (this.props.reorderTracks !== undefined){
-					this.props.reorderTracks(helpers.arrayOf('index',this.digestTracksKeys()),dropped_at)
-					this.props.uiActions.setSelectedTracks([])
+					this.props.reorderTracks(helpers.arrayOf('index',this.digestTracksKeys()),dropped_at);
+					this.props.uiActions.setSelectedTracks([]);
 				}
 			}
 
@@ -204,13 +202,14 @@ class TrackList extends React.Component{
 			uris: selected_tracks_uris,
 			indexes: selected_tracks_indexes
 		}
+
 		this.props.uiActions.showContextMenu(data);
 	}
 
-	handleSelection(e,track_key){
+	handleSelection(e, track_key, touched = false){
 		let selected_tracks = this.props.selected_tracks
 
-		if ((e.ctrlKey || e.metaKey) || this.props.slim_mode || helpers.isTouchDevice()){
+		if ((e.ctrlKey || e.metaKey) || touched){
 
 			// Already selected, so unselect it
 			if (selected_tracks.includes(track_key)){
@@ -253,7 +252,7 @@ class TrackList extends React.Component{
 			selected_tracks = [track_key]
 		}
 
-		this.props.uiActions.setSelectedTracks(selected_tracks)
+		this.props.uiActions.setSelectedTracks(selected_tracks);
 	}
 
 	isRightClick(e){
@@ -436,7 +435,7 @@ class TrackList extends React.Component{
 									can_sort={this.props.context == 'queue' || this.props.context == 'editable-playlist'} 
 									selected={this.props.selected_tracks.includes(track_key)} 
 									dragger={this.props.dragger} 
-									handleSelection={e => this.handleSelection(e, track_key)}
+									handleSelection={(e, touched = false) => this.handleSelection(e, track_key, touched)}
 									handleDoubleClick={e => this.handleDoubleClick(e, track_key)}
 									handleContextMenu={e => this.handleContextMenu(e, track_key)}
 									handleDrag={e => this.handleDrag(e, track_key)}

src/js/services/ui/actions.js

@@ -12,8 +12,15 @@ export function setSelectedTracks(keys = []){
 }
 
 export function showContextMenu(data){
-    data.position_x = data.e.clientX;
-    data.position_y = data.e.clientY;
+
+    if (data.e.touches){
+        data.position_x = data.e.touches[0].clientX;
+        data.position_y = data.e.touches[0].clientY;
+    } else {
+        data.position_x = data.e.clientX;
+        data.position_y = data.e.clientY;
+    }
+
     return {
         type: 'SHOW_CONTEXT_MENU',
         data: data