Animate avatar GIFs on-hover on public profiles (#10549)
* Third time is the charm? * Use full asset URL for data-static and data-original ̀image_tag` expands to the full asset URL, we have to do the same in `data` attributes so that it can work when assets and user data are stored on a different hostmain
parent
951f8d5b44
commit
01b1c377b1
|
@ -173,6 +173,21 @@ function main() {
|
||||||
avatar.src = url;
|
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 }) => {
|
delegate(document, '#account_header', 'change', ({ target }) => {
|
||||||
const header = document.querySelector('.card .card__img img');
|
const header = document.querySelector('.card .card__img img');
|
||||||
const [file] = target.files || [];
|
const [file] = target.files || [];
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
= image_tag (current_account&.user&.setting_auto_play_gif ? account.header_original_url : account.header_static_url), class: 'parallax'
|
= image_tag (current_account&.user&.setting_auto_play_gif ? account.header_original_url : account.header_static_url), class: 'parallax'
|
||||||
.public-account-header__bar
|
.public-account-header__bar
|
||||||
= link_to short_account_url(account), class: 'avatar' do
|
= 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
|
||||||
.public-account-header__tabs__name
|
.public-account-header__tabs__name
|
||||||
%h1
|
%h1
|
||||||
|
|
Loading…
Reference in New Issue