Touch events for mobile :)

plugins/talk-plugin-featured-comments/client/components/Tag.css

@@ -24,6 +24,15 @@
   cursor: pointer;
 }
 
+.noSelect {
+  -ms-user-select:none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout:none;
+  user-select: none;
+  -webkit-tap-highlight-color:rgba(0,0,0,0);
+}
+
 .tooltip {
   top: 36px;
   left: auto;

plugins/talk-plugin-featured-comments/client/components/Tag.js

@@ -4,6 +4,7 @@ import styles from './Tag.css';
 import Tooltip from './Tooltip';
 import {t} from 'plugin-api/beta/client/services';
 import {isTagged} from 'plugin-api/beta/client/utils';
+import bowser from 'bowser';
 
 export default class Tag extends React.Component {
   constructor() {
@@ -15,6 +16,20 @@ export default class Tag extends React.Component {
 
   }
 
+  componentDidMount() {
+    if (bowser.mobile) {
+      this.tagEl.addEventListener('touchstart', this.showTooltip);
+      this.tagEl.addEventListener('touchend', this.hideTooltip);
+    }
+  }
+
+  componentWillUnmount() {
+    if (bowser.mobile) {
+      this.tagEl.removeEventListener('touchstart', this.showTooltip);
+      this.tagEl.removeEventListener('touchend', this.hideTooltip);
+    }
+  }
+
   showTooltip = () => {
     this.setState({
       tooltip: true
@@ -30,10 +45,14 @@ export default class Tag extends React.Component {
   render() {
     const {tooltip} = this.state;
     return(
-      <div onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip} >
+      <div ref={(ref) => this.tagEl = ref} 
+          onMouseEnter={this.showTooltip}
+          onMouseLeave={this.hideTooltip}
+          className={styles.noSelect }>
           {
             isTagged(this.props.comment.tags, 'FEATURED') ? (
-              <span className={cn(styles.tag, {[styles.on]: tooltip})}>
+              <span 
+                className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip})}>
                 {t('talk-plugin-featured-comments.featured')}
               </span>
             ) : null

plugins/talk-plugin-featured-comments/client/utils/index.js

@@ -0,0 +1,5 @@
+export const isTouchDevice = () => {
+  return (('ontouchstart' in window)
+    || (navigator.MaxTouchPoints > 0)
+    || (navigator.msMaxTouchPoints > 0));
+};