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 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

View file

@ -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) {