Wrote a more dynamic navigation bar

Not finished yet, though.

www/index.pl

@@ -305,7 +305,7 @@ sub manjslist {
 
   # For JS: (Already sorted)
   # [
-  #   ["System", "Full name", [
+  #   ["System", "Full name", "short" [
   #       [ "package", "version", [
   #           [ "section", "locale"||null ],
   #           ...
@@ -319,7 +319,7 @@ sub manjslist {
   my %sys;
   push @{$sys{$_->{system}}}, $_ for (@$m);
   [
-    map [ $self->{sysbyid}{$_}{name}, $self->{sysbyid}{$_}{full},
+    map [ $self->{sysbyid}{$_}{name}, $self->{sysbyid}{$_}{full}, $self->{sysbyid}{$_}{short},
       do {
         my %pkgs;
         for(@{$sys{$_}}) {
@@ -394,7 +394,7 @@ sub man {
   my $man = getman($self, $name, $hash, $m);
 
   $self->htmlHeader(title => $name);
-  dl id => 'nav', ' '; # To be filled in by JS
+  div id => 'nav', ' '; # To be filled in by JS
 
   h1 $man->{name};
   p;

www/man.css

@@ -41,9 +41,12 @@ td { padding: 1px 5px; font-size: 12px; border-left: 1px solid #ccc; }
 
 #nav { background: #f0f8ff; color: #036; float: right; padding: 8px; width: 250px; margin-bottom: 10px;
   -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
-#nav > dt { font-weight: bold; }
+#nav a.global, #nav i.global { float: right; font-family: "Verdana"; font-size: 13px }
+#nav i.global { font-style: normal; padding: 3px 5px; color: #aaa }
+#nav dl { clear: right }
+#nav dl > dt { font-weight: bold; }
 #nav a { font-size: 13px; }
-#nav i { font-style: normal; font-size: 12px; padding-left: 7px; color: #aaa }
+#nav dl i { font-style: normal; font-size: 12px; padding-left: 7px; color: #aaa }
 #nav b { font-family: "Verdana"; font-size: 13px; background: #cde; padding: 3px 5px;
   -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
 

www/man.js

@@ -1,5 +1,8 @@
 /* The following functions are part of a minimal JS library I wrote for VNDB.org */
 
+var expanded_icon = '▾';
+var collapsed_icon = '▸';
+
 function byId(n) {
   return document.getElementById(n)
 }
@@ -30,32 +33,121 @@ function tag() {
   }
   return el;
 }
+function setText(obj, txt) {
+  if(obj.textContent != null)
+    obj.textContent = txt;
+  else
+    obj.innerText = txt;
+}
 
 
 
 /* What follows is specific to manned.org */
 
-if(byId('nav')) {
-  var nav = byId('nav');
+// TODO: Fix the 'pkg' link
+// TODO: Allow showing/hiding old package versions individually.
+// TODO: Allow complete hiding of old systems. (And enable that by default)
+
+navShowLocales  = false;
+navHasLocale    = false;
+navHasOldSys    = false;
+navHasHiddenSys = false; // OldSys, actually
+
+function navCreate(nav) {
+  setText(nav, '');
+
+  navHasLocale = navHasHiddenSys = navHasOldSys = false;
+  var dl = tag('dl', null);
+
   for(var i=0; i<VARS.mans.length; i++) {
-    var dt = tag('dt', VARS.mans[i][1]);
+    var sys = VARS.mans[i];
+
+    var isold = i > 0 && VARS.mans[i-1][0] == sys[0];
+    if(typeof sys[4] === 'undefined')
+      sys[4] = !isold;
+    navHasOldSys = navHasOldSys || isold;
+    navHasHiddenSys = navHasHiddenSys || (isold && !sys[4]);
+
+    var pkgnum = 0;
     var dd = tag('dd', null);
-    for(var j=0; j<VARS.mans[i][2].length; j++) {
-      var pkg = VARS.mans[i][2][j];
-      var pdt = tag('dt', pkg[0], tag('i', pkg[1]));
-      var pdd = tag('dd', null);
-      for(var k=0; k<pkg[2].length; k++) {
-        var man = pkg[2][k];
-        var txt = man[0] + (man[1] ? '.'+man[1] : '');
-        if(k > 0)
-          pdd.appendChild(tag(' '));
-        pdd.appendChild(man[2] == VARS.hash ? tag('b', txt) : tag('a', {href:'/'+VARS.name+'/'+man[2]}, txt));
+
+    if(sys[4]) {
+      for(var j=0; j<sys[3].length; j++) {
+        if(j > 0 && sys[3][j-1][0] == sys[3][j][0])
+          continue;
+
+        if(navCreatePkg(dd, sys, sys[3][j]))
+          pkgnum++;
       }
-      dd.appendChild(pdt);
-      dd.appendChild(pdd);
     }
-    nav.appendChild(dt);
-    nav.appendChild(dd);
+
+    dl.appendChild(tag('dt', sys[1], tag('a',
+      {href:'#', _sys: sys, onclick: function() { this._sys[4] = !this._sys[4]; navCreate(nav); return false }},
+      sys[4] ? expanded_icon : collapsed_icon)));
+    if(sys[4] && pkgnum > 0)
+      dl.appendChild(dd);
   }
+
+  navCreateLinks(nav);
+  nav.appendChild(dl);
 }
 
+
+function navCreatePkg(dd, sys, pkg) {
+  var mannum = 0;
+  var pdd = tag('dd', null);
+
+  for(var k=0; k<pkg[2].length; k++) {
+    var man = pkg[2][k];
+    var txt = man[0] + (man[1] ? '.'+man[1] : '');
+    if(man[2] != VARS.hash && man[1])
+      navHasLocale = true;
+    if(man[2] == VARS.hash || (navShowLocales || !man[1])) {
+      if(k > 0)
+        pdd.appendChild(tag(' '));
+      pdd.appendChild(man[2] == VARS.hash ? tag('b', txt) : tag('a', {href:'/'+VARS.name+'/'+man[2]}, txt));
+      mannum++;
+    }
+  }
+
+  if(mannum > 0) {
+    dd.appendChild(tag('dt', tag('a', {href:'/browse/'+sys[2]+'/'+pkg[0]}, pkg[0]), tag('i', pkg[1])));
+    dd.appendChild(pdd);
+    return true;
+  }
+  return false;
+}
+
+
+function navCreateLinks(nav) {
+  nav.appendChild(tag('a', {'class':'global',href:'#',onclick: function() { }}, collapsed_icon + 'pkg'));
+
+  var t = (navHasHiddenSys ? collapsed_icon : expanded_icon) + 'sys';
+  nav.appendChild(!navHasOldSys ? tag('i', {'class':'global'}, t) : tag('a',
+    { 'class':'global',
+      title:  'Expand/collapse "old" systems.',
+      href:   '#',
+      onclick: function() {
+        for(var i=0; i<VARS.mans.length; i++)
+          if(i && VARS.mans[i][0] == VARS.mans[i-1][0])
+            VARS.mans[i][4] = navHasHiddenSys;
+        navCreate(nav);
+        return false
+      }
+    }, t
+  ));
+
+  var t = (navShowLocales ? expanded_icon : collapsed_icon) + 'locales';
+  nav.appendChild(!navHasLocale ? tag('i', {'class':'global'}, t) : tag('a',
+    { 'class': 'global',
+      href:    '#',
+      title:   'Show/hide manuals in a non-standard locale.',
+      onclick: function() { navShowLocales = !navShowLocales; navCreate(nav); return false }
+    }, t
+  ));
+}
+
+
+if(byId('nav'))
+  navCreate(byId('nav'));
+