Getting context menus to work on touch and mouse

src/js/components/ContextMenu.js

@@ -86,8 +86,6 @@ class ContextMenu extends React.Component{
 
 	handleTouchStart(e){
 
-		console.log(this.props)
-
 		// if we click (touch or mouse) outside of the context menu or context menu trigger, kill it
 		if ($(e.target).closest('.context-menu').length <= 0 && $(e.target).closest('.context-menu-trigger').length <= 0){
 			this.props.uiActions.hideContextMenu();

src/js/components/ContextMenuTrigger.js

@@ -8,13 +8,7 @@ export default class ContextMenuTrigger extends React.Component{
 		super(props);
 	}
 
-	handleTouchStart(e){
-		e.preventDefault();
-		e.stopPropagation();
-		this.props.onTrigger(e);
-	}
-
-	handleMouseDown(e){
+	handleClick(e){
 		e.preventDefault();
 		e.stopPropagation();
 		this.props.onTrigger(e);
@@ -28,8 +22,7 @@ export default class ContextMenuTrigger extends React.Component{
 		return (
 			<span
 				className={className}
-				onTouchStart={e => this.handleTouchStart(e)}
-				onMouseDown={e => this.handleMouseDown(e)}>
+				onClick={e => this.handleClick(e)}>
 					<span className="dot"></span>
 					<span className="dot"></span>
 					<span className="dot"></span>

src/js/components/List.js

@@ -23,14 +23,24 @@ class List extends React.Component{
 
 		// make sure we haven't clicked a nested link (ie Artist name)
 		if (e.target.tagName.toLowerCase() !== 'a'){
+			e.preventDefault();
+			hashHistory.push((this.props.link_prefix ? this.props.link_prefix : '') + encodeURIComponent(uri));
+		}
+	}
+
+	handleMouseDown(e, uri){
+
+		// make sure we haven't clicked a nested link (ie Artist name)
+		if (e.target.tagName.toLowerCase() !== 'a'){
+			e.preventDefault();
 			hashHistory.push((this.props.link_prefix ? this.props.link_prefix : '') + encodeURIComponent(uri));
 		}
 	}
 
 	handleContextMenu(e,item){
 		if (this.props.handleContextMenu){
-			e.preventDefault()
-			this.props.handleContextMenu(e,item)
+			e.preventDefault();
+			this.props.handleContextMenu(e,item);
 		}
 	}
 

src/js/components/Track.js

@@ -139,7 +139,18 @@ export default class Track extends React.Component{
 
 		// Touch contextable
 		} else if (target.hasClass('touch-contextable')){
-			// Don't interfere as the ContextMenuTrigger element handles click/touch
+
+			// Update our selection. By not passing touch = true selection will work like a regular click
+			this.props.handleSelection(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.handleContextMenu(e);
+				}, 
+				100
+			);
+			e.preventDefault();
 
 		}
 

src/js/components/TrackList.js

@@ -182,6 +182,7 @@ class TrackList extends React.Component{
 	}
 
 	handleContextMenu(e,track_key = null){
+		console.log(track_key);
 		let selected_tracks = this.props.selected_tracks
 
 		// Not already selected, so select it prior to triggering menu