monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Change custom emoji to be animated when hovering container 

Port 3efa0c54b6 to glitch-soc

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
ThibG 2021-01-31 21:25:31 +01:00 committed by Claire
parent 4d40685850
commit e1fa06c459
6 changed files with 112 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/javascript/flavours/glitch/components/display_name.js
View File

@ -15,45 +15,30 @@ export default class DisplayName extends React.PureComponent {
handleClick: PropTypes.func, handleClick: PropTypes.func,
}; };
_updateEmojis () { handleMouseEnter = ({ currentTarget }) => {
const node = this.node; if (autoPlayGif) {
if (!node || autoPlayGif) {
return; return;
} }
const emojis = node.querySelectorAll('.custom-emoji'); const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) { for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i]; let emoji = emojis[i];
if (emoji.classList.contains('status-emoji')) { emoji.src = emoji.getAttribute('data-original');
continue;
}
emoji.classList.add('status-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false);
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false);
} }
} }
componentDidMount () { handleMouseLeave = ({ currentTarget }) => {
this._updateEmojis(); if (autoPlayGif) {
} return;
}
componentDidUpdate () { const emojis = currentTarget.querySelectorAll('.custom-emoji');
this._updateEmojis();
}
handleEmojiMouseEnter = ({ target }) => { for (var i = 0; i < emojis.length; i++) {
target.src = target.getAttribute('data-original'); let emoji = emojis[i];
} emoji.src = emoji.getAttribute('data-static');
}
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
}
setRef = (c) => {
this.node = c;
} }
render() { render() {
@ -101,7 +86,7 @@ export default class DisplayName extends React.PureComponent {
} }
return ( return (
<span className={computedClass} ref={this.setRef}> <span className={computedClass} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
{displayName} {displayName}
{inline ? ' ' : null} {inline ? ' ' : null}
{suffix} {suffix}

59
app/javascript/flavours/glitch/components/status_content.js
View File

@ -154,35 +154,38 @@ export default class StatusContent extends React.PureComponent {
} }
} }
_updateStatusEmojis () { handleMouseEnter = ({ currentTarget }) => {
const node = this.node; if (autoPlayGif) {
if (!node || autoPlayGif) {
return; return;
} }
const emojis = node.querySelectorAll('.custom-emoji'); const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) { for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i]; let emoji = emojis[i];
if (emoji.classList.contains('status-emoji')) { emoji.src = emoji.getAttribute('data-original');
continue; }
} }
emoji.classList.add('status-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false); handleMouseLeave = ({ currentTarget }) => {
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false); 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');
} }
} }
componentDidMount () { componentDidMount () {
this._updateStatusLinks(); this._updateStatusLinks();
this._updateStatusEmojis();
} }
componentDidUpdate () { componentDidUpdate () {
this._updateStatusLinks(); this._updateStatusLinks();
this._updateStatusEmojis();
if (this.props.onUpdate) this.props.onUpdate(); if (this.props.onUpdate) this.props.onUpdate();
} }
@ -206,14 +209,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) => { handleMouseDown = (e) => {
this.startXY = [e.clientX, e.clientY]; this.startXY = [e.clientX, e.clientY];
} }
@ -253,10 +248,6 @@ export default class StatusContent extends React.PureComponent {
} }
} }
setRef = (c) => {
this.node = c;
}
setContentsRef = (c) => { setContentsRef = (c) => {
this.contentsNode = c; this.contentsNode = c;
} }
@ -323,7 +314,7 @@ export default class StatusContent extends React.PureComponent {
} }
return ( return (
<div className={classNames} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} ref={this.setRef}> <div className={classNames} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
<p <p
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }} style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
> >
@ -343,6 +334,8 @@ export default class StatusContent extends React.PureComponent {
tabIndex={!hidden ? 0 : null} tabIndex={!hidden ? 0 : null}
dangerouslySetInnerHTML={content} dangerouslySetInnerHTML={content}
className='status__content__text translate' className='status__content__text translate'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/> />
{media} {media}
</div> </div>
@ -356,7 +349,6 @@ export default class StatusContent extends React.PureComponent {
onMouseDown={this.handleMouseDown} onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp} onMouseUp={this.handleMouseUp}
tabIndex='0' tabIndex='0'
ref={this.setRef}
> >
<div <div
ref={this.setContentsRef} ref={this.setContentsRef}
@ -364,6 +356,8 @@ export default class StatusContent extends React.PureComponent {
dangerouslySetInnerHTML={content} dangerouslySetInnerHTML={content}
className='status__content__text translate' className='status__content__text translate'
tabIndex='0' tabIndex='0'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/> />
{media} {media}
</div> </div>
@ -373,9 +367,16 @@ export default class StatusContent extends React.PureComponent {
<div <div
className='status__content' className='status__content'
tabIndex='0' tabIndex='0'
ref={this.setRef}
> >
<div ref={this.setContentsRef} key={`contents-${tagLinks}`} className='status__content__text translate' dangerouslySetInnerHTML={content} tabIndex='0' /> <div
ref={this.setContentsRef}
key={`contents-${tagLinks}`}
className='status__content__text translate'
dangerouslySetInnerHTML={content}
tabIndex='0'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
{media} {media}
</div> </div>
); );

43
app/javascript/flavours/glitch/features/account/components/header.js
View File

@ -88,45 +88,30 @@ class Header extends ImmutablePureComponent {
window.open(profileLink, '_blank'); window.open(profileLink, '_blank');
} }
_updateEmojis () { handleMouseEnter = ({ currentTarget }) => {
const node = this.node; if (autoPlayGif) {
if (!node || autoPlayGif) {
return; return;
} }
const emojis = node.querySelectorAll('.custom-emoji'); const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) { for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i]; let emoji = emojis[i];
if (emoji.classList.contains('status-emoji')) { emoji.src = emoji.getAttribute('data-original');
continue;
}
emoji.classList.add('status-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false);
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false);
} }
} }
componentDidMount () { handleMouseLeave = ({ currentTarget }) => {
this._updateEmojis(); if (autoPlayGif) {
} return;
}
componentDidUpdate () { const emojis = currentTarget.querySelectorAll('.custom-emoji');
this._updateEmojis();
}
handleEmojiMouseEnter = ({ target }) => { for (var i = 0; i < emojis.length; i++) {
target.src = target.getAttribute('data-original'); let emoji = emojis[i];
} emoji.src = emoji.getAttribute('data-static');
}
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
}
setRef = (c) => {
this.node = c;
} }
render () { render () {
@ -279,7 +264,7 @@ class Header extends ImmutablePureComponent {
} }
return ( 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__image'>
<div className='account__header__info'> <div className='account__header__info'>
{info} {info}

43
app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js
View File

@ -67,41 +67,30 @@ class Conversation extends ImmutablePureComponent {
} }
} }
_updateEmojis () { handleMouseEnter = ({ currentTarget }) => {
const node = this.namesNode; if (autoPlayGif) {
if (!node || autoPlayGif) {
return; return;
} }
const emojis = node.querySelectorAll('.custom-emoji'); const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) { for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i]; let emoji = emojis[i];
if (emoji.classList.contains('status-emoji')) { emoji.src = emoji.getAttribute('data-original');
continue;
}
emoji.classList.add('status-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false);
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false);
} }
} }
componentDidMount () { handleMouseLeave = ({ currentTarget }) => {
this._updateEmojis(); if (autoPlayGif) {
} return;
}
componentDidUpdate () { const emojis = currentTarget.querySelectorAll('.custom-emoji');
this._updateEmojis();
}
handleEmojiMouseEnter = ({ target }) => { for (var i = 0; i < emojis.length; i++) {
target.src = target.getAttribute('data-original'); let emoji = emojis[i];
} emoji.src = emoji.getAttribute('data-static');
}
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
} }
handleClick = () => { handleClick = () => {
@ -152,10 +141,6 @@ class Conversation extends ImmutablePureComponent {
this.setState({ isExpanded: value }); this.setState({ isExpanded: value });
} }
setNamesRef = (c) => {
this.namesNode = c;
}
render () { render () {
const { accounts, lastStatus, unread, scrollKey, intl } = this.props; const { accounts, lastStatus, unread, scrollKey, intl } = this.props;
const { isExpanded } = this.state; const { isExpanded } = this.state;
@ -206,7 +191,7 @@ class Conversation extends ImmutablePureComponent {
{unread && <span className='conversation__unread' />} <RelativeTimestamp timestamp={lastStatus.get('created_at')} /> {unread && <span className='conversation__unread' />} <RelativeTimestamp timestamp={lastStatus.get('created_at')} />
</div> </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> }} /> <FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} />
</div> </div>
</div> </div>

47
app/javascript/flavours/glitch/features/directory/components/account_card.js
View File

@ -102,43 +102,32 @@ class AccountCard extends ImmutablePureComponent {
onMute: PropTypes.func.isRequired, onMute: PropTypes.func.isRequired,
}; };
_updateEmojis() { handleMouseEnter = ({ currentTarget }) => {
const node = this.node; if (autoPlayGif) {
if (!node || autoPlayGif) {
return; return;
} }
const emojis = node.querySelectorAll('.custom-emoji'); const emojis = currentTarget.querySelectorAll('.custom-emoji');
for (var i = 0; i < emojis.length; i++) { for (var i = 0; i < emojis.length; i++) {
let emoji = emojis[i]; let emoji = emojis[i];
if (emoji.classList.contains('status-emoji')) { emoji.src = emoji.getAttribute('data-original');
continue;
}
emoji.classList.add('status-emoji');
emoji.addEventListener('mouseenter', this.handleEmojiMouseEnter, false);
emoji.addEventListener('mouseleave', this.handleEmojiMouseLeave, false);
} }
} }
componentDidMount() { handleMouseLeave = ({ currentTarget }) => {
this._updateEmojis(); 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');
}
} }
componentDidUpdate() {
this._updateEmojis();
}
handleEmojiMouseEnter = ({ target }) => {
target.src = target.getAttribute('data-original');
};
handleEmojiMouseLeave = ({ target }) => {
target.src = target.getAttribute('data-static');
};
handleFollow = () => { handleFollow = () => {
this.props.onFollow(this.props.account); this.props.onFollow(this.props.account);
}; };
@ -151,10 +140,6 @@ class AccountCard extends ImmutablePureComponent {
this.props.onMute(this.props.account); this.props.onMute(this.props.account);
}; };
setRef = (c) => {
this.node = c;
};
render() { render() {
const { account, intl } = this.props; const { account, intl } = this.props;
@ -239,7 +224,7 @@ class AccountCard extends ImmutablePureComponent {
</div> </div>
</div> </div>
<div className='directory__card__extra' ref={this.setRef}> <div className='directory__card__extra' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div <div
className='account__header__content translate' className='account__header__content translate'
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }} dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}

53
app/javascript/flavours/glitch/features/getting_started/components/announcements.js
View File

@ -39,35 +39,10 @@ class Content extends ImmutablePureComponent {
componentDidMount () { componentDidMount () {
this._updateLinks(); this._updateLinks();
this._updateEmojis();
} }
componentDidUpdate () { componentDidUpdate () {
this._updateLinks(); 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 () { _updateLinks () {
@ -132,12 +107,30 @@ class Content extends ImmutablePureComponent {
} }
} }
handleEmojiMouseEnter = ({ target }) => { handleMouseEnter = ({ currentTarget }) => {
target.src = target.getAttribute('data-original'); 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 }) => { handleMouseLeave = ({ currentTarget }) => {
target.src = target.getAttribute('data-static'); 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 () { render () {
@ -148,6 +141,8 @@ class Content extends ImmutablePureComponent {
className='announcements__item__content translate' className='announcements__item__content translate'
ref={this.setRef} ref={this.setRef}
dangerouslySetInnerHTML={{ __html: announcement.get('contentHtml') }} dangerouslySetInnerHTML={{ __html: announcement.get('contentHtml') }}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/> />
); );
} }