hide CW'd art from sticky heading til main cover revealed

4 files changed, 46 insertions, 8 deletions

diff --git a/src/misc-templates.js b/src/misc-templates.js
index aa21a390..47324ac2 100644
--- a/src/misc-templates.js
+++ b/src/misc-templates.js
@@ -727,7 +727,8 @@ function unbound_img({
     if (reveal) {
       wrapped = html.tag('div', {class: 'reveal'}, [
         wrapped,
-        html.tag('span', {class: 'reveal-text'}, reveal),
+        html.tag('span', {class: 'reveal-text-container'},
+          html.tag('span', {class: 'reveal-text'}, reveal)),
       ]);
     }
 
@@ -952,7 +953,6 @@ function unbound_generateContentHeading({
 }
 
 function unbound_generateStickyHeadingContainer({
-  getRevealStringFromArtTags,
   html,
   img,
 
@@ -971,16 +971,27 @@ function unbound_generateStickyHeadingContainer({
       html.tag('div', {class: 'content-sticky-heading-row'}, [
         html.tag('h1', title),
 
+        // Cover art in the sticky heading never uses the 'reveal' setting
+        // because it's too small to effectively display content warnings.
+        // Instead, if art has content warnings, it's hidden from the sticky
+        // heading by default, and will be enabled once the main cover art
+        // is revealed.
         coverSrc &&
           html.tag('div', {class: 'content-sticky-heading-cover-container'},
-            html.tag('div', {class: 'content-sticky-heading-cover'},
+            html.tag('div',
+              {
+                class: [
+                  'content-sticky-heading-cover',
+                  coverArtTags .some(tag => !tag.isContentWarning) &&
+                    'content-sticky-heading-cover-needs-reveal',
+                ],
+              },
               img({
                 src: coverSrc,
                 alt: coverAlt,
                 thumb: 'small',
                 link: false,
                 square: true,
-                reveal: getRevealStringFromArtTags(coverArtTags),
               }))),
       ]),
 
diff --git a/src/static/client.js b/src/static/client.js
index 5b8b0c8a..0c760500 100644
--- a/src/static/client.js
+++ b/src/static/client.js
@@ -185,6 +185,7 @@ for (const reveal of document.querySelectorAll('.reveal')) {
       reveal.classList.add('revealed');
       event.preventDefault();
       event.stopPropagation();
+      reveal.dispatchEvent(new CustomEvent('hsmusic-reveal'));
     }
   });
 }
@@ -527,6 +528,7 @@ const stickyHeadingInfo = Array.from(document.querySelectorAll('.content-sticky-
     const stickySubheadingRow = stickyContainer.querySelector('.content-sticky-subheading-row');
     const stickySubheading = stickySubheadingRow.querySelector('h2');
     const stickyCoverContainer = stickyContainer.querySelector('.content-sticky-heading-cover-container');
+    const stickyCover = stickyCoverContainer.querySelector('.content-sticky-heading-cover');
     const contentHeadings = Array.from(contentContainer.querySelectorAll('.content-heading'));
     const contentCover = contentContainer.querySelector('#cover-art-container');
 
@@ -535,6 +537,7 @@ const stickyHeadingInfo = Array.from(document.querySelectorAll('.content-sticky-
       contentCover,
       contentHeadings,
       stickyContainer,
+      stickyCover,
       stickyCoverContainer,
       stickySubheading,
       stickySubheadingRow,
@@ -549,6 +552,20 @@ const topOfViewInside = (el, scroll = window.scrollY) => (
   scroll < el.offsetTop + el.offsetHeight
 );
 
+function prepareStickyHeadings() {
+  for (const {
+    contentCover,
+    stickyCover,
+  } of stickyHeadingInfo) {
+    const coverRevealImage = contentCover.querySelector('.reveal');
+    if (coverRevealImage) {
+      coverRevealImage.addEventListener('hsmusic-reveal', () => {
+        stickyCover.classList.remove('content-sticky-heading-cover-needs-reveal');
+      });
+    }
+  }
+}
+
 function updateStickyHeading() {
   for (const {
     contentContainer,
@@ -620,7 +637,7 @@ function updateStickyHeading() {
 }
 
 document.addEventListener('scroll', updateStickyHeading);
-
+prepareStickyHeadings();
 updateStickyHeading();
 
 // Image overlay ------------------------------------------
diff --git a/src/static/site3.css b/src/static/site3.css
index c30398aa..cd946886 100644
--- a/src/static/site3.css
+++ b/src/static/site3.css
@@ -758,12 +758,19 @@ img {
   opacity: 0.4;
 }
 
-.reveal-text {
-  color: white;
+.reveal-text-container {
   position: absolute;
   top: 15px;
   left: 10px;
   right: 10px;
+  bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.reveal-text {
+  color: white;
   text-align: center;
   font-weight: bold;
 }
@@ -1261,6 +1268,10 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r
   margin: -15px 0px -5px -5px;
 }
 
+.content-sticky-heading-cover-needs-reveal {
+  display: none;
+}
+
 .content-sticky-heading-cover {
   position: absolute;
   top: 0;
diff --git a/src/write/bind-utilities.js b/src/write/bind-utilities.js
index 993aa3ce..ffaaa7a7 100644
--- a/src/write/bind-utilities.js
+++ b/src/write/bind-utilities.js
@@ -204,7 +204,6 @@ export function bindUtilities({
 
   bound.generateStickyHeadingContainer = bindOpts(generateStickyHeadingContainer, {
     [bindOpts.bindIndex]: 0,
-    getRevealStringFromArtTags: bound.getRevealStringFromArtTags,
     html,
     img: bound.img,
   });