From c703a9337b9d4d535c0b503f91684a2fbff89e93 Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <qznebula@protonmail.com>
Date: Tue, 6 Dec 2022 18:36:04 -0400
Subject: sticky cover art (a little wip)

---
 src/static/client.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

(limited to 'src/static/client.js')

diff --git a/src/static/client.js b/src/static/client.js
index ebe8604f..dcb39226 100644
--- a/src/static/client.js
+++ b/src/static/client.js
@@ -449,14 +449,20 @@ if (localStorage.tryInfoCards) {
 const stickyHeadingInfo = Array.from(document.querySelectorAll('.content-sticky-heading-container'))
   .map(stickyContainer => {
     const {parentElement: contentContainer} = stickyContainer;
-    const stickySubheading = stickyContainer.querySelector('.content-sticky-subheading');
+    const stickySubheadingRow = stickyContainer.querySelector('.content-sticky-subheading-row');
+    const stickySubheading = stickySubheadingRow.querySelector('h2');
+    const stickyCoverContainer = stickyContainer.querySelector('.content-sticky-heading-cover-container');
     const contentHeadings = Array.from(contentContainer.querySelectorAll('.content-heading'));
+    const contentCover = contentContainer.querySelector('#cover-art-container');
 
     return {
       contentContainer,
+      contentCover,
       contentHeadings,
       stickyContainer,
+      stickyCoverContainer,
       stickySubheading,
+      stickySubheadingRow,
       state: {
         displayedHeading: null,
       },
@@ -471,13 +477,22 @@ const topOfViewInside = (el, scroll = window.scrollY) => (
 function updateStickyHeading() {
   for (const {
     contentContainer,
+    contentCover,
     contentHeadings,
     stickyContainer,
+    stickyCoverContainer,
     stickySubheading,
+    stickySubheadingRow,
     state,
   } of stickyHeadingInfo) {
     let closestHeading = null;
 
+    if (contentCover.getBoundingClientRect().bottom < 0) {
+      stickyCoverContainer.classList.add('visible');
+    } else {
+      stickyCoverContainer.classList.remove('visible');
+    }
+
     if (topOfViewInside(contentContainer)) {
       if (stickySubheading.childNodes.length === 0) {
         // &nbsp; to ensure correct basic line height
@@ -517,9 +532,9 @@ function updateStickyHeading() {
           }
         }
 
-        stickySubheading.classList.add('visible');
+        stickySubheadingRow.classList.add('visible');
       } else {
-        stickySubheading.classList.remove('visible');
+        stickySubheadingRow.classList.remove('visible');
       }
 
       state.displayedHeading = closestHeading;
-- 
cgit 1.3.0-6-gf8a5