VN::Page: Experiment with collapsable language sections

Fully MTL languages are collapsed by default. The state for languages is
remembered in the browsers' localStorage.

This is essentially a simple language filter and provides a partial
solution to https://vndb.org/t15877

3 files changed, 35 insertions, 11 deletions

diff --git a/css/v2.css b/css/v2.css
index 90db5e48..f851127c 100644
--- a/css/v2.css
+++ b/css/v2.css
@@ -443,7 +443,6 @@ div.postsearch td.tc3             { width: 90px; }
 /***** Release listings on VN & producer pages */
 
 .releases { width: 100%; }
-.releases tr.lang td,
 .releases tr.vn td     { background: $boxbg; font-weight: bold; }
 .releases td.tc1       { padding-left: 30px; width: 80px; white-space: nowrap }
 .releases td.tc2       { text-align: center; width: 50px; white-space: nowrap }
@@ -451,11 +450,15 @@ div.postsearch td.tc3             { width: 90px; }
 .releases td.tc_icons  { padding: 0 4px }
 .releases td.tc_prod   { color: $grayedout; white-space: nowrap; width: 50px }
 .releases td.tc5       { width: 70px; text-align: right }
-.releases td.tc6       { text-align: right; width: 25px; padding: 0; white-space: nowrap }
+.releases td.tc6       { text-align: right; width: 35px; padding: 0; white-space: nowrap }
 .releases tr.mtl a,
 .releases tr.mtl b,
 .releases tr.mtl td { color: $grayedout }
 
+.vnreleases details { margin: 7px 0 3px 0 }
+.vnreleases details[open] summary b.grayedout { display: none }
+.vnreleases summary { background: $boxbg; font-weight: bold; width: 100%; cursor: pointer }
+.vnreleases summary.mtl { color: $grayedout; }
 
 /***** VN page *******/
 
diff --git a/elm/remember-details.js b/elm/remember-details.js
new file mode 100644
index 00000000..0f3e000a
--- /dev/null
+++ b/elm/remember-details.js
@@ -0,0 +1,18 @@
+/* Simple script to remember the open/closed state of <details> elements.
+ * Usage:
+ *
+ *   <details data-remember-id=".."> .. </details>
+ *
+ * This does have the downside of causing a DOM reflow if the elements' default
+ * state differs from the one stored by the user, and the preference is stored
+ * in the users' browser rather than their account, so it doesn't transfer.
+ */
+document.querySelectorAll('details[data-remember-id]').forEach(function(el) {
+    var sid = 'remember-details-'+el.getAttribute('data-remember-id');
+    el.addEventListener('toggle', function() {
+        window.localStorage.setItem(sid, el.open ? '1' : '');
+    });
+    var val = window.localStorage.getItem(sid);
+    if(val != null)
+        el.open = val == '1' ? true : false;
+});
diff --git a/lib/VNWeb/VN/Page.pm b/lib/VNWeb/VN/Page.pm
index c5d8a9bf..6cfc0230 100644
--- a/lib/VNWeb/VN/Page.pm
+++ b/lib/VNWeb/VN/Page.pm
@@ -468,23 +468,26 @@ sub releases_ {
 
     my sub lang_ {
         my($lang) = @_;
-        my $mtl = $langmtl{$lang} ? ' mtl' : '';
-        tr_ class => "lang$mtl", sub {
-            td_ colspan => 7, sub {
-                abbr_ class => "icons lang $lang$mtl", title => $LANGUAGE{$lang}, '';
+        my $ropt = { id => $lang, lang => $lang };
+        my $mtl = $langmtl{$lang};
+        tag_ 'details', $mtl ? () : (open => 'open'), 'data-remember-id' => "vnlang-$lang".($mtl?'-mtl':''), sub {
+            tag_ 'summary', $mtl ? (class => 'mtl') : (), sub {
+                abbr_ class => "icons lang $lang".($mtl?' mtl':''), title => $LANGUAGE{$lang}, '';
                 txt_ $LANGUAGE{$lang};
-            }
+                b_ class => 'grayedout', sprintf ' (%d)', scalar $lang{$lang}->@*;
+            };
+            table_ class => 'releases', sub {
+                release_row_ $_, $ropt for $lang{$lang}->@*;
+            };
         };
-        my $ropt = { id => $lang, lang => $lang };
-        release_row_ $_, $ropt for $lang{$lang}->@*;
     }
 
-    div_ class => 'mainbox', sub {
+    div_ class => 'mainbox vnreleases', sub {
         h1_ 'Releases';
         if(!$v->{releases}->@*) {
             p_ 'We don\'t have any information about releases of this visual novel yet...';
         } else {
-            table_ class => 'releases', sub { lang_ $_ for @lang };
+            lang_ $_ for @lang;
         }
     }
 }