From b3da9525586fcfaa8b6d6a756af62236bbf15826 Mon Sep 17 00:00:00 2001
From: Rhiannon Morris <rhi@rhiannon.website>
Date: Mon, 14 Sep 2020 02:34:21 +0200
Subject: [PATCH] use <template> element for cws

---
 make-pages/SinglePage.hs |  9 ++++++++-
 script/single.js         | 11 ++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/make-pages/SinglePage.hs b/make-pages/SinglePage.hs
index 5b73264..ca0747c 100644
--- a/make-pages/SinglePage.hs
+++ b/make-pages/SinglePage.hs
@@ -57,12 +57,15 @@ make' root prefix nsfw dataDir dir info@(Info {date, title, artist, bg}) = do
   let makePrefetch (Image {path}) = [b|<link rel=prefetch href=$path>|]
   let prefetches = map (makePrefetch . #first) $ tail images
 
-  let warning' = ifJust (#warning image0) \w -> [b|@4
+  let makeWarning w = [b|@4
         <figcaption id=cw aria-role=button tabindex=0>
           <span id=cw-text>cw: <b>$w</b></span>
         </figcaption>
       |]
 
+  let warning' = ifJust (#warning image0) makeWarning
+  let warningT = makeWarning [b|.|]
+
   let bgStyle = ifJust bg \col -> [b|@0
         <style> #mainfig { background: $col; } </style>
       |]
@@ -125,6 +128,10 @@ make' root prefix nsfw dataDir dir info@(Info {date, title, artist, bg}) = do
     <footer>
       <a href=$undir>back to gallery</a>
     </footer>
+
+    <template id=cw-template>
+      $warningT
+    </template>
   |]
 
 makeArtist :: Artist -> Builder
diff --git a/script/single.js b/script/single.js
index 5e3347f..8f4dc39 100644
--- a/script/single.js
+++ b/script/single.js
@@ -28,13 +28,10 @@ function setImage(id, src, width, height, href, cw, firstLoad) {
   let newCaption;
 
   if (!opened.has(id) && cw) {
-    let template = document.createElement('template');
-    template.innerHTML = `
-      <figcaption id=cw aria-role=button tabindex=0>
-        <span id=cw-text>cw: <b>${cw}</b></span>
-      </figcaption>`;
-    newCaption = template.content;
-    addCWListeners(id, newCaption.getElementById('cw'));
+    newCaption = document.getElementById('cw-template')
+                    .content.firstElementChild.cloneNode(true);
+    newCaption.querySelector('#cw-text').innerHTML = cw;
+    addCWListeners(id, newCaption.querySelector('#cw'));
   }
 
   if (caption) {