about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
authorJessica <46502909+hyenagirl64@users.noreply.github.com>2019-04-20 19:47:39 -0700
committerEugen Rochko <eugen@zeonfederated.com>2019-04-21 04:47:39 +0200
commit01b1c377b1fea841b9823a3134e8f41ccc4b0f29 (patch)
treec628f0f8a8f8d7e57cb86403cca2dde5c9af5bd1 /app/javascript
parent951f8d5b44f5e38c163aae5b9bd330d92ea4d954 (diff)
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 host
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/packs/public.js15
1 files changed, 15 insertions, 0 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 || [];