diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.css b/plugins/talk-plugin-featured-comments/client/components/Tag.css index 88a019b5d..7ade3d968 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.css +++ b/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; diff --git a/plugins/talk-plugin-featured-comments/client/components/Tag.js b/plugins/talk-plugin-featured-comments/client/components/Tag.js index b7ee8cd6b..129e07851 100644 --- a/plugins/talk-plugin-featured-comments/client/components/Tag.js +++ b/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( -
+
this.tagEl = ref} + onMouseEnter={this.showTooltip} + onMouseLeave={this.hideTooltip} + className={styles.noSelect }> { isTagged(this.props.comment.tags, 'FEATURED') ? ( - + {t('talk-plugin-featured-comments.featured')} ) : null diff --git a/plugins/talk-plugin-featured-comments/client/utils/index.js b/plugins/talk-plugin-featured-comments/client/utils/index.js new file mode 100644 index 000000000..7d7d80969 --- /dev/null +++ b/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)); +};