JS: Rewrote and generalized row group expand code

6 files changed, 49 insertions, 45 deletions

diff --git a/data/style.css b/data/style.css
index a511d01d..94a47a72 100644
--- a/data/style.css
+++ b/data/style.css
@@ -479,7 +479,7 @@ div.mainbox.history td.tc1_2 {
 }
 div.mainbox.history td.tc2 { width: 65px; }
 div.mainbox.history td.tc3 { width: 90px  }
-tr.collapse td {
+tr.msgsum td {
   color: $grayedout$;
   padding-top: 0;
   text-align: right;
@@ -907,8 +907,8 @@ a.addnew {
 
 /***** User VN list browser ******/
 
-.relhid_but, #relhidall { cursor: pointer }
-.relhid_but i, #relhidall i { font-style: normal }
+#expandall, .collapse_but { cursor: pointer }
+#expandall i, .collapse_but i { font-style: normal }
 .browse.rlist .tc2 { width: 100px; }
 .browse.rlist .tc3 { width: 70px; }
 .browse.rlist .relhid .tc1 { padding-left: 40px; width: 70px; }
diff --git a/lib/VNDB/Handler/Tags.pm b/lib/VNDB/Handler/Tags.pm
index ae240d38..8484ad96 100644
--- a/lib/VNDB/Handler/Tags.pm
+++ b/lib/VNDB/Handler/Tags.pm
@@ -529,7 +529,7 @@ sub usertags {
       header   => [
         sub {
           td class => 'tc1';
-           b id => 'relhidall';
+           b id => 'expandall';
             lit '<i>&#9656;</i> '.mt('_tagu_col_num').' ';
            end;
            lit $f->{s} eq 'cnt' && $f->{o} eq 'a' ? "\x{25B4}" : qq|<a href="/u$u->{id}/tags?o=a;s=cnt">\x{25B4}</a>|;
@@ -542,7 +542,7 @@ sub usertags {
       row     => sub {
         my($s, $n, $l) = @_;
         Tr $n % 2 ? (class => 'odd') : ();
-         td class => 'tc1 relhid_but', id => "tag$l->{id}";
+         td class => 'tc1 collapse_but', id => "tag$l->{id}";
           lit "<i>&#9656;</i> $l->{cnt}";
          end;
          td class => 'tc2', colspan => 2;
@@ -550,7 +550,7 @@ sub usertags {
          end;
         end;
         for(@{$l->{vns}}) {
-          Tr class => "relhid tag$l->{id}";
+          Tr class => "collapse collapse_tag$l->{id}";
            td class => 'tc1_1';
             tagscore $_->{vote};
            end;
diff --git a/lib/VNDB/Handler/ULists.pm b/lib/VNDB/Handler/ULists.pm
index 7d1a9304..049ef48a 100644
--- a/lib/VNDB/Handler/ULists.pm
+++ b/lib/VNDB/Handler/ULists.pm
@@ -285,7 +285,7 @@ sub _vnlist_browse {
     pageurl  => $url->('page'),
     header   => [
       [ mt('_rlist_col_title') => 'title', 3 ],
-      sub { td class => 'tc2', id => 'relhidall'; lit '<i>&#9656;</i>'.mt('_rlist_col_releases').'*'; end; },
+      sub { td class => 'tc2', id => 'expandall'; lit '<i>&#9656;</i>'.mt('_rlist_col_releases').'*'; end; },
       [ mt('_rlist_col_vote')  => 'vote'  ],
     ],
     row      => sub {
@@ -294,7 +294,7 @@ sub _vnlist_browse {
        td class => 'tc1', colspan => 3;
         a href => "/v$i->{vid}", title => $i->{original}||$i->{title}, shorten $i->{title}, 70;
        end;
-       td class => 'tc2'.(@{$i->{rels}} ? ' relhid_but' : ''), id => 'vid'.$i->{vid};
+       td class => 'tc2'.(@{$i->{rels}} ? ' collapse_but' : ''), id => 'vid'.$i->{vid};
         lit '<i>&#9656;</i>';
         my $obtained = grep $_->{rstat}==2, @{$i->{rels}};
         my $finished = grep $_->{vstat}==2, @{$i->{rels}};
@@ -307,7 +307,7 @@ sub _vnlist_browse {
       end;
 
       for (@{$i->{rels}}) {
-        Tr class => "relhid vid$i->{vid}";
+        Tr class => "collapse relhid collapse_vid$i->{vid}";
          td class => 'tc1'.($own ? ' own' : '');
           input type => 'checkbox', name => 'sel', value => $_->{rid}
             if $own;
diff --git a/lib/VNDB/Handler/Users.pm b/lib/VNDB/Handler/Users.pm
index 32bf96cd..2708f66e 100644
--- a/lib/VNDB/Handler/Users.pm
+++ b/lib/VNDB/Handler/Users.pm
@@ -396,7 +396,7 @@ sub posts {
        td class => 'tc3', $self->{l10n}->date($l->{date});
        td class => 'tc4'; a href => "/t$l->{tid}.$l->{num}", $l->{title}; end;
       end;
-      Tr class => $n % 2 ? 'collapse odd hidden' : 'collapse hidden';
+      Tr class => $n % 2 ? 'collapse msgsum odd hidden' : 'collapse msgsum hidden';
        td colspan => 4;
         lit bb2html $l->{msg}, 150;
        end;
diff --git a/lib/VNDB/Util/CommonHTML.pm b/lib/VNDB/Util/CommonHTML.pm
index 1298af00..e0fe65d2 100644
--- a/lib/VNDB/Util/CommonHTML.pm
+++ b/lib/VNDB/Util/CommonHTML.pm
@@ -524,7 +524,7 @@ sub htmlHistory {
        end;
       end;
       if($i->{comments}) {
-        Tr class => $n % 2 ? 'collapse odd hidden' : 'collapse hidden';
+        Tr class => $n % 2 ? 'collapse msgsum odd hidden' : 'collapse msgsum hidden';
          td colspan => 5;
           lit bb2html $i->{comments}, 150;
          end;
diff --git a/static/f/script.js b/static/f/script.js
index 4ab704f0..ccfaceba 100644
--- a/static/f/script.js
+++ b/static/f/script.js
@@ -1,3 +1,5 @@
+var expanded_icon = '▾';
+var collapsed_icon = '▸';
 
 /*  M I N I M A L   J A V A S C R I P T   L I B R A R Y  */
 
@@ -300,7 +302,6 @@ function ddMouseMove(e) {
 }
 
 
-
 // release list dropdown on VN pages
 
 var rstat = [ 'Unknown', 'Pending', 'Obtained', 'On loan', 'Deleted' ];
@@ -548,7 +549,7 @@ if(byId('advselect')) {
     var box = byId('advoptions');
     var hidden = !hasClass(box, 'hidden');
     setClass(box, 'hidden', hidden);
-    setText(byName(this, 'i')[0], hidden ? '▸' : '▾');
+    setText(byName(this, 'i')[0], hidden ? collapsed_icon : expanded_icon);
     return false;
   };
 }
@@ -681,6 +682,41 @@ if(byId('expandlist')) {
   };
 }
 
+// collapse/expand row groups (/u+/tags, /u+/list) (limited to one table on a page)
+if(byId('expandall')) {
+  var table = byId('expandall');
+  while(table.nodeName.toLowerCase() != 'table')
+    table = table.parentNode;
+  var heads = byClass(table, 'td', 'collapse_but');
+  var allhid = false;
+
+  var alltoggle = function() {
+    allhid = !allhid;
+    var l = byClass(table, 'tr', 'collapse');
+    for(var i=0; i<l.length; i++)
+      setClass(l[i], 'hidden', allhid);
+    setText(byName(byId('expandall'), 'i')[0], allhid ? collapsed_icon : expanded_icon);
+    for(var i=0; i<heads.length; i++)
+      setText(byName(heads[i], 'i')[0], allhid ? collapsed_icon : expanded_icon);
+    return false;
+  }
+  byId('expandall').onclick = alltoggle;
+  alltoggle();
+
+  var singletoggle = function() {
+    var l = byClass(table, 'tr', 'collapse_'+this.id);
+    if(l.length < 1)
+      return;
+    var hid = !hasClass(l[0], 'hidden');
+    for(var i=0; i<l.length; i++)
+      setClass(l[i], 'hidden', hid);
+    setText(byName(this, 'i')[0], hid ? collapsed_icon : expanded_icon);
+  };
+  for(var i=0; i<heads.length; i++)
+    heads[i].onclick = singletoggle;
+}
+
+
 // spam protection on all forms
 setTimeout(function() {
   for(i=1; i<document.forms.length; i++)
@@ -689,38 +725,6 @@ setTimeout(function() {
 
 
 
-  // User VN list
-  // (might want to make this a bit more generic, as it's now also used for the user tag list)
-  i = x('relhidall');
-  if(i) {
-    var l = document.getElementsByTagName('tr');
-    for(var i=0;i<l.length;i++)
-      if(l[i].className.indexOf('relhid') >= 0)
-        l[i].style.display = 'none';
-    var l = document.getElementsByTagName('td');
-    for(var i=0;i<l.length;i++)
-      if(l[i].className.indexOf('relhid_but') >= 0)
-        l[i].onclick = function() {
-          var l = document.getElementsByTagName('tr');
-          for(var i=0;i<l.length;i++)
-            if(l[i].className.substr(7) == this.id) {
-              l[i].style.display = l[i].style.display == 'none' ? '' : 'none';
-              this.getElementsByTagName('i')[0].innerHTML = l[i].style.display == 'none' ? '&#9656;' : '&#9662;';
-            }
-        };
-    var allhid = 1;
-    x('relhidall').onclick = function() {
-      allhid = !allhid;
-      var l = document.getElementsByTagName('tr');
-      for(var i=0;i<l.length;i++)
-        if(l[i].className.indexOf('relhid') >= 0) {
-          l[i].style.display = allhid ? 'none' : '';
-          x(l[i].className.substr(7)).getElementsByTagName('i')[0].innerHTML = allhid ? '&#9656;' : '&#9662;';
-        }
-      this.getElementsByTagName('i')[0].innerHTML = allhid ? '&#9656;' : '&#9662;';
-    };
-  }
-
   // auto-complete tag search
   if(x('advselect') && x('ti')) {
     var fields=['ti','te'];