From 6ec31f029ecd6c629d3be532437897d1ffeb01a8 Mon Sep 17 00:00:00 2001
From: hallgren <hallgren@chalmers.se>
Date: Thu, 1 Jun 2017 18:21:52 +0000
Subject: [PATCH] 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   |   4 ++
 lib/doc/quicklinks.js   | 109 ++++++++++++++++++++++++++++++++++++++++
 lib/doc/revealpopup.css |  27 +++++++++-
 3 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 lib/doc/quicklinks.js

diff --git a/lib/doc/MkSynopsis.hs b/lib/doc/MkSynopsis.hs
index 4628df7ba..13c52c0ac 100644
--- a/lib/doc/MkSynopsis.hs
+++ b/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 ()
diff --git a/lib/doc/quicklinks.js b/lib/doc/quicklinks.js
new file mode 100644
index 000000000..4bb41d437
--- /dev/null
+++ b/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())
diff --git a/lib/doc/revealpopup.css b/lib/doc/revealpopup.css
index a69d7ad05..fe2dd4c1c 100644
--- a/lib/doc/revealpopup.css
+++ b/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; }
+