commit c47c5bd4a883f3b84b1b4b9c5bc3f0f6ebf92e2a
author Jamal Carvalho <jamal@golang.org> Mon Oct 05 17:11:29 2020 -0400
committer Jamal Carvalho <jamal@golang.org> Tue Oct 06 00:19:27 2020 +0000
tree 3dcd42c3e3a12db1b3cb854fe3608c8da5f3b325
parent e53c44586db03add9ced55c5f8fa29e8947ea46b

content/static: readme collapse and expand without query param

Adds event listeners to collapse and expand readme
without a page reload.

Change-Id: I3eac89c55e77cf41ba5296c1dc5e02b8960dcd2e
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/259627
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>

content/static/html/helpers/_unit_outline.tmpl

diff --git a/content/static/html/helpers/_unit_outline.tmpl b/content/static/html/helpers/_unit_outline.tmpl
index f5b798b..1079981 100644
--- a/content/static/html/helpers/_unit_outline.tmpl
+++ b/content/static/html/helpers/_unit_outline.tmpl
@@ -12,7 +12,7 @@
       </button>
     </div>
     {{if .Readme.String}}
-      <a class="UnitOutline-accordian js-accordian" href="?readme#readme-top">README</a>
+      <a class="UnitOutline-accordian js-accordian js-readmeExpand" href="?readme=expanded#readme-top">README</a>
     {{end}}
     {{if (or .DocOutline.String .Unit.IsPackage)}}
       <a class="UnitOutline-accordian js-accordian" href="#doc-top">Documentation</a>

content/static/html/helpers/_unit_readme.tmpl

diff --git a/content/static/html/helpers/_unit_readme.tmpl b/content/static/html/helpers/_unit_readme.tmpl
index 6f0d183..84acd97 100644
--- a/content/static/html/helpers/_unit_readme.tmpl
+++ b/content/static/html/helpers/_unit_readme.tmpl
@@ -5,7 +5,7 @@
 -->
 
 {{define "unit_readme"}}
-  <div class="UnitReadme {{if .ExpandReadme}}UnitReadme--expanded{{end}}" id="readme-top">
+  <div class="UnitReadme {{if .ExpandReadme}}UnitReadme--expanded{{end}} js-readme" id="readme-top">
     <h2 class="UnitReadme-title">
       <img height="25px" width="20px" src="/static/img/pkg-icon-readme_20x16.svg">README
     </h2>
@@ -14,8 +14,8 @@
         <div class="Overview-readmeContent">{{.Readme}}</div>
         <div class="UnitReadme-fadeOut"></div>
       </div>
-      <a class="UnitReadme-expandLink" href="?readme#readme-top">Expand ▾</a>
-      <a class="UnitReadme-collapseLink" href="?#readme-top">Collapse ▴</a>
+      <a class="UnitReadme-expandLink js-readmeExpand" href="?readme=expanded#readme-top">Expand ▾</a>
+      <a class="UnitReadme-collapseLink js-readmeCollapse" href="?#readme-top">Collapse ▴</a>
     {{end}}
   </div>
 {{end}}

content/static/js/unit.js

diff --git a/content/static/js/unit.js b/content/static/js/unit.js
index fd25f8b..c34d8ae 100644
--- a/content/static/js/unit.js
+++ b/content/static/js/unit.js
@@ -19,3 +19,24 @@
     anchor.classList.add(activeClass);
   });
 });
+
+/**
+ * Event handlers for expanding and collapsing the readme section.
+ */
+const readme = document.querySelector('.js-readme');
+const readmeExpand = document.querySelectorAll('.js-readmeExpand');
+const readmeCollapse = document.querySelector('.js-readmeCollapse');
+if (readmeExpand && readmeExpand && readmeCollapse) {
+  readmeExpand.forEach(el =>
+    el.addEventListener('click', e => {
+      e.preventDefault();
+      readme.classList.add('UnitReadme--expanded');
+      readme.scrollIntoView();
+    })
+  );
+  readmeCollapse.addEventListener('click', e => {
+    e.preventDefault();
+    readme.classList.remove('UnitReadme--expanded');
+    readme.scrollIntoView();
+  });
+}