diff options
| -rw-r--r-- | app/javascript/packs/public.js | 15 | ||||
| -rw-r--r-- | app/views/accounts/_header.html.haml | 2 |
2 files changed, 16 insertions, 1 deletions
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index 6a8cf9c2f..93379cdb3 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -173,6 +173,21 @@ function main() { avatar.src = url; }); + const getProfileAvatarAnimationHandler = (swapTo) => { + //animate avatar gifs on the profile page when moused over + return ({ target }) => { + const swapSrc = target.getAttribute(swapTo); + //only change the img source if autoplay is off and the image src is actually different + if(target.getAttribute('data-autoplay') === 'false' && target.src !== swapSrc) { + target.src = swapSrc; + } + }; + }; + + delegate(document, 'img#profile_page_avatar', 'mouseover', getProfileAvatarAnimationHandler('data-original')); + + delegate(document, 'img#profile_page_avatar', 'mouseout', getProfileAvatarAnimationHandler('data-static')); + delegate(document, '#account_header', 'change', ({ target }) => { const header = document.querySelector('.card .card__img img'); const [file] = target.files || []; diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml index 370e7e470..4ef9f9478 100644 --- a/app/views/accounts/_header.html.haml +++ b/app/views/accounts/_header.html.haml @@ -3,7 +3,7 @@ = image_tag (current_account&.user&.setting_auto_play_gif ? account.header_original_url : account.header_static_url), class: 'parallax' .public-account-header__bar = link_to short_account_url(account), class: 'avatar' do - = image_tag (current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url) + = image_tag (current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url), id: 'profile_page_avatar', data: {original: full_asset_url(account.avatar_original_url), static: full_asset_url(account.avatar_static_url), autoplay: current_account&.user&.setting_auto_play_gif} .public-account-header__tabs .public-account-header__tabs__name %h1 |