From 290e273d14b1cbc82a2a4f0dc75df421b0048a99 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 8 Dec 2017 10:36:31 +1300
Subject: [PATCH] Context menu playing nicely with touch devices; fixes #210

---
 src/js/components/ContextMenu.js        | 17 +++++++++++++++--
 src/js/components/ContextMenuTrigger.js | 14 +++++++++++---
 src/js/components/Track.js              |  7 ++-----
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js
index 81d61d58..49ea9388 100755
--- a/src/js/components/ContextMenu.js
+++ b/src/js/components/ContextMenu.js
@@ -23,16 +23,19 @@ class ContextMenu extends React.Component{
 		}
 		this.handleScroll = this.handleScroll.bind(this);
 		this.handleMouseDown = this.handleMouseDown.bind(this);
+		this.handleTouchStart = this.handleTouchStart.bind(this);
 	}
 
 	componentDidMount(){
 		window.addEventListener("scroll", this.handleScroll, false);
 		window.addEventListener("mousedown", this.handleMouseDown, false);
+		window.addEventListener("touchstart", this.handleTouchStart, false);
 	}
 
 	componentWillUnmount(){		
 		window.removeEventListener("scroll", this.handleScroll, false);
 		window.removeEventListener("mousedown", this.handleMouseDown, false);
+		window.removeEventListener("touchstart", this.handleTouchStart, false);
 	}
 
 	componentWillReceiveProps(nextProps){
@@ -70,14 +73,24 @@ class ContextMenu extends React.Component{
 
 	handleScroll(e){
 		if (this.props.menu){
-			this.props.uiActions.hideContextMenu()
+			this.props.uiActions.hideContextMenu();
 		}
 	}
 
 	handleMouseDown(e){
 		// 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()
+			this.props.uiActions.hideContextMenu();
+		}
+	}
+
+	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();
 		}
 	}
 
diff --git a/src/js/components/ContextMenuTrigger.js b/src/js/components/ContextMenuTrigger.js
index 996ed248..c07ea410 100755
--- a/src/js/components/ContextMenuTrigger.js
+++ b/src/js/components/ContextMenuTrigger.js
@@ -8,7 +8,13 @@ export default class ContextMenuTrigger extends React.Component{
 		super(props);
 	}
 
-	handleClick(e){
+	handleTouchStart(e){
+		e.preventDefault();
+		e.stopPropagation();
+		this.props.onTrigger(e);
+	}
+
+	handleMouseDown(e){
 		e.preventDefault();
 		e.stopPropagation();
 		this.props.onTrigger(e);
@@ -20,8 +26,10 @@ export default class ContextMenuTrigger extends React.Component{
 			className += ' '+this.props.className
 		}
 		return (
-			<span className={className}
-				onClick={e => this.handleClick(e)}>
+			<span
+				className={className}
+				onTouchStart={e => this.handleTouchStart(e)}
+				onMouseDown={e => this.handleMouseDown(e)}>
 					<span className="dot"></span>
 					<span className="dot"></span>
 					<span className="dot"></span>
diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 36609f3e..3502ccd4 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -34,8 +34,6 @@ export default class Track extends React.Component{
 	handleMouseDown(e){
 		var target = $(e.target);
 
-		console.log(e.type);
-
 		// Clicked a nested link (ie Artist name), so no dragging required
 		if (target.is('a')){
 			return false;
@@ -141,9 +139,8 @@ export default class Track extends React.Component{
 
 		// Touch contextable
 		} else if (target.hasClass('touch-contextable')){
-			this.props.handleSelection(e);
-			this.handleContextMenu(e);
-			e.preventDefault();
+			// Don't interfere as the ContextMenuTrigger element handles click/touch
+
 		}
 
 		// Save our last tap