use <template> element for cws

This commit is contained in:
Rhiannon Morris 2020-09-14 02:34:21 +02:00
parent 258b1c6102
commit b3da952558
2 changed files with 12 additions and 8 deletions

View file

@ -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 makePrefetch (Image {path}) = [b|<link rel=prefetch href=$path>|]
let prefetches = map (makePrefetch . #first) $ tail images 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> <figcaption id=cw aria-role=button tabindex=0>
<span id=cw-text>cw: <b>$w</b></span> <span id=cw-text>cw: <b>$w</b></span>
</figcaption> </figcaption>
|] |]
let warning' = ifJust (#warning image0) makeWarning
let warningT = makeWarning [b|.|]
let bgStyle = ifJust bg \col -> [b|@0 let bgStyle = ifJust bg \col -> [b|@0
<style> #mainfig { background: $col; } </style> <style> #mainfig { background: $col; } </style>
|] |]
@ -125,6 +128,10 @@ make' root prefix nsfw dataDir dir info@(Info {date, title, artist, bg}) = do
<footer> <footer>
<a href=$undir>back to gallery</a> <a href=$undir>back to gallery</a>
</footer> </footer>
<template id=cw-template>
$warningT
</template>
|] |]
makeArtist :: Artist -> Builder makeArtist :: Artist -> Builder

View file

@ -28,13 +28,10 @@ function setImage(id, src, width, height, href, cw, firstLoad) {
let newCaption; let newCaption;
if (!opened.has(id) && cw) { if (!opened.has(id) && cw) {
let template = document.createElement('template'); newCaption = document.getElementById('cw-template')
template.innerHTML = ` .content.firstElementChild.cloneNode(true);
<figcaption id=cw aria-role=button tabindex=0> newCaption.querySelector('#cw-text').innerHTML = cw;
<span id=cw-text>cw: <b>${cw}</b></span> addCWListeners(id, newCaption.querySelector('#cw'));
</figcaption>`;
newCaption = template.content;
addCWListeners(id, newCaption.getElementById('cw'));
} }
if (caption) { if (caption) {