summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2020-01-06 16:46:12 +0100
committerYorhel <git@yorhel.nl>2020-01-06 16:46:12 +0100
commit5b1e69fb1972b00a7e8c154d84a0885c2c4bf95f (patch)
tree2243dc89f095fe3b8c2e11af79ade4829f007b47
parent4d702c8f3947b6ac5048775e5f7c5a59380f8d34 (diff)
Staff::Page: Add spoiler hiding options for voiced character listing
-rw-r--r--data/style.css23
-rw-r--r--elm/spoilset.js27
-rw-r--r--lib/VNWeb/Staff/Page.pm20
3 files changed, 57 insertions, 13 deletions
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;