Skip to content
Snippets Groups Projects
Unverified Commit 3efa0c54 authored by ThibG's avatar ThibG Committed by GitHub
Browse files

Change custom emoji to be animated when hovering container (#15637) 


Co-authored-by: default avatarClaire <claire.github-309c@sitedethib.com>
parent 7ab53f22
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 102 additions and 170 deletions
app/javascript/mastodon/components/__tests__/__snapshots__/display_name-test.js.snap
+ 2
− 0
View file @ 3efa0c54
......@@ -3,6 +3,8 @@
exports[`<DisplayName /> renders display name + account name 1`] = `
<span
className="display-name"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<bdi>
<strong
......
app/javascript/mastodon/components/display_name.js
+ 14
− 29
View file @ 3efa0c54
......@@ -11,45 +11,30 @@ export default class DisplayName extends React.PureComponent {
localDomain: PropTypes.string,
};
_updateEmojis () {
const node = this.node;
if (!node || autoPlayGif) {
handleMouseEnter = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
const emojis = node.querySelectorAll('.custom-emoji');
const emojis = currentTarget.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);
emoji.src = emoji.getAttribute('data-original');
}
}
componentDidMount () {
this._updateEmojis();
}
componentDidUpdate () {
this._updateEmojis();
}
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
}
handleMouseLeave = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
}
const emojis = currentTarget.querySelectorAll('.custom-emoji');
setRef = (c) => {
this.node = c;
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
}
}
render () {
......@@ -81,7 +66,7 @@ export default class DisplayName extends React.PureComponent {
}
return (
<span className='display-name' ref={this.setRef}>
<span className='display-name' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
{displayName} {suffix}
</span>
);
......
app/javascript/mastodon/components/status_content.js
+ 19
− 24
View file @ 3efa0c54
......@@ -75,35 +75,38 @@ export default class StatusContent extends React.PureComponent {
}
}
_updateStatusEmojis () {
const node = this.node;
if (!node || autoPlayGif) {
handleMouseEnter = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
const emojis = node.querySelectorAll('.custom-emoji');
const emojis = currentTarget.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.src = emoji.getAttribute('data-original');
}
}
handleMouseLeave = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
const emojis = currentTarget.querySelectorAll('.custom-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false);
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false);
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
}
}
componentDidMount () {
this._updateStatusLinks();
this._updateStatusEmojis();
}
componentDidUpdate () {
this._updateStatusLinks();
this._updateStatusEmojis();
}
onMentionClick = (mention, e) => {
......@@ -122,14 +125,6 @@ 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];
}
......@@ -219,7 +214,7 @@ export default class StatusContent extends React.PureComponent {
}
return (
<div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
<div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
<span dangerouslySetInnerHTML={spoilerContent} className='translate' />
{' '}
......@@ -237,7 +232,7 @@ export default class StatusContent extends React.PureComponent {
);
} else if (this.props.onClick) {
const output = [
<div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content'>
<div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} />
{!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
......@@ -253,7 +248,7 @@ export default class StatusContent extends React.PureComponent {
return output;
} else {
return (
<div className={classNames} ref={this.setRef} tabIndex='0'>
<div className={classNames} ref={this.setRef} tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} />
{!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
......
app/javascript/mastodon/features/account/components/header.js
+ 14
− 29
View file @ 3efa0c54
......@@ -96,45 +96,30 @@ class Header extends ImmutablePureComponent {
return !location.pathname.match(/\/(followers|following)\/?$/);
}
_updateEmojis () {
const node = this.node;
if (!node || autoPlayGif) {
handleMouseEnter = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
const emojis = node.querySelectorAll('.custom-emoji');
const emojis = currentTarget.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);
emoji.src = emoji.getAttribute('data-original');
}
}
componentDidMount () {
this._updateEmojis();
}
componentDidUpdate () {
this._updateEmojis();
}
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
}
handleMouseLeave = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
}
const emojis = currentTarget.querySelectorAll('.custom-emoji');
setRef = (c) => {
this.node = c;
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
}
}
render () {
......@@ -276,7 +261,7 @@ class Header extends ImmutablePureComponent {
}
return (
<div className={classNames('account__header', { inactive: !!account.get('moved') })} ref={this.setRef}>
<div className={classNames('account__header', { inactive: !!account.get('moved') })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div className='account__header__image'>
<div className='account__header__info'>
{!suspended && info}
......
app/javascript/mastodon/features/direct_timeline/components/conversation.js
+ 14
− 29
View file @ 3efa0c54
......@@ -44,41 +44,30 @@ class Conversation extends ImmutablePureComponent {
intl: PropTypes.object.isRequired,
};
_updateEmojis () {
const node = this.namesNode;
if (!node || autoPlayGif) {
handleMouseEnter = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
const emojis = node.querySelectorAll('.custom-emoji');
const emojis = currentTarget.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);
emoji.src = emoji.getAttribute('data-original');
}
}
componentDidMount () {
this._updateEmojis();
}
handleMouseLeave = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
componentDidUpdate () {
this._updateEmojis();
}
const emojis = currentTarget.querySelectorAll('.custom-emoji');
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
}
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
}
}
handleClick = () => {
......@@ -123,10 +112,6 @@ class Conversation extends ImmutablePureComponent {
this.props.onToggleHidden(this.props.lastStatus);
}
setNamesRef = (c) => {
this.namesNode = c;
}
render () {
const { accounts, lastStatus, unread, scrollKey, intl } = this.props;
......@@ -171,7 +156,7 @@ class Conversation extends ImmutablePureComponent {
{unread && <span className='conversation__unread' />} <RelativeTimestamp timestamp={lastStatus.get('created_at')} />
</div>
<div className='conversation__content__names' ref={this.setNamesRef}>
<div className='conversation__content__names' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} />
</div>
</div>
......
app/javascript/mastodon/features/directory/components/account_card.js
+ 15
− 30
View file @ 3efa0c54
......@@ -102,42 +102,31 @@ class AccountCard extends ImmutablePureComponent {
onMute: PropTypes.func.isRequired,
};
_updateEmojis() {
const node = this.node;
if (!node || autoPlayGif) {
handleMouseEnter = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
const emojis = node.querySelectorAll('.custom-emoji');
const emojis = currentTarget.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);
emoji.src = emoji.getAttribute('data-original');
}
}
componentDidMount() {
this._updateEmojis();
}
componentDidUpdate() {
this._updateEmojis();
}
handleMouseLeave = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
};
const emojis = currentTarget.querySelectorAll('.custom-emoji');
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
};
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
}
}
handleFollow = () => {
this.props.onFollow(this.props.account);
......@@ -151,10 +140,6 @@ class AccountCard extends ImmutablePureComponent {
this.props.onMute(this.props.account);
};
setRef = (c) => {
this.node = c;
};
render() {
const { account, intl } = this.props;
......@@ -239,7 +224,7 @@ class AccountCard extends ImmutablePureComponent {
</div>
</div>
<div className='directory__card__extra' ref={this.setRef}>
<div className='directory__card__extra' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div
className='account__header__content translate'
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
......
app/javascript/mastodon/features/getting_started/components/announcements.js
+ 24
− 29
View file @ 3efa0c54
......@@ -39,35 +39,10 @@ class Content extends ImmutablePureComponent {
componentDidMount () {
this._updateLinks();
this._updateEmojis();
}
componentDidUpdate () {
this._updateLinks();
this._updateEmojis();
}
_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);
}
}
_updateLinks () {
......@@ -132,12 +107,30 @@ class Content extends ImmutablePureComponent {
}
}
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
handleMouseEnter = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-original');
}
}
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
handleMouseLeave = ({ currentTarget }) => {
if (autoPlayGif) {
return;
}
const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
}
}
render () {
......@@ -148,6 +141,8 @@ class Content extends ImmutablePureComponent {
className='announcements__item__content translate'
ref={this.setRef}
dangerouslySetInnerHTML={{ __html: announcement.get('contentHtml') }}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
);
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment