Add a Quick Links menu to the Libary Synopsis web page.

The menu is generated dynamically by JavaScript functions defined in
quicklinks.js, by traversing the Detailed Table of Contents in the 
generated synopsis.html.

lib/doc/MkSynopsis.hs

@@ -45,6 +45,8 @@ main = do
   append "%!postproc(html): '(SRC=\"categories.png\")'  '\\1 USEMAP=\"#categories\"'"
   append "%!postproc(html): '#LParadigms'  '<a name=\"RParadigms\"></a>'"
   append "%!postproc(tex): '#LParadigms' ''"
+  append "%!postproc(html): '#quicklinks' '<script src=\"quicklinks.js\"></script>'"
+  append "%!postproc(tex): '#quicklinks' ''"
   delimit $ addToolTips cs
   include "synopsis-intro.txt"
   title "Categories"
@@ -95,6 +97,8 @@ main = do
   space
   append "%%toc"
   space
+  append "#quicklinks"
+  space
   let format = if isLatex then "tex" else "html"
   system $ "txt2tags -t" ++ format ++ " " ++ " --toc " ++ synopsis
   if isLatex then (system $ "pdflatex synopsis.tex") >> return () else return ()

lib/doc/quicklinks.js

@@ -0,0 +1,109 @@
+
+// Find an element with a certain tag containing a certain text.
+function findElement(tagname,text) {
+    var els=document.body.getElementsByTagName(tagname)
+    for(var i=0;i<els.length;i++)
+	if(els[i].innerText==text) return els[i]
+    return null
+}
+
+function text(s) { return document.createTextNode(s); }
+
+function appendChildren(n,ds) {
+    if(Array.isArray(ds)) for(var i in ds) n.appendChild(ds[i]);
+    else if(typeof ds=="string")
+        n.appendChild(text(ds))
+    else
+	n.appendChild(ds)
+}
+
+function node(tag,cls,ds) {
+    var n=document.createElement(tag)
+    if(cls) n.className=cls
+    if(ds) appendChildren(n,ds)
+    return n
+}
+
+function a(href,txt) {
+    var a=node("a","",txt)
+    a.href=href
+    return a
+}
+
+function tr(ds) { return node("tr","",ds) }
+function th(d) { return node("th","",d) }
+function td(d) { return node("td","",d) }
+
+function forAllLinks(list,f) {
+    for(var i=0;i<list.length;i++) {
+	var c=list[i].firstElementChild
+	if(c && c.tagName=="A" && c.href) f(c)
+    }
+}
+
+/* -------------------------------------------------------------------------- */
+
+// Extract links to the syntax rules
+function listrules(ul) {
+    var rules=[]
+    if(ul.tagName!="UL") return []
+    forAllLinks(ul.children,function(c) {
+	rules.push({href:c.href,text:c.innerText.split(" -")[0],
+		    full:c.innerText})
+    })
+    return rules
+}
+
+// Extract the links to the paradigm sections for all the languages
+function listlangs(ul) {
+    var langs=[]
+    if(ul.tagName!="UL") return []
+    forAllLinks(ul.children,function(c) {
+	if(/^Paradigms for /.test(c.innerText))
+	    langs.push({href:c.href,text:c.innerText.substr(14),
+			full:c.innerText})
+    })
+    return langs
+}
+
+function linklist(links) {
+    var d=node("td","quicklinks")
+    for(var i=0;i<links.length;i++) {
+	var l=a(links[i].href,links[i].text)
+	l.title=links[i].full
+	d.appendChild(l)
+    }
+    return d
+}
+
+function quicklinks() {
+    // Find the detailed table of contents
+    var h1toc=findElement("h1","Table of Contents")
+    var ultoc=h1toc.nextElementSibling
+    while(ultoc && ultoc.tagName!="UL") ultoc=ultoc.nextElementSibling
+
+    var lis=ultoc.children
+    
+    var syntaxrules=[],langs=[]
+
+    // Find the Syntax Rules and Lexical Paradigms sections in the toc
+    for(var i=0;i<lis.length;i++) {
+	var li=lis[i],c=li.firstElementChild
+	if(c.tagName=="A") {
+	    if(/^Syntax Rules /.test(c.innerText))
+		syntaxrules=listrules(c.nextElementSibling)
+	    else if(c.innerText=="Lexical Paradigms")
+		langs=listlangs(c.nextElementSibling)
+	}
+    }
+
+    var table=node("table","quicklinks",
+	       [tr([th("Syntax"),th("Morphology")]),
+		tr([linklist(syntaxrules),linklist(langs)])])
+
+    return node("div","quicklinks",
+		[text("Quick links"),
+		 node("div","expand",table)])
+}
+
+document.body.appendChild(quicklinks())

lib/doc/revealpopup.css

@@ -14,7 +14,7 @@ div.reveal:hover div.popup {
 }
 .popup dl { margin: 5px; }
 
-tr:hover div.expand {
+tr:hover div.expand, div.quicklinks:hover > div.expand {
   display: block;
 }
 
@@ -24,3 +24,28 @@ table { border-collapse: collapse; }
 td, th { padding: 5px; }
 th { background: #9df; }
 td { background: white }
+
+/* Quick links */
+
+/* To prevent Quick links from overlapping page header: */
+h1 { margin-right: 2.5em; }
+
+div.quicklinks {
+    position: fixed;
+    top:0; right:0;
+    max-height: 97%;
+    overflow: scroll;
+    background-color: rgba(255,255,192,0.9);
+    font-family: sans-serif;
+    box-shadow: 4px 4px 12px rgba(0,0,0,0.33);
+    padding: 5px;
+}
+
+table.quicklinks th, td.quicklinks {
+    border: 1px solid black;
+    vertical-align: top;
+    font-size: 90%;
+    line-height: 130%;
+}
+div.quicklinks a { display: block; }
+