content, thumbs, css, client: general reveal interaction refactor

2 files changed, 71 insertions, 18 deletions

diff --git a/src/static/client3.js b/src/static/client3.js
index deeac6a..1c81347 100644
--- a/src/static/client3.js
+++ b/src/static/client3.js
@@ -186,6 +186,7 @@ clientSteps.mutatePageContent.push(mutateCSSCompatibilityContent);
 const scriptedLinkInfo = initInfo('scriptedLinkInfo', {
   randomLinks: null,
   revealLinks: null,
+  revealContainers: null,
 
   nextNavLink: null,
   previousNavLink: null,
@@ -204,7 +205,11 @@ function getScriptedLinkReferences() {
     document.querySelectorAll('[data-random]');
 
   scriptedLinkInfo.revealLinks =
-    document.getElementsByClassName('reveal');
+    document.querySelectorAll('.reveal .image-inner-area');
+
+  scriptedLinkInfo.revealContainers =
+    Array.from(scriptedLinkInfo.revealLinks)
+      .map(link => link.closest('.reveal'));
 
   scriptedLinkInfo.nextNavLink =
     document.getElementById('next-button');
@@ -372,18 +377,29 @@ function addNavigationKeyPressListeners() {
 }
 
 function addRevealLinkClickListeners() {
-  for (const reveal of scriptedLinkInfo.revealLinks ?? []) {
-    reveal.addEventListener('click', (event) => {
-      if (!reveal.classList.contains('revealed')) {
-        reveal.classList.add('revealed');
-        event.preventDefault();
-        event.stopPropagation();
-        reveal.dispatchEvent(new CustomEvent('hsmusic-reveal'));
-      }
+  const info = scriptedLinkInfo;
+
+  for (const {revealLink, revealContainer} of stitchArrays({
+    revealLink: Array.from(info.revealLinks ?? []),
+    revealContainer: Array.from(info.revealContainers ?? []),
+  })) {
+    revealLink.addEventListener('click', (event) => {
+      handleRevealLinkClicked(event, revealLink, revealContainer);
     });
   }
 }
 
+function handleRevealLinkClicked(domEvent, _revealLink, revealContainer) {
+  if (revealContainer.classList.contains('revealed')) {
+    return;
+  }
+
+  revealContainer.classList.add('revealed');
+  domEvent.preventDefault();
+  domEvent.stopPropagation();
+  revealContainer.dispatchEvent(new CustomEvent('hsmusic-reveal'));
+}
+
 clientSteps.getPageReferences.push(getScriptedLinkReferences);
 clientSteps.addPageListeners.push(addRandomLinkListeners);
 clientSteps.addPageListeners.push(addNavigationKeyPressListeners);
@@ -1698,8 +1714,14 @@ function handleImageLinkClicked(evt) {
   if (evt.metaKey || evt.shiftKey || evt.altKey) {
     return;
   }
+
   evt.preventDefault();
 
+  // Don't show the overlay if the image still needs to be revealed.
+  if (evt.target.closest('a').querySelector('.reveal:not(.revealed)')) {
+    return;
+  }
+
   const container = document.getElementById('image-overlay-container');
   container.classList.add('visible');
   container.classList.remove('loaded');
diff --git a/src/static/site6.css b/src/static/site6.css
index a932dfe..9996da6 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -1128,11 +1128,6 @@ img.pixelate {
   height: 100%;
 }
 
-.reveal .image {
-  filter: blur(20px);
-  opacity: 0.4;
-}
-
 .reveal-text-container {
   position: absolute;
   top: 15px;
@@ -1148,10 +1143,6 @@ img.pixelate {
   font-size: 0.9em;
 }
 
-.reveal:not(.revealed) .image-inner-area {
-  background: var(--deep-color);
-}
-
 .reveal-text {
   color: white;
   text-align: center;
@@ -1172,6 +1163,25 @@ img.pixelate {
 
 .reveal-interaction {
   opacity: 0.8;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
+.reveal .image {
+  opacity: 0.7;
+  filter: blur(20px) brightness(0.7);
+}
+
+.reveal .image.reveal-thumbnail {
+  image-rendering: pixelated;
+}
+
+.reveal.has-reveal-thumbnail:not(.revealed) .image:not(.reveal-thumbnail) {
+  display: none !important;
+}
+
+.reveal.revealed.has-reveal-thumbnail .image.reveal-thumbnail {
+  display: none !important;
 }
 
 .reveal.revealed .image {
@@ -1183,6 +1193,27 @@ img.pixelate {
   display: none;
 }
 
+.reveal:not(.revealed) .image-inner-area {
+  background: var(--deep-color);
+
+  box-sizing: border-box;
+  border: 1px dotted var(--primary-color);
+  border-radius: 6px;
+}
+
+.reveal .image-inner-area:hover .reveal-interaction {
+  text-decoration-style: solid;
+}
+
+.reveal:not(.revealed) .image-inner-area:hover {
+  border-style: solid;
+}
+
+.reveal:not(.revealed) .image-inner-area:hover .image {
+  filter: blur(20px) brightness(0.6);
+  opacity: 0.6;
+}
+
 .image-link:not(.no-image-preview) .image-container {
   background: var(--deep-color);
   box-shadow: none;