From 70e3e36244a7c3fe706a98df711ed81a6070e287 Mon Sep 17 00:00:00 2001
From: rhiannon morris <rhi@rhiannon.website>
Date: Mon, 5 Aug 2024 21:27:23 +0200
Subject: [PATCH] keep cw up until new images loads when needed

fixes #18
---
 make-pages/SinglePage.hs |  2 +-
 script/single.ts         | 29 ++++++++++++++++-------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/make-pages/SinglePage.hs b/make-pages/SinglePage.hs
index eb99eca..b2644a3 100644
--- a/make-pages/SinglePage.hs
+++ b/make-pages/SinglePage.hs
@@ -62,7 +62,7 @@ make' root siteName prefix nsfw _dataDir dir
   let updates       = sort $ updatesFor nsfw info
   let updatesList   = makeUpdates updates
 
-  let makePrefetch img = [b|<link rel=preload as=image href=$path'>|]
+  let makePrefetch img = [b|<link rel=prefetch as=image href=$path'>|]
         where path' = bigFile img
   let prefetches = map makePrefetch otherImages
 
diff --git a/script/single.ts b/script/single.ts
index 306d117..116c83e 100644
--- a/script/single.ts
+++ b/script/single.ts
@@ -22,25 +22,28 @@ function addCWListeners(id: string | null, caption: HTMLElement): void {
 }
 
 function setImage(id: string, src: string, href: string, cw: string): void {
-  const caption = document.getElementById('cw');
-  const checked = skipAll ? skipAll.checked : false;
+  const curCw = document.getElementById('cw');
+  const coverNew = cw != '' && !opened.has(id) && !skipAll.checked;
 
-  if (!checked && !opened.has(id) && cw) {
-    const template = document.getElementById('cw-template') as HTMLTemplateElement;
-    const newCaption = template.content.firstElementChild!.cloneNode(true) as HTMLElement;
-    newCaption.querySelector('#cw-text')!.innerHTML = cw;
+  if (curCw && !coverNew) {
+    // keep old cover until load
+    mainimg.addEventListener('load', () => openCW(null, curCw), {once: true});
+  } else if (coverNew) {
+    // place new cover
+    const newCw =
+      (document.getElementById('cw-template') as HTMLTemplateElement)
+        .content.firstElementChild!.cloneNode(true) as HTMLElement;
+    newCw.querySelector('#cw-text')!.innerHTML = cw;
 
-    if (caption) openCW(null, caption);
-
-    mainfig.insertBefore(newCaption, mainlink);
+    if (curCw) openCW(null, curCw);
+    mainfig.insertBefore(newCw, mainlink);
     mainlink.tabIndex = -1;
 
-    addCWListeners(id, newCaption);
-  } else {
-    if (caption) openCW(null, caption);
+    addCWListeners(id, newCw);
   }
+  // else no cover before or after
 
-  mainimg.src   = src;
+  mainimg.src = src;
   mainlink.href = href;
 }