MetuFSS
/
metu.life
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
Port 3efa0c54b6 to glitch-soc

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
master
ThibG 4 years ago committed by Claire
parent 4d40685850
commit e1fa06c459
6 changed files with 111 additions and 175 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 43
      app/javascript/flavours/glitch/components/display_name.js
  2. 59
      app/javascript/flavours/glitch/components/status_content.js
  3. 43
      app/javascript/flavours/glitch/features/account/components/header.js
  4. 43
      app/javascript/flavours/glitch/features/direct_timeline/components/conversation.js
  5. 45
      app/javascript/flavours/glitch/features/directory/components/account_card.js
  6. 53
      app/javascript/flavours/glitch/features/getting_started/components/announcements.js

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

@ -15,45 +15,30 @@ export default class DisplayName extends React.PureComponent {
handleClick: PropTypes.func,
};
_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() {
@ -101,7 +86,7 @@ export default class DisplayName extends React.PureComponent {
}
return (
<span className={computedClass} ref={this.setRef}>
<span className={computedClass} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
{displayName}
{inline ? ' ' : null}
{suffix}

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

@ -154,35 +154,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();
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) => {
this.startXY = [e.clientX, e.clientY];
}
@ -253,10 +248,6 @@ export default class StatusContent extends React.PureComponent {
}
}
setRef = (c) => {
this.node = c;
}
setContentsRef = (c) => {
this.contentsNode = c;
}
@ -323,7 +314,7 @@ export default class StatusContent extends React.PureComponent {
}
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
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
>
@ -343,6 +334,8 @@ export default class StatusContent extends React.PureComponent {
tabIndex={!hidden ? 0 : null}
dangerouslySetInnerHTML={content}
className='status__content__text translate'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
{media}
</div>
@ -356,7 +349,6 @@ export default class StatusContent extends React.PureComponent {
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
tabIndex='0'
ref={this.setRef}
>
<div
ref={this.setContentsRef}
@ -364,6 +356,8 @@ export default class StatusContent extends React.PureComponent {
dangerouslySetInnerHTML={content}
className='status__content__text translate'
tabIndex='0'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
/>
{media}
</div>
@ -373,9 +367,16 @@ export default class StatusContent extends React.PureComponent {
<div
className='status__content'
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}
</div>
);

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

@ -88,45 +88,30 @@ class Header extends ImmutablePureComponent {
window.open(profileLink, '_blank');
}
_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 () {
@ -279,7 +264,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'>
{info}

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

@ -67,41 +67,30 @@ class Conversation extends ImmutablePureComponent {
}
}
_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();
}
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');
}
}
handleClick = () => {
@ -152,10 +141,6 @@ class Conversation extends ImmutablePureComponent {
this.setState({ isExpanded: value });
}
setNamesRef = (c) => {
this.namesNode = c;
}
render () {
const { accounts, lastStatus, unread, scrollKey, intl } = this.props;
const { isExpanded } = this.state;
@ -206,7 +191,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>

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

@ -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') }}

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

@ -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}
/>
);
}

Write Preview
Loading…
Cancel
Save