diff options
author | ThibG <thib@sitedethib.com> | 2019-07-21 18:10:40 +0200 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2019-07-23 16:24:21 +0200 |
commit | c1231a846ac7b4a83b5b5b05384bca670d66ccde (patch) | |
tree | aa2486051173cf34d28ebdf8d7910265e348f913 /app/javascript/flavours/glitch/components/status_content.js | |
parent | 621590b4ab31dd12de97ded31f17a00ff2fc6dd6 (diff) |
[Glitch] Play animated custom emoji on hover
Port 7de8c51873b51d8450f7a6597a43d454964d0407 to glitch-soc
Diffstat (limited to 'app/javascript/flavours/glitch/components/status_content.js')
-rw-r--r-- | app/javascript/flavours/glitch/components/status_content.js | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/components/status_content.js b/app/javascript/flavours/glitch/components/status_content.js index 07a0d1d5d..6e357fba0 100644 --- a/app/javascript/flavours/glitch/components/status_content.js +++ b/app/javascript/flavours/glitch/components/status_content.js @@ -5,6 +5,7 @@ import { isRtl } from 'flavours/glitch/util/rtl'; import { FormattedMessage } from 'react-intl'; import Permalink from './permalink'; import classnames from 'classnames'; +import { autoPlayGif } from 'flavours/glitch/util/initial_state'; export default class StatusContent extends React.PureComponent { @@ -57,12 +58,35 @@ export default class StatusContent extends React.PureComponent { } } + _updateStatusEmojis () { + const node = this.node; + + if (!node || autoPlayGif) { + return; + } + + const emojis = node.querySelectorAll('.custom-emoji'); + + for (var i = 0; i < emojis.length; i++) { + let emoji = emojis[i]; + if (emoji.classList.contains('status-emoji')) { + continue; + } + emoji.classList.add('status-emoji'); + + emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false); + emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false); + } + } + componentDidMount () { this._updateStatusLinks(); + this._updateStatusEmojis(); } componentDidUpdate () { this._updateStatusLinks(); + this._updateStatusEmojis(); if (this.props.onUpdate) this.props.onUpdate(); } @@ -86,6 +110,14 @@ export default class StatusContent extends React.PureComponent { } } + handleEmojiMouseEnter = ({ target }) => { + target.src = target.getAttribute('data-original'); + } + + handleEmojiMouseLeave = ({ target }) => { + target.src = target.getAttribute('data-static'); + } + handleMouseDown = (e) => { this.startXY = [e.clientX, e.clientY]; } |