* Play animated custom emoji on hover in status * Play animated custom emoji on hover in display names * Play animated custom emoji on hover in bios/bio fields * Add support for animation on hover on public pages emojis too * Fix tests * Code style cleanupmaster^2
@@ -1,6 +1,7 @@ | |||
import React from 'react'; | |||
import ImmutablePropTypes from 'react-immutable-proptypes'; | |||
import PropTypes from 'prop-types'; | |||
import { autoPlayGif } from 'mastodon/initial_state'; | |||
export default class DisplayName extends React.PureComponent { | |||
@@ -10,6 +11,47 @@ export default class DisplayName extends React.PureComponent { | |||
localDomain: PropTypes.string, | |||
}; | |||
_updateEmojis () { | |||
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._updateEmojis(); | |||
} | |||
componentDidUpdate () { | |||
this._updateEmojis(); | |||
} | |||
handleEmojiMouseEnter = ({ target }) => { | |||
target.src = target.getAttribute('data-original'); | |||
} | |||
handleEmojiMouseLeave = ({ target }) => { | |||
target.src = target.getAttribute('data-static'); | |||
} | |||
setRef = (c) => { | |||
this.node = c; | |||
} | |||
render () { | |||
const { others, localDomain } = this.props; | |||
@@ -39,7 +81,7 @@ export default class DisplayName extends React.PureComponent { | |||
} | |||
return ( | |||
<span className='display-name'> | |||
<span className='display-name' ref={this.setRef}> | |||
{displayName} {suffix} | |||
</span> | |||
); | |||
@@ -7,6 +7,7 @@ import Permalink from './permalink'; | |||
import classnames from 'classnames'; | |||
import PollContainer from 'mastodon/containers/poll_container'; | |||
import Icon from 'mastodon/components/icon'; | |||
import { autoPlayGif } from 'mastodon/initial_state'; | |||
const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) | |||
@@ -71,12 +72,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(); | |||
} | |||
onMentionClick = (mention, e) => { | |||
@@ -95,6 +119,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]; | |||
} | |||
@@ -79,6 +79,47 @@ class Header extends ImmutablePureComponent { | |||
return !location.pathname.match(/\/(followers|following)\/?$/); | |||
} | |||
_updateEmojis () { | |||
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._updateEmojis(); | |||
} | |||
componentDidUpdate () { | |||
this._updateEmojis(); | |||
} | |||
handleEmojiMouseEnter = ({ target }) => { | |||
target.src = target.getAttribute('data-original'); | |||
} | |||
handleEmojiMouseLeave = ({ target }) => { | |||
target.src = target.getAttribute('data-static'); | |||
} | |||
setRef = (c) => { | |||
this.node = c; | |||
} | |||
render () { | |||
const { account, intl, domain, identity_proofs } = this.props; | |||
@@ -200,7 +241,7 @@ class Header extends ImmutablePureComponent { | |||
const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct'); | |||
return ( | |||
<div className={classNames('account__header', { inactive: !!account.get('moved') })}> | |||
<div className={classNames('account__header', { inactive: !!account.get('moved') })} ref={this.setRef}> | |||
<div className='account__header__image'> | |||
<div className='account__header__info'> | |||
{info} | |||
@@ -29,7 +29,7 @@ const emojify = (str, customEmojis = {}) => { | |||
// if you want additional emoji handler, add statements below which set replacement and return true. | |||
if (shortname in customEmojis) { | |||
const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url; | |||
replacement = `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`; | |||
replacement = `<img draggable="false" class="emojione custom-emoji" alt="${shortname}" title="${shortname}" src="${filename}" data-original="${customEmojis[shortname].url}" data-static="${customEmojis[shortname].static_url}" />`; | |||
return true; | |||
} | |||
return false; | |||
@@ -44,6 +44,12 @@ function main() { | |||
} | |||
}; | |||
const getEmojiAnimationHandler = (swapTo) => { | |||
return ({ target }) => { | |||
target.src = target.getAttribute(swapTo); | |||
}; | |||
}; | |||
ready(() => { | |||
const locale = document.documentElement.lang; | |||
@@ -108,6 +114,9 @@ function main() { | |||
if (parallaxComponents.length > 0 ) { | |||
new Rellax('.parallax', { speed: -1 }); | |||
} | |||
delegate(document, '.custom-emoji', 'mouseover', getEmojiAnimationHandler('data-original')); | |||
delegate(document, '.custom-emoji', 'mouseout', getEmojiAnimationHandler('data-static')); | |||
}); | |||
delegate(document, '.webapp-btn', 'click', ({ target, button }) => { | |||
@@ -137,11 +137,7 @@ class Formatter | |||
def encode_custom_emojis(html, emojis, animate = false) | |||
return html if emojis.empty? | |||
emoji_map = if animate | |||
emojis.each_with_object({}) { |e, h| h[e.shortcode] = full_asset_url(e.image.url) } | |||
else | |||
emojis.each_with_object({}) { |e, h| h[e.shortcode] = full_asset_url(e.image.url(:static)) } | |||
end | |||
emoji_map = emojis.each_with_object({}) { |e, h| h[e.shortcode] = [full_asset_url(e.image.url), full_asset_url(e.image.url(:static))] } | |||
i = -1 | |||
tag_open_index = nil | |||
@@ -157,7 +153,14 @@ class Formatter | |||
emoji = emoji_map[shortcode] | |||
if emoji | |||
replacement = "<img draggable=\"false\" class=\"emojione\" alt=\":#{encode(shortcode)}:\" title=\":#{encode(shortcode)}:\" src=\"#{encode(emoji)}\" />" | |||
original_url, static_url = emoji | |||
replacement = begin | |||
if animate | |||
"<img draggable=\"false\" class=\"emojione\" alt=\":#{encode(shortcode)}:\" title=\":#{encode(shortcode)}:\" src=\"#{encode(original_url)}\" />" | |||
else | |||
"<img draggable=\"false\" class=\"emojione custom-emoji\" alt=\":#{encode(shortcode)}:\" title=\":#{encode(shortcode)}:\" src=\"#{encode(static_url)}\" data-original=\"#{original_url}\" data-static=\"#{static_url}\" />" | |||
end | |||
end | |||
before_html = shortname_start_index.positive? ? html[0..shortname_start_index - 1] : '' | |||
html = before_html + replacement + html[i + 1..-1] | |||
i += replacement.size - (shortcode.size + 2) - 1 | |||
@@ -261,7 +261,7 @@ RSpec.describe Formatter do | |||
let(:text) { ':coolcat: Beep boop' } | |||
it 'converts the shortcode to an image tag' do | |||
is_expected.to match(/<img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/<img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
end | |||
@@ -330,7 +330,7 @@ RSpec.describe Formatter do | |||
let(:text) { ':coolcat: Beep boop' } | |||
it 'converts the shortcode to an image tag' do | |||
is_expected.to match(/<p><img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/<p><img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
@@ -338,7 +338,7 @@ RSpec.describe Formatter do | |||
let(:text) { 'Beep :coolcat: boop' } | |||
it 'converts the shortcode to an image tag' do | |||
is_expected.to match(/Beep <img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/Beep <img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
@@ -354,7 +354,7 @@ RSpec.describe Formatter do | |||
let(:text) { 'Beep boop :coolcat:' } | |||
it 'converts the shortcode to an image tag' do | |||
is_expected.to match(/boop <img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/boop <img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
end | |||
@@ -377,7 +377,7 @@ RSpec.describe Formatter do | |||
let(:text) { '<p>:coolcat: Beep boop<br />' } | |||
it 'converts the shortcode to an image tag' do | |||
is_expected.to match(/<p><img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/<p><img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
@@ -385,7 +385,7 @@ RSpec.describe Formatter do | |||
let(:text) { '<p>Beep :coolcat: boop</p>' } | |||
it 'converts the shortcode to an image tag' do | |||
is_expected.to match(/Beep <img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/Beep <img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
@@ -401,7 +401,7 @@ RSpec.describe Formatter do | |||
let(:text) { '<p>Beep boop<br />:coolcat:</p>' } | |||
it 'converts the shortcode to an image tag' do | |||
is_expected.to match(/<br><img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/<br><img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
end | |||
@@ -500,7 +500,7 @@ RSpec.describe Formatter do | |||
let(:text) { ':coolcat: Beep boop' } | |||
it 'converts the shortcode to an image tag' do | |||
is_expected.to match(/<p><img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/<p><img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
@@ -508,7 +508,7 @@ RSpec.describe Formatter do | |||
let(:text) { 'Beep :coolcat: boop' } | |||
it 'converts the shortcode to an image tag' do | |||
is_expected.to match(/Beep <img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/Beep <img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
@@ -524,7 +524,7 @@ RSpec.describe Formatter do | |||
let(:text) { 'Beep boop :coolcat:' } | |||
it 'converts the shortcode to an image tag' do | |||
is_expected.to match(/boop <img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/boop <img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
end | |||
@@ -551,7 +551,7 @@ RSpec.describe Formatter do | |||
let(:text) { '<p>:coolcat: Beep boop<br />' } | |||
it 'converts shortcode to image tag' do | |||
is_expected.to match(/<p><img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/<p><img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
@@ -559,7 +559,7 @@ RSpec.describe Formatter do | |||
let(:text) { '<p>Beep :coolcat: boop</p>' } | |||
it 'converts shortcode to image tag' do | |||
is_expected.to match(/Beep <img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/Beep <img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
@@ -575,7 +575,7 @@ RSpec.describe Formatter do | |||
let(:text) { '<p>Beep boop<br />:coolcat:</p>' } | |||
it 'converts shortcode to image tag' do | |||
is_expected.to match(/<br><img draggable="false" class="emojione" alt=":coolcat:"/) | |||
is_expected.to match(/<br><img draggable="false" class="emojione custom-emoji" alt=":coolcat:"/) | |||
end | |||
end | |||
end | |||