content/static: highlight active outline section in sidebar
Adds JS to update the active sidebar section on page load
and adds event listeners to update the active section on
selection.
Change-Id: Ib5a8948089cf1981d8a3097183bf9f85659e49da
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/259202
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/content/static/css/unit_outline.css b/content/static/css/unit_outline.css
index 5a76b9f..4a6f40c 100644
--- a/content/static/css/unit_outline.css
+++ b/content/static/css/unit_outline.css
@@ -39,6 +39,9 @@
height: 2.5rem;
padding: 1rem;
}
+a.UnitOutline-accordian--active {
+ background-color: var(--gray-9);
+}
.UnitOutline-panel {
padding: 0 18px;
background-color: white;
diff --git a/content/static/html/helpers/_unit_outline.tmpl b/content/static/html/helpers/_unit_outline.tmpl
index 1fd0126..c1fcdba 100644
--- a/content/static/html/helpers/_unit_outline.tmpl
+++ b/content/static/html/helpers/_unit_outline.tmpl
@@ -12,10 +12,10 @@
</div>
<div class="UnitOutline">
{{if .Readme.String}}
- <a class="UnitOutline-accordian" href="?readme#readme-top">README</a>
+ <a class="UnitOutline-accordian js-accordian" href="?readme#readme-top">README</a>
{{end}}
{{if (or .DocOutline.String .Unit.IsPackage)}}
- <a class="UnitOutline-accordian" href="#doc-top">Documentation</a>
+ <a class="UnitOutline-accordian js-accordian" href="#doc-top">Documentation</a>
<div class="UnitOutline-panel">
<div class="Documentation">
{{.DocOutline}}
@@ -26,7 +26,7 @@
<a class="UnitOutline-accordian" href="#files-top">Source Files</a>
{{end}}
{{if (or .Packages .NestedModules)}}
- <a class="UnitOutline-accordian" href="#directories-top">Directories</a>
+ <a class="UnitOutline-accordian js-accordian" href="#directories-top">Directories</a>
{{end}}
</div>
{{end}}
diff --git a/content/static/html/pages/unit.tmpl b/content/static/html/pages/unit.tmpl
index 66b2ab6..dff0b9e 100644
--- a/content/static/html/pages/unit.tmpl
+++ b/content/static/html/pages/unit.tmpl
@@ -20,6 +20,7 @@
{{define "post_content"}}
<div class="js-canonicalURLPath" data-canonical-url-path="{{.CanonicalURLPath}}" hidden />
<script>
+ loadScript('/static/js/unit.js', {type: 'module', async: true, defer: true})
loadScript('/static/js/unit_fixed_header.js', {type: 'module', async: true, defer: true})
</script>
{{block "unit_post_content" .}}{{end}}
diff --git a/content/static/js/unit.js b/content/static/js/unit.js
new file mode 100644
index 0000000..fd25f8b
--- /dev/null
+++ b/content/static/js/unit.js
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2020 The Go Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+// Highlights the active accordian on page load and adds event
+// listeners to update on interaction from user.
+document.querySelectorAll('a.js-accordian').forEach((anchor, index) => {
+ const activeClass = 'UnitOutline-accordian--active';
+ if (index === 0) {
+ anchor.classList.add(activeClass);
+ }
+ anchor.addEventListener('click', () => {
+ document.querySelectorAll('a.js-accordian').forEach(el => {
+ el.classList.remove(activeClass);
+ });
+ anchor.classList.add(activeClass);
+ });
+});
diff --git a/internal/middleware/secureheaders.go b/internal/middleware/secureheaders.go
index 36e6634..6241ff4 100644
--- a/internal/middleware/secureheaders.go
+++ b/internal/middleware/secureheaders.go
@@ -29,7 +29,7 @@
"'sha256-gBtJYPzfgw/0FIACORDIAD08i5rxTQ5J0rhIU656A2U='",
"'sha256-uQODpjQEw2CWPIl6zEmpUU1uULk5RYVCofnBw59UOOw='",
// From content/static/html/pages/unit.tmpl
- "'sha256-RaqfI+f+zdCA5hhJCZgjT75qpniNKKXR7oXUJKsIt14='",
+ "'sha256-w9JIp++N6M7QtDNJRXoowFUN84N5GWsJhUaoIDyMijk='",
// From content/static/html/pages/unit_details.tmpl
"'sha256-CFun5NgnYeEpye8qcbQPq5Ycwavi4IXuZiIzSMNqRUw='",
"'sha256-IHdniK/yZ8URNA2OYbc4R7BssOAe3/dFrSQW7PxEEfM='",
