From 5b1e69fb1972b00a7e8c154d84a0885c2c4bf95f Mon Sep 17 00:00:00 2001
From: Yorhel <git@yorhel.nl>
Date: Mon, 6 Jan 2020 16:46:12 +0100
Subject: Staff::Page: Add spoiler hiding options for voiced character listing

---
 data/style.css          | 23 +++++++++++++++--------
 elm/spoilset.js         | 27 +++++++++++++++++++++++++++
 lib/VNWeb/Staff/Page.pm | 20 +++++++++++++++-----
 3 files changed, 57 insertions(+), 13 deletions(-)
 create mode 100644 elm/spoilset.js

diff --git a/data/style.css b/data/style.css
index 0a1913e8..3a657c74 100644
--- a/data/style.css
+++ b/data/style.css
@@ -52,6 +52,13 @@ table.stripe tbody tr:nth-child(odd):not(.nostripe),
   clip: rect(1px 1px 1px 1px);
 }
 
+/* Generic spoiler level hiding
+ * .spoillvl-[012]  -> parent tag indicating currently visible level
+ * .spoil-[012]     -> child tags indicating item spoiler level */
+.spoillvl-0 .spoil-1,
+.spoillvl-0 .spoil-2,
+.spoillvl-1 .spoil-2 { display: none }
+
 /* Warning/Notice Box */
 div.warning, div.notice       { margin: 5px 10%; padding: 15px; background-color: $warnbg$; border: 1px solid $warnborder$; }
 div.notice                    { background-color: $noticebg$; border: 1px solid $noticeborder$; }
@@ -308,6 +315,14 @@ div.maintabs.bottom > ul li a       { padding: 4px 7px 2px 7px; border-bottom: 1
 div.maintabs.bottom > ul li.tabselected a,
 div.maintabs.bottom > ul li a:hover { padding-top: 5px; height: 22px; margin-top: -1px }
 
+h1.boxtitle, h1.boxtitle a, div.maintabs h1 {
+  font-family: "Futura", "Century New Gothic", "Arial", Serif;
+  font-weight: bold;
+  font-style: italic;
+  color: $grayedout$;
+  font-size: 17px;
+}
+h1.boxtitle, h1.boxtitle a { margin: 20px 0 -20px 0 }
 
 
 
@@ -393,14 +408,6 @@ div.postsearch td.tc1_1           { width: 60px; padding-left: 0; padding-right:
 div.postsearch td.tc1_2           { width: 25px; padding-left: 0 }
 div.postsearch td.tc2             { width: 65px;  }
 div.postsearch td.tc3             { width: 90px; }
-h1.boxtitle, h1.boxtitle a {
-  font-family: "Futura", "Century New Gothic", "Arial", Serif;
-  font-weight: bold;
-  font-style: italic;
-  color: $grayedout$;
-  font-size: 17px;
-  margin: 20px 0 -20px 0;
-}
 
 
 
diff --git a/elm/spoilset.js b/elm/spoilset.js
new file mode 100644
index 00000000..69129f6d
--- /dev/null
+++ b/elm/spoilset.js
@@ -0,0 +1,27 @@
+/* Spoiler hiding, works in tandem with the .spoillvl-x and .spoil-x classes.
+ * Usage:
+ *   <a href="#" class="spoilset-0" data-target="someclass">hide spoilers</a>
+ *   <div class="someclass spoillvl-0">
+ *     <span class="spoil-1">minor spoiler</span>
+ *   </div>
+ */
+document.querySelectorAll('.spoilset-0, .spoilset-1, .spoilset-2').forEach(function(a) {
+    a.addEventListener('click', function(ev) {
+        var lvl = a.classList.contains('spoilset-0') ? 0 : a.classList.contains('spoilset-1') ? 1 : 2;
+        var t = document.querySelector('.'+a.getAttribute('data-target'));
+        t.classList.toggle('spoillvl-0', lvl == 0);
+        t.classList.toggle('spoillvl-1', lvl == 1);
+        t.classList.toggle('spoillvl-2', lvl == 2);
+
+        // Updating the visual selected status of the links depends on context, the following is for use in 'maintabs' links.
+        // XXX: This would be nicer when done in CSS.
+        var p = a.closest('div.maintabs');
+        if(p) {
+            p.querySelector('.spoilset-0').parentNode.classList.toggle('tabselected', lvl == 0);
+            p.querySelector('.spoilset-1').parentNode.classList.toggle('tabselected', lvl == 1);
+            p.querySelector('.spoilset-2').parentNode.classList.toggle('tabselected', lvl == 2);
+        }
+        ev.preventDefault();
+        return false;
+    });
+});
diff --git a/lib/VNWeb/Staff/Page.pm b/lib/VNWeb/Staff/Page.pm
index 8a42f05f..fe5a5696 100644
--- a/lib/VNWeb/Staff/Page.pm
+++ b/lib/VNWeb/Staff/Page.pm
@@ -113,7 +113,8 @@ sub _cast_ {
     my %alias = map +($_->{aid}, $_), $s->{alias}->@*;
 
     my $cast = tuwf->dbAlli(q{
-        SELECT vs.aid, v.id, v.c_released, v.title, v.original, c.id AS cid, c.name AS c_name, c.original AS c_original, vs.note
+        SELECT vs.aid, v.id, v.c_released, v.title, v.original, c.id AS cid, c.name AS c_name, c.original AS c_original, vs.note,
+               (SELECT MIN(cv.spoil) FROM chars_vns cv WHERE cv.id = c.id AND cv.vid = v.id) AS spoil
           FROM vn_seiyuu vs
           JOIN vn v ON v.id = vs.id
           JOIN chars c ON c.id = vs.cid
@@ -124,17 +125,26 @@ sub _cast_ {
     });
     return if !@$cast;
 
-    h1_ class => 'boxtitle', sprintf 'Voiced characters (%d)', scalar @$cast;
-    div_ class => 'mainbox browse staffroles', sub {
+    my $spoillvl = tuwf->authPref('spoilers')||0;
+
+    div_ class => 'maintabs', sub {
+        h1_ sprintf 'Voiced characters (%d)', scalar @$cast;
+        ul_ sub {
+            li_ mkclass(tabselected => $spoillvl == 0), sub { a_ href => '#', class => 'spoilset-0', 'data-target' => 'voicedchars', 'hide spoilers' };
+            li_ mkclass(tabselected => $spoillvl == 1), sub { a_ href => '#', class => 'spoilset-1', 'data-target' => 'voicedchars', 'minor spoilers' };
+            li_ mkclass(tabselected => $spoillvl == 2), sub { a_ href => '#', class => 'spoilset-2', 'data-target' => 'voicedchars', 'spoil me!' };
+        };
+    };
+    div_ class => "mainbox browse staffroles voicedchars spoillvl-$spoillvl", sub {
         table_ class => 'stripe', sub {
             thead_ sub { tr_ sub {
-                td_ class => 'tc1', 'Title';
+                td_ class => 'tc1', sub { txt_ 'Title'; debug_ $cast };
                 td_ class => 'tc2', 'Released';
                 td_ class => 'tc3', 'Cast';
                 td_ class => 'tc4', 'As';
                 td_ class => 'tc5', 'Note';
             }};
-            tr_ sub {
+            tr_ class => "spoil-$_->{spoil}", sub {
                 my($v, $a) = ($_, $alias{$_->{aid}});
                 td_ class => 'tc1', sub {
                     a_ href => "/v$v->{id}", title => $v->{original}||$v->{title}, shorten $v->{title}, 60;
-- 
cgit v1.2.3