1
0
forked from GitHub/gf-rgl

Quicklinks in synopsis as fixed side menu

This commit is contained in:
John J. Camilleri
2018-11-10 20:14:25 +01:00
parent ec9753e7b5
commit 3ac2bcc8af
5 changed files with 133 additions and 104 deletions

View File

@@ -28,13 +28,14 @@ synopsis.txt: MkSynopsis.hs MkExxTable.hs $(INCLUDES) $(EXAMPLES_OUT) $(SRC_FILE
runghc -i.. MkSynopsis.hs runghc -i.. MkSynopsis.hs
TMP=tmp.html TMP=tmp.html
synopsis.html: synopsis.txt synopsis.html: synopsis.txt _template.html
txt2tags --target=html --no-headers --quiet --toc --outfile=$@ --infile=$^ txt2tags --target=html --no-headers --quiet --toc --outfile=$@ --infile=$<
pandoc \ pandoc \
--from=html \ --from=html \
--to=html5 \ --to=html5 \
--standalone \ --standalone \
--template=_template.html \ --template=_template.html \
--css=synopsis.css \
--metadata='title:"GF Resource Grammar Library: Synopsis"' \ --metadata='title:"GF Resource Grammar Library: Synopsis"' \
--variable='rel-root:../..' \ --variable='rel-root:../..' \
--output=$(TMP) \ --output=$(TMP) \

View File

@@ -49,8 +49,6 @@ main = do
append "%!postproc(html): '(SRC=\"categories.png\")' '\\1 USEMAP=\"#categories\"'" append "%!postproc(html): '(SRC=\"categories.png\")' '\\1 USEMAP=\"#categories\"'"
append "%!postproc(html): '#LParadigms' '<a name=\"RParadigms\"></a>'" append "%!postproc(html): '#LParadigms' '<a name=\"RParadigms\"></a>'"
append "%!postproc(tex): '#LParadigms' ''" append "%!postproc(tex): '#LParadigms' ''"
append "%!postproc(html): '#quicklinks' '<script src=\"quicklinks.js\"></script>'"
append "%!postproc(tex): '#quicklinks' ''"
delimit $ addToolTips cs delimit $ addToolTips cs
include "synopsis-intro.txt" -- TODO dynamic language list include "synopsis-intro.txt" -- TODO dynamic language list
title "Categories" title "Categories"
@@ -101,8 +99,6 @@ main = do
space space
append "%%toc" append "%%toc"
space space
append "#quicklinks"
space
addToolTips :: Cats -> [String] addToolTips :: Cats -> [String]
addToolTips = map f addToolTips = map f

View File

@@ -2,8 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$> <html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="generator" content="pandoc" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
$for(author-meta)$ $for(author-meta)$
<meta name="author" content="$author-meta$" /> <meta name="author" content="$author-meta$" />
$endfor$ $endfor$
@@ -29,32 +28,41 @@ $for(header-includes)$
$endfor$ $endfor$
</head> </head>
<body> <body>
<div class="container my-5"> <div class="container-fluid my-4">
<div class="row">
<nav class="col-md-3 col-xl-2 d-none d-md-block sidebar" id="quicklinks">
<h5>Quick links</h5>
<!-- filled dynamically via quicklinks.js -->
</nav>
<main role="main" class="col-md-9 col-xl-10 offset-md-3 offset-xl-2">
$if(title)$ $if(title)$
<header id="title-block-header"> <header id="title-block-header">
<a href="$rel-root$" title="Home"> <a href="$rel-root$" title="Home">
<img src="$rel-root$/doc/Logos/gf1.svg" height="200px" class="float-md-right mb-3 bg-white" alt="GF Logo"> <img src="$rel-root$/doc/Logos/gf1.svg" height="200px" class="float-md-right mb-3 bg-white" alt="GF Logo">
</a> </a>
<h1 class="title">$title$</h1> <h1 class="title">$title$</h1>
$if(subtitle)$ $if(subtitle)$
<p class="subtitle">$subtitle$</p> <p class="subtitle">$subtitle$</p>
$endif$ $endif$
$for(author)$ $for(author)$
<p class="author">$author$</p> <p class="author">$author$</p>
$endfor$ $endfor$
$if(date)$ $if(date)$
<p class="date">$date$</p> <p class="date">$date$</p>
$endif$ $endif$
</header> </header>
$endif$ $endif$
$if(toc)$ $if(toc)$
<nav id="$idprefix$TOC"> <nav id="$idprefix$TOC">
$table-of-contents$ $table-of-contents$
</nav> </nav>
$endif$ $endif$
$body$ $body$
</div><!-- .container --> </main>
</div><!-- .row -->
</div><!-- .container-fluid -->
<footer class="bg-light mt-5 py-5"> <footer class="bg-light mt-5 py-5">
<div class="container"> <div class="container">
@@ -103,6 +111,8 @@ $body$
<div> <div>
</footer> </footer>
<script src="quicklinks.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

View File

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

13
doc/synopsis.css Normal file
View File

@@ -0,0 +1,13 @@
#quicklinks {
line-height: 130%;
}
#quicklinks.sidebar {
overflow-y: scroll;
height: 100%;
position: fixed;
}
#quicklinks a {
display: block;
}