Context menu playing nicely with touch devices; fixes #210

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();
 		}
 	}
 

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>

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