Apply view transition to medium cover if found

opatry · Jan 5, 2025 · f3d3675 · f3d3675
1 parent 6e21062
commit f3d3675
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/content/index.html.erb b/content/index.html.erb
@@ -4,7 +4,6 @@ uuid: d45018b8-4b50-4d56-a403-aee411ab5931
 ---
 
 <%
-# TODO Ideally the view-transition should be applied to these cover as well, not the case for now
 books = recent_books
 unless books.empty?
 %>

diff --git a/content/static/view-transition.js b/content/static/view-transition.js
@@ -30,7 +30,11 @@ window.addEventListener('pageswap', async (e) => {
       const isbn = targetBookMatch.pathname.groups.isbn
       setTemporaryViewTransitionNames([
         [document.querySelector('.profile-picture'), 'avatar'],
-        [document.querySelector(`img[src='/cover/${isbn}-mini.jpg']`), 'cover'],
+        [
+          // favor medium if any, fallback to mini otherwise
+          document.querySelector(`img[src='/cover/${isbn}-medium.jpg']`) || document.querySelector(`img[src='/cover/${isbn}-mini.jpg']`),
+          'cover'
+        ],
       ], e.viewTransition.finished);
     }
   }
@@ -48,7 +52,10 @@ window.addEventListener('pagereveal', async (e) => {
       const isbn = fromBookMatch.pathname.groups.isbn
       setTemporaryViewTransitionNames([
         [document.querySelector('.profile-picture'), 'avatar'],
-        [document.querySelector(`img[src='/cover/${isbn}-mini.jpg']`), 'cover'],
+        [
+          document.querySelector(`img[src='/cover/${isbn}-medium.jpg']`) || document.querySelector(`img[src='/cover/${isbn}-mini.jpg']`), 
+          'cover'
+        ],
       ], e.viewTransition.ready);
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,6 @@ uuid: d45018b8-4b50-4d56-a403-aee411ab5931 @@
     ---
     <%
-    # TODO Ideally the view-transition should be applied to these cover as well, not the case for now
     books = recent_books
     unless books.empty?
     %>
@@ Expand Down @@