summaryrefslogtreecommitdiff
path: root/data
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 /data
parent9f4b31ae6aa3f33856978b09481b97c5b13f4359 (diff)
JS-less tag visibility toggles
Diffstat (limited to 'data')
-rw-r--r--data/js/tagops.js25
-rw-r--r--data/style.css30
2 files changed, 34 insertions, 21 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%; }