From 01b1c377b1fea841b9823a3134e8f41ccc4b0f29 Mon Sep 17 00:00:00 2001
From: Jessica <46502909+hyenagirl64@users.noreply.github.com>
Date: Sat, 20 Apr 2019 19:47:39 -0700
Subject: [PATCH] Animate avatar GIFs on-hover on public profiles (#10549)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 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 host
---
app/javascript/packs/public.js | 15 +++++++++++++++
app/views/accounts/_header.html.haml | 2 +-
2 files changed, 16 insertions(+), 1 deletion(-)
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index 6a8cf9c2f5..93379cdb3e 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 370e7e470f..4ef9f94787 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
--
GitLab