summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorzx14 <zx14@vndb.org>2018-11-04 12:42:48 +0700
committerAlexander-- <alexander.r@gmx.com>2018-11-04 12:43:50 +0700
commit1c8077bfe8c4ad6e8c94ddc94bf505d1396ca3ac (patch)
tree728c28c3c7cd2f704862037d9840187bbe44ec0f
parent9f4b31ae6aa3f33856978b09481b97c5b13f4359 (diff)
JS-less tag visibility toggles
-rw-r--r--data/js/tagops.js25
-rw-r--r--data/style.css30
-rw-r--r--lib/VNDB/Handler/VNPage.pm55
3 files changed, 72 insertions, 38 deletions
diff --git a/data/js/tagops.js b/data/js/tagops.js
index 3f789ee6..4eebee43 100644
--- a/data/js/tagops.js
+++ b/data/js/tagops.js
@@ -1,30 +1,29 @@
var l, lim, spoil = 0, cats = {};
-
function init() {
var i;
- l = byName(byId('tagops'), 'a');
+ l = byName(byId('tagops'), 'input');
// Categories
for(i=0; i<3; i++) {
- l[i].tagops_cat = l[i].href.substr(l[i].href.indexOf('#')+1);
- l[i].onclick = function() { cats[this.tagops_cat] = !cats[this.tagops_cat]; return set(); };
- cats[l[i].tagops_cat] = hasClass(l[i], 'tsel');
+ l[i].tagops_cat = l[i].id.substr(l[i].id.indexOf('cat')+4);
+ l[i].onchange = function() { cats[this.tagops_cat] = !cats[this.tagops_cat]; return set(); };
+ cats[l[i].tagops_cat] = l[i].checked;
}
// Spoiler level
for(i=3; i<6; i++) {
l[i].tagops_spoil = i-3;
- l[i].onclick = function() { spoil = this.tagops_spoil; return set(); };
- if(hasClass(l[i], 'tsel'))
+ l[i].onchange = function() { spoil = this.tagops_spoil; return set(); };
+ if(l[i].checked)
spoil = i-3;
}
// Summary / all
for(i=6; i<8; i++) {
l[i].tagops_lim = i == 6;
- l[i].onclick = function() { lim = this.tagops_lim; return set(); };
- if(hasClass(l[i], 'tsel'))
+ l[i].onchange = function() { lim = this.tagops_lim; return set(); };
+ if(l[i].checked)
lim = i == 6;
}
@@ -35,15 +34,9 @@ function init() {
function set() {
var i;
- // Set link selection class
- for(i=0; i<8; i++)
- setClass(l[i], 'tsel',
- i < 3 ? cats[l[i].tagops_cat] :
- i < 6 ? l[i].tagops_spoil == spoil
- : l[i].tagops_lim == lim);
-
// update tag visibility
var t = byName(byId('vntags'), 'span');
+
var n = 0;
for(i=0; i<t.length; i++) {
var v = n < (lim ? 15 : 999);
diff --git a/data/style.css b/data/style.css
index 036220a7..5f2d5ee4 100644
--- a/data/style.css
+++ b/data/style.css
@@ -373,13 +373,33 @@ div.vndetails td.anime b { font-size: 10px; font-weight: normal; padding-ri
tr#buynow .pricenote { border: 0 }
-div#vntags { margin: 15px 30px 0 30px; border-top: 1px solid $border$; padding: 1px 5% 0 5%; text-align: center; }
+div#vntags { margin: 0 30px 0 30px; border-top: 1px solid $border$; padding: 1px 5% 0 5%; text-align: center; }
#vntags span { white-space: nowrap; margin-left: 15px; }
#vntags b { color: $grayedout$; font-weight: normal; font-size: 10px }
-#tagops { float: right; text-align: right; width: auto; margin: 0 30px; }
-#tagops a { margin: 0 0 0 10px; border: 0; outline: none }
-#tagops a.sec { border-left: 1px solid $border$; padding-left: 10px }
-#tagops a.tsel { color: $maintext$; }
+#tagops { text-align: right; width: auto; }
+
+#tagops label { margin: 0 0 0 10px; border: 0; outline: none; color: $link$; cursor: pointer; }
+#tagops label.sec { border-left: 1px solid $border$; padding-left: 10px }
+#tagops label.lst { margin: 0 30px 0 10px; }
+#tagops input:checked + label { color: $maintext$; }
+
+/* tag filter machinery; the order of declarations is important */
+
+#tag_spoil_all:checked ~ #vntags .cut2 { display: none; }
+#tag_spoil_some:checked ~ #vntags .cut1 { display: none; }
+#tag_spoil_none:checked ~ #vntags .cut0 { display: none; }
+
+#tag_toggle_all:checked ~ #vntags .cut { display: inline }
+
+#cat_cont:not(:checked) ~ #vntags .cat_cont { display: none; }
+#cat_tech:not(:checked) ~ #vntags .cat_tech { display: none; }
+#cat_ero:not(:checked) ~ #vntags .cat_ero { display: none; }
+
+#tag_spoil_none:checked ~ #vntags .tagspl1 { display: none; }
+#tag_spoil_none:checked ~ #vntags .tagspl2 { display: none; }
+#tag_spoil_some:checked ~ #vntags .tagspl2 { display: none; }
+
+/* end of tag filter machinery */
.releases table,
#screenshots table { width: 100%; }
diff --git a/lib/VNDB/Handler/VNPage.pm b/lib/VNDB/Handler/VNPage.pm
index 20f29f7a..2abc1c9a 100644
--- a/lib/VNDB/Handler/VNPage.pm
+++ b/lib/VNDB/Handler/VNPage.pm
@@ -457,25 +457,46 @@ sub page {
my $t = $self->dbTagStats(vid => $v->{id}, sort => 'rating', reverse => 1, minrating => 0, results => 999);
if(@$t) {
div id => 'tagops';
- # NOTE: order of these links is hardcoded in JS
+ # NOTE: order of these inputs is hardcoded in JS
my $tags_cat = $self->authPref('tags_cat') || $self->{default_tags_cat};
- a href => "#$_", $tags_cat =~ /\Q$_/ ? (class => 'tsel') : (), lc $self->{tag_categories}{$_} for keys %{$self->{tag_categories}};
- my $spoiler = $self->authPref('spoilers') || 0;
- a href => '#', class => 'sec'.($spoiler == 0 ? ' tsel' : ''), lc 'Hide spoilers';
- a href => '#', $spoiler == 1 ? (class => 'tsel') : (), lc 'Show minor spoilers';
- a href => '#', $spoiler == 2 ? (class => 'tsel') : (), lc 'Spoil me!';
- a href => '#', class => 'sec'.($self->authPref('tags_all') ? '': ' tsel'), 'summary';
- a href => '#', $self->authPref('tags_all') ? (class => 'tsel') : (), 'all';
- end;
- div id => 'vntags';
- for (@$t) {
- my $spoil = $_->{spoiler} > 1.3 ? 2 : $_->{spoiler} > 0.4 ? 1 : 0;
- span class => sprintf 'tagspl%d cat_%s %s', $spoil, $_->{cat}, $spoil > 0 ? 'hidden' : '';
- a href => "/g$_->{id}", style => sprintf('font-size: %dpx', $_->{rating}*3.5+6), $_->{name};
- b class => 'grayedout', sprintf ' %.1f', $_->{rating};
- end;
- txt ' ';
+ for (keys %{$self->{tag_categories}}) {
+ input id => "cat_$_", type => 'checkbox', class => 'visuallyhidden', $tags_cat =~ /\Q$_/ ? (checked => 'checked') : ();
+ label for => "cat_$_", lc $self->{tag_categories}{$_};
}
+ my $spoiler = $self->authPref('spoilers') || 0;
+ input id => 'tag_spoil_none', type => 'radio', class => 'visuallyhidden', name => 'tag_spoiler', $spoiler == 0 ? (checked => 'checked') : ();
+ label for => 'tag_spoil_none', class => 'sec', lc 'Hide spoilers';
+ input id => 'tag_spoil_some', type => 'radio', class => 'visuallyhidden', name => 'tag_spoiler', $spoiler == 1 ? (checked => 'checked') : ();
+ label for => 'tag_spoil_some', lc 'Show minor spoilers';
+ input id => 'tag_spoil_all', type => 'radio', class => 'visuallyhidden', name => 'tag_spoiler', $spoiler == 2 ? (checked => 'checked') : ();
+ label for => 'tag_spoil_all', lc 'Spoil me!';
+
+ input id => 'tag_toggle_summary', type => 'radio', class => 'visuallyhidden', name => 'tag_all', $self->authPref('tags_all') ? () : (checked => 'checked');
+ label for => 'tag_toggle_summary', class => 'sec', lc 'summary';
+ input id => 'tag_toggle_all', type => 'radio', class => 'visuallyhidden', name => 'tag_all', $self->authPref('tags_all') ? (checked => 'checked') : ();
+ label for => 'tag_toggle_all', class => 'lst', lc 'all';
+ div id => 'vntags';
+ my %counts = ();
+ for (@$t) {
+ my $cnt0 = $counts{$_->{cat} . '0'} || 0;
+ my $cnt1 = $counts{$_->{cat} . '1'} || 0;
+ my $cnt2 = $counts{$_->{cat} . '2'} || 0;
+ my $spoil = $_->{spoiler} > 1.3 ? 2 : $_->{spoiler} > 0.4 ? 1 : 0;
+ SWITCH: {
+ $counts{$_->{cat} . '2'} = ++$cnt2;
+ if ($spoil == 2) { last SWITCH; }
+ $counts{$_->{cat} . '1'} = ++$cnt1;
+ if ($spoil == 1) { last SWITCH; }
+ $counts{$_->{cat} . '0'} = ++$cnt0;
+ }
+ my $cut = $cnt0 > 15 ? ' cut cut2 cut1 cut0' : ($cnt1 > 15 ? ' cut cut2 cut1' : ($cnt2 > 15 ? ' cut cut2' : ''));
+ span class => sprintf 'tagspl%d cat_%s%s', $spoil, $_->{cat}, $cut;
+ a href => "/g$_->{id}", style => sprintf('font-size: %dpx', $_->{rating}*3.5+6), $_->{name};
+ b class => 'grayedout', sprintf ' %.1f', $_->{rating};
+ end;
+ txt ' ';
+ }
+ end;
end;
}
end 'div'; # /mainbox