add button to skip all cws

make-pages/SinglePage.hs

@@ -9,7 +9,7 @@ import qualified NsfwWarning
 import Control.Exception
 import Control.Monad
 import Data.List (sort, intersperse)
-import Data.Maybe (fromMaybe, isNothing)
+import Data.Maybe (fromMaybe, isNothing, isJust)
 import qualified Data.Text as Strict
 import qualified Data.Text.Lazy as Lazy
 import System.FilePath (joinPath, splitPath)
@@ -237,6 +237,7 @@ makeButtonBar title images =
   makeNav (cls :: Text) inner = [b|@0
      <nav id=alts class=$cls aria-label="alternate versions">
        $2.inner
+       $2.skipAll
      </nav> |]
   makeCat lbl imgs = [b|@0
       <section>
@@ -249,6 +250,16 @@ makeButtonBar title images =
          $2.elems
        </ul> |]
     where elems = map (\(img,i) -> altButton img i) imgs
+  skipAll =
+    if any (isJust . #warning . fst) images then
+      [b|@0
+        <div class=buttonbar id=skipAllDiv>
+          <input type=checkbox name=skipAll id=skipAll>
+          <label for=skipAll>skip warnings</label>
+        </div>
+      |]
+    else
+      ""
 
 flatten :: [(Text, [(Image, a)])] -> [(Image, Text)]
 flatten cats =

script/single.js

@@ -5,10 +5,11 @@ let mainfig;
 let mainimg;
 let mainlink;
 let altButtons;
+let skipAll;
 
 let opened = new Set;
 
-function openCW(id, caption, focusLink) {
+function openCW(id, caption, focusLink = false) {
   if (id) opened.add(id);
   mainfig.removeChild(caption);
   mainlink.tabIndex = 0;
@@ -27,7 +28,7 @@ function setImage(id, src, width, height, href, cw, firstLoad) {
   let caption = document.getElementById('cw');
   let newCaption;
 
-  if (!opened.has(id) && cw) {
+  if (!skipAll.checked && !opened.has(id) && cw) {
     newCaption = document.getElementById('cw-template')
                     .content.firstElementChild.cloneNode(true);
     newCaption.querySelector('#cw-text').innerHTML = cw;
@@ -81,14 +82,25 @@ function setup() {
   mainfig  = document.getElementById('mainfig');
   mainimg  = document.getElementById('mainimg');
   mainlink = document.getElementById('mainlink');
+  skipAll  = document.getElementById('skipAll');
 
   let alts = document.getElementById('alts');
-  altButtons = alts ? Array.from(alts.getElementsByTagName('input')) : [];
+  if (alts) {
+    let inputs = Array.from(alts.getElementsByTagName('input'));
+    altButtons = inputs.filter(e => e.name == 'variant');
+  } else {
+    altButtons = [];
+  }
 
   for (let button of altButtons) {
     button.onchange = e => { if (button.checked) activateButton(button); };
   }
 
+  skipAll.onchange = e => { if (skipAll.checked) {
+    let caption = document.getElementById('cw');
+    if (caption) { openCW(null, caption, false); }
+  } };
+
   window.addEventListener('popstate', useFragment);
   useFragment(true);
 }

style/shiny/base.css

@@ -123,6 +123,7 @@ figure > img {
   display: flex;
   align-items: flex-start;
   flex-flow: row wrap;
+  margin-top: 0;
   margin-bottom: -0.5em;
 }
 
@@ -139,7 +140,7 @@ figure > img {
   justify-content: center;
 }
 
-.bb-choice input {
+.buttonbar input {
   display: inline;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -149,7 +150,7 @@ figure > img {
   width: 0;
 }
 
-.bb-choice label, .bb-links li {
+.buttonbar label, .bb-links li {
   margin-right: 0.5em;
   padding: 0 0.35em;
   border-radius: var(--button-corner);
@@ -159,11 +160,11 @@ figure > img {
   text-shadow: none;
 }
 
-.bb-choice :focus ~ label, .bb-links li:focus-within {
+.buttonbar :focus ~ label, .bb-links li:focus-within {
   box-shadow: var(--focus-box);
 }
 
-.bb-choice :checked ~ label {
+.buttonbar :checked ~ label {
   color: var(--button-bg);
   background: var(--text-col);
 }

style/shiny/single.css

@@ -190,14 +190,9 @@ footer {
 #alts {
   margin: 1.5em 0;
   text-align: center;
-}
-
-#alts.cat {
   display: grid;
-  grid-template-columns: minmax(auto, 10em) auto;
   grid-gap: 0.5em;
-  align-items: baseline;
+  grid-template-columns: minmax(auto, 10em) auto minmax(auto, 10em);
-  justify-content: center;
 }
 
 #alts.cat :is(h3, ul) { margin: 0; }
@@ -211,9 +206,18 @@ footer {
   display: inline;
   padding-right: 0.5em;
   text-align: right;
+  grid-area: auto / 1 / auto / auto;
 }
 
-#alts.cat ul {
+#alts ul {
   display: inline flex;
-  justify-content: start;
+  grid-area: auto / 2 / auto / auto;
+}
+
+.cat ul { justify-content: start; }
+
+#skipAllDiv {
+  align-self: start;
+  justify-content: end;
+  grid-area: 1 / 3 / auto / auto;
 }