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,8 +28,15 @@ $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">
@@ -54,7 +60,9 @@ $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,20 +1,20 @@
// 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) { function appendChildren (n, ds) {
if(Array.isArray(ds)) for(var i in ds) n.appendChild(ds[i]); if (Array.isArray(ds)) for (var i in ds) n.appendChild(ds[i])
else if(typeof ds=="string") else if (typeof ds === 'string') n.appendChild(text(ds))
n.appendChild(text(ds)) else n.appendChild(ds)
else
n.appendChild(ds)
} }
function node (tag, cls, ds) { function node (tag, cls, ds) {
@@ -25,19 +25,15 @@ function node(tag,cls,ds) {
} }
function a (href, txt) { function a (href, txt) {
var a=node("a","",txt) var a = node('a', '', txt)
a.href = href a.href = href
return a 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) { 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)
} }
} }
@@ -46,10 +42,13 @@ function forAllLinks(list,f) {
// 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
} }
@@ -57,53 +56,63 @@ function listrules(ul) {
// 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),
full: c.innerText
})
}
}) })
return langs return langs
} }
function linklist (links) { function linklist (links) {
var d=node("td","quicklinks") var d = node('div')
for (var i = 0; i < links.length; i++) { for (var i = 0; i < links.length; i++) {
var l = a(links[i].href, links[i].text) var l = a(links[i].href, links[i].text)
l.title = links[i].full l.title = links[i].full
d.appendChild(l) d.appendChild(l)
d.appendChild(text(' '))
} }
return d return d
} }
function quicklinks () { function quicklinks () {
// Find the detailed table of contents // Find the detailed table of contents
var h1toc=findElement("h1","Table of Contents") var h1toc = findElement('h1', 'Table of Contents')
var ultoc = h1toc.nextElementSibling var ultoc = h1toc.nextElementSibling
while(ultoc && ultoc.tagName!="UL") ultoc=ultoc.nextElementSibling while (ultoc && ultoc.tagName !== 'UL') {
ultoc = ultoc.nextElementSibling
}
var lis = ultoc.children var lis = ultoc.children
var syntaxrules=[],langs=[] var syntaxrules = []
var langs = []
// Find the Syntax Rules and Lexical Paradigms sections in the toc // Find the Syntax Rules and Lexical Paradigms sections in the toc
for (var i = 0; i < lis.length; i++) { for (var i = 0; i < lis.length; i++) {
var li=lis[i],c=li.firstElementChild var li = lis[i]
if(c.tagName=="A") { var c = li.firstElementChild
if(/^Syntax Rules /.test(c.innerText)) if (c.tagName === 'A') {
if (/^Syntax Rules /.test(c.innerText)) {
syntaxrules = listrules(c.nextElementSibling) syntaxrules = listrules(c.nextElementSibling)
else if(c.innerText=="Lexical Paradigms") } else if (c.innerText === 'Lexical Paradigms') {
langs = listlangs(c.nextElementSibling) 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()) return node(
'div',
'row',
[ node('div', 'col-5', [ node('h6', '', 'Syntax'), linklist(syntaxrules) ]),
node('div', 'col-7', [ node('h6', '', 'Morphology'), linklist(langs) ])
]
)
}
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;
}