From 644c7145364c670f60c8ddb6affd5e74f677ee0d Mon Sep 17 00:00:00 2001
From: David Dollar <david@dollar.io>
Date: Tue, 28 Jan 2020 13:42:42 -0500
Subject: [PATCH] handle toc ajax

---
 cmd/docs/main.go               | 10 +++++++
 cmd/docs/public/assets/docs.js | 20 +++++++++-----
 cmd/docs/templates/layout.tmpl | 48 ++++++++++++++++++----------------
 cmd/docs/templates/toc.tmpl    |  3 +++
 4 files changed, 53 insertions(+), 28 deletions(-)
 create mode 100644 cmd/docs/templates/toc.tmpl

diff --git a/cmd/docs/main.go b/cmd/docs/main.go
index aa97116..2fe98c2 100644
--- a/cmd/docs/main.go
+++ b/cmd/docs/main.go
@@ -58,6 +58,7 @@ func run() error {
 	s.Router.Static("/assets", packr.NewBox("./public/assets"))
 
 	s.Route("GET", "/", index)
+	s.Route("GET", "/toc/{slug:.*}", toc)
 	s.Route("GET", "/{slug:.*}", doc)
 
 	stdapi.LoadTemplates(packr.NewBox("./templates"), helpers)
@@ -175,3 +176,12 @@ func doc(c *stdapi.Context) error {
 
 	return c.RenderTemplate("page", params)
 }
+
+func toc(c *stdapi.Context) error {
+	params := map[string]interface{}{
+		"Documents": documents,
+		"Slug":      c.Var("slug"),
+	}
+
+	return c.RenderTemplate("toc", params)
+}
diff --git a/cmd/docs/public/assets/docs.js b/cmd/docs/public/assets/docs.js
index c92de8c..071a13d 100644
--- a/cmd/docs/public/assets/docs.js
+++ b/cmd/docs/public/assets/docs.js
@@ -1,6 +1,7 @@
 $(window).ready(function () {
   $("a").each(hijackLocalLink);
 
+  scrollActiveToc();
   addHeadingAnchors();
 });
 
@@ -30,13 +31,13 @@ function hijackLocalLink(i, a) {
 
 function loadDocument(href) {
   $('nav#toc a').blur().removeClass('active');
+  var url = new URL(href);
+  console.log('url', url);
+  $.get('/toc' + url.pathname, function (data) {
+    $('nav#toc').html(data);
+    scrollActiveToc();
+  });
   $.get(href + '?partial', function (data) {
-    $('nav#toc a').each(function (i, a) {
-      if (a.href == href) {
-        $(a).addClass('active');
-        $(a).get(0).scrollIntoView({ behavior: 'smooth', block: 'center' });
-      }
-    })
     $('main').html(data);
     $('main').scrollTop(0);
     $('main a').each(hijackLocalLink);
@@ -65,3 +66,10 @@ function queryClose() {
 function queryShow() {
   $('#search-hits').show(200);
 }
+
+function scrollActiveToc() {
+  var active = $('nav#toc a.active').get(0);
+  if (active) {
+    active.scrollIntoView({ block: 'center' });
+  }
+}
diff --git a/cmd/docs/templates/layout.tmpl b/cmd/docs/templates/layout.tmpl
index fb66d7c..6e97e3f 100644
--- a/cmd/docs/templates/layout.tmpl
+++ b/cmd/docs/templates/layout.tmpl
@@ -80,27 +80,7 @@
 
 				<div class="d-flex flex-row justify-content-center" style="height:100%">
 					<nav id="toc" class="sidebar d-none d-lg-block">
-						<ul class="nav nav-pills flex-column">
-							<div id="search">
-								<input type="text" class="form-control" placeholder="Search" id="search-query" oninput="queryChange();" onblur="queryClose();">
-								<div id="search-hits" style="display: none;">
-								</div>
-							</div>
-							{{ range $c := .Documents.Categories }}
-								<div class="category">{{.Name}}</div>
-								<ul class="documents">
-									{{ template "toc" (params "Active" $.Slug "Documents" $.Documents "Slug" $c.Slug "Index" 0)}}
-								</ul>
-							{{ end }}
-							{{ range $c := .Categories }}
-								<div class="category">{{.Name}}</div>
-								<ul class="documents">
-									{{ range .Documents }}
-										<li><a {{ if and (eq $.Slug .Slug) (eq $.Category $c.Slug) }}class="active"{{ end }} href="/{{$c.Slug}}/{{.Slug}}">{{.Title}}</a></li>
-									{{ end }}
-								</ul>
-							{{ end }}
-						</ul>
+						{{ template "toc" . }}
 					</nav>
 
 					<main role="main" class="flex-column col">
@@ -190,10 +170,34 @@
 {{ end }}
 
 {{ define "toc" }}
+	<ul class="nav nav-pills flex-column">
+		<div id="search">
+			<input type="text" class="form-control" placeholder="Search" id="search-query" oninput="queryChange();" onblur="queryClose();">
+			<div id="search-hits" style="display: none;">
+			</div>
+		</div>
+		{{ range $c := .Documents.Categories }}
+			<div class="category">{{.Name}}</div>
+			<ul class="documents">
+				{{ template "toc-children" (params "Active" $.Slug "Documents" $.Documents "Slug" $c.Slug "Index" 0)}}
+			</ul>
+		{{ end }}
+		{{ range $c := .Categories }}
+			<div class="category">{{.Name}}</div>
+			<ul class="documents">
+				{{ range .Documents }}
+					<li><a {{ if and (eq $.Slug .Slug) (eq $.Category $c.Slug) }}class="active"{{ end }} href="/{{$c.Slug}}/{{.Slug}}">{{.Title}}</a></li>
+				{{ end }}
+			</ul>
+		{{ end }}
+	</ul>
+{{ end }}
+
+{{ define "toc-children" }}
 	{{ range .Documents.Children .Slug }}
 		<li><a id="{{ slugid .Slug }}" style="padding-left:{{ indent $.Index }}px" class="dropdown-item {{ if eq .Slug $.Active }}active{{ end }}" href="/{{.Slug}}">{{.Title}}</a></li>
 		{{ if expand .Slug $.Active }}
-			{{ template "toc" (params "Active" $.Active "Documents" $.Documents "Index" (inc $.Index) "Slug" .Slug) }}
+			{{ template "toc-children" (params "Active" $.Active "Documents" $.Documents "Index" (inc $.Index) "Slug" .Slug) }}
 		{{ end }}
 	{{ end }}
 {{ end }}
\ No newline at end of file
diff --git a/cmd/docs/templates/toc.tmpl b/cmd/docs/templates/toc.tmpl
new file mode 100644
index 0000000..549a608
--- /dev/null
+++ b/cmd/docs/templates/toc.tmpl
@@ -0,0 +1,3 @@
+{{ define "main" }}
+  {{ template "toc" . }}
+{{ end }}