Javascript to generate TOCs

4 files changed, 63 insertions, 1 deletions

diff --git a/helper.py b/helper.py
index e0d6aad..ec7950b 100644
--- a/helper.py
+++ b/helper.py
@@ -7,3 +7,7 @@ def appdir (*args):
 
 def url (path):
     return "\"%s\"" % web.url(path)
+
+def toJS (ls):
+    ls = ("'%s':'%s'" % x for x in ls)
+    return "{ %s }" % ", ".join(ls)
diff --git a/static/js/toc.js b/static/js/toc.js
new file mode 100644
index 0000000..5fbba70
--- /dev/null
+++ b/static/js/toc.js
@@ -0,0 +1,31 @@
+function createToc(pages) {
+    var tdiv = document.getElementById("toc");
+    if (tdiv)
+    {
+        var a = tdiv.appendChild(document.createElement('span'));
+	    // a.onclick = showhideToc;
+	    a.id = 'contentheader';
+	    a.innerHTML = 'Contents';
+
+        var ldiv = tdiv.appendChild(document.createElement('ul'));
+        ldiv.id = 'innertoc';
+
+        for (key in pages) {
+            var link = ldiv.appendChild(document.createElement('li')).appendChild(document.createElement('a'));
+            link.innerHTML = pages[key];
+            link.className = 'tocLink';
+            link.href = '#' + key;
+        }
+
+        // showhideToc();
+    }
+}
+
+var TocState = 'none';
+
+function showhideToc() {
+	TocState = (TocState == 'none') ? 'block' : 'none';
+	var newText = (TocState == 'none') ? 'show page contents' : 'hide page contents';
+	document.getElementById('contentheader').innerHTML = newText;
+	document.getElementById('innertoc').style.display = TocState;
+}
diff --git a/templates/page.mako b/templates/page.mako
index 264ddee..49671ff 100644
--- a/templates/page.mako
+++ b/templates/page.mako
@@ -1,5 +1,6 @@
 <%!
     title = ""
+    uses_menu = False
 %>
 
 <%inherit file="/root.mako" />
@@ -7,6 +8,29 @@
 <h1 class="title">${self.attr.title}</h1>
 ${next.body()}
 
+% if self.attr.uses_menu:
+    <script type="text/javascript">
+        createToc(${h.toJS(self.attr.mlist)})
+    </script>
+% endif
+
+
+<%def name="style()">
+    ${parent.style()}
+    <script src=${"/static/js/toc.js" | url} type="text/javascript"></script>
+</%def>
+
 <%def name="h2()">
-    <h2><span class="hstart">» </span>${caller.body()}</h2>
+    <% 
+        if self.attr.uses_menu:
+            c = capture(caller.body)
+            name = c.replace(" ", "_").lower()
+            mlist = getattr(self.attr, "mlist", [])
+            mlist.append((str(name), str(c)))
+
+            self.attr.mlist = mlist
+        else:
+            name = "#"
+    %>
+    <h2><a name="${name}"><span class="hstart">» </span></a>${caller.body()}</h2>
 </%def>
diff --git a/templates/pages/translating.mako b/templates/pages/translating.mako
index 6e76b33..2135480 100644
--- a/templates/pages/translating.mako
+++ b/templates/pages/translating.mako
@@ -1,5 +1,6 @@
 <%!
     title = "Translation Guide"
+    uses_menu = True
 %>
 <%inherit file="/page.mako" />
 
@@ -7,6 +8,8 @@
     Portato supports native languages. Nevertheless the translations into these languages have to be created. This page shows how to add a new translation or how to extend an existing translation.
 </p>
 
+<div id="toc"></div>
+
 <%self:h2>Short introduction about NLS in Linux</%self:h2>
 <p>
     All translatable strings of a program are listed in a *.pot file. For each translation a single $LANG.po file is created, which holds each translatable string and the corresponding translation. During installation these po-files are compiled into .mo files, which are then used to get the translations during runtime.