content/static: scroll to top on header double click
Adds a feature to scroll the page to the top when any
whitespace on the header is double clicked. Useful as
an alternative to the home key for quickly going back
to the top of the page.
Change-Id: Ibd59e4aeb18850f672dd1628b18b2071c8c3cbf2
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/304270
Trust: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Jonathan Amsterdam <jba@google.com>
diff --git a/content/static/js/unit.js b/content/static/js/unit.js
index 382a8a5..72af9b3 100644
--- a/content/static/js/unit.js
+++ b/content/static/js/unit.js
@@ -3,5 +3,5 @@
* Copyright 2021 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.
- */import{CopyToClipboardController as i}from"./clipboard.js";import"./toggle-tip.js";import{ExpandableRowsTableController as u}from"./table.js";document.querySelectorAll(".js-expandableTable").forEach(e=>new u(e,document.querySelector(".js-expandAllDirectories"))),document.querySelectorAll(".js-copyToClipboard").forEach(e=>{new i(e)});const t=document.querySelector(".js-readme"),d=document.querySelector(".js-readmeContent"),o=document.querySelector(".js-readmeOutline"),n=document.querySelectorAll(".js-readmeExpand"),a=document.querySelector(".js-readmeCollapse");t&&d&&o&&n.length&&a&&(window.location.hash.includes("readme")&&t.classList.add("UnitReadme--expanded"),n.forEach(e=>e.addEventListener("click",r=>{r.preventDefault(),t.classList.add("UnitReadme--expanded"),t.scrollIntoView()})),a.addEventListener("click",e=>{e.preventDefault(),t.classList.remove("UnitReadme--expanded"),n[1]&&n[1].scrollIntoView({block:"center"})}),d.addEventListener("keyup",()=>{t.classList.add("UnitReadme--expanded")}),d.addEventListener("click",()=>{t.classList.add("UnitReadme--expanded")}),o.addEventListener("click",()=>{t.classList.add("UnitReadme--expanded")}),document.addEventListener("keydown",e=>{(e.ctrlKey||e.metaKey)&&e.key==="f"&&t.classList.add("UnitReadme--expanded")}));const s=document.querySelector(".js-readmeOption");s&&!t&&s.setAttribute("disabled","true");const m=document.querySelector(".js-unitDirectories"),l=document.querySelector(".js-directoriesOption");!m&&l&&l.setAttribute("disabled","true"),document.querySelectorAll(".js-buildContextSelect").forEach(e=>{e.addEventListener("change",r=>{window.location.search=`?GOOS=${r.target.value}`})});const p=new IntersectionObserver(([e])=>{e.intersectionRatio<1?(document.querySelector(".js-unitHeader")?.classList.add("UnitHeader--sticky"),document.querySelector(".js-unitHeader")?.classList.remove("UnitHeader--full")):(document.querySelector(".js-unitHeader")?.classList.remove("UnitHeader--sticky"),document.querySelector(".js-unitHeader")?.classList.add("UnitHeader--full"))},{threshold:1,rootMargin:"-20px"}),c=document.querySelector(".js-headerSentinel");c&&p.observe(c);
+ */import{CopyToClipboardController as m}from"./clipboard.js";import"./toggle-tip.js";import{ExpandableRowsTableController as u}from"./table.js";document.querySelectorAll(".js-expandableTable").forEach(e=>new u(e,document.querySelector(".js-expandAllDirectories"))),document.querySelectorAll(".js-copyToClipboard").forEach(e=>{new m(e)});const t=document.querySelector(".js-readme"),o=document.querySelector(".js-readmeContent"),s=document.querySelector(".js-readmeOutline"),d=document.querySelectorAll(".js-readmeExpand"),a=document.querySelector(".js-readmeCollapse");t&&o&&s&&d.length&&a&&(window.location.hash.includes("readme")&&t.classList.add("UnitReadme--expanded"),d.forEach(e=>e.addEventListener("click",r=>{r.preventDefault(),t.classList.add("UnitReadme--expanded"),t.scrollIntoView()})),a.addEventListener("click",e=>{e.preventDefault(),t.classList.remove("UnitReadme--expanded"),d[1]&&d[1].scrollIntoView({block:"center"})}),o.addEventListener("keyup",()=>{t.classList.add("UnitReadme--expanded")}),o.addEventListener("click",()=>{t.classList.add("UnitReadme--expanded")}),s.addEventListener("click",()=>{t.classList.add("UnitReadme--expanded")}),document.addEventListener("keydown",e=>{(e.ctrlKey||e.metaKey)&&e.key==="f"&&t.classList.add("UnitReadme--expanded")}));const i=document.querySelector(".js-readmeOption");i&&!t&&i.setAttribute("disabled","true");const p=document.querySelector(".js-unitDirectories"),l=document.querySelector(".js-directoriesOption");!p&&l&&l.setAttribute("disabled","true"),document.querySelectorAll(".js-buildContextSelect").forEach(e=>{e.addEventListener("change",r=>{window.location.search=`?GOOS=${r.target.value}`})});const n=document.querySelector(".js-unitHeader");n?.addEventListener("dblclick",e=>{e.target===n.firstElementChild&&n.classList.contains("UnitHeader--sticky")&&(window.getSelection()?.removeAllRanges(),window.scrollTo({top:0}))});const L=new IntersectionObserver(([e])=>{e.intersectionRatio<1?(n?.classList.add("UnitHeader--sticky"),n?.classList.remove("UnitHeader--full")):(n?.classList.remove("UnitHeader--sticky"),n?.classList.add("UnitHeader--full"))},{threshold:1,rootMargin:"-20px"}),c=document.querySelector(".js-headerSentinel");c&&L.observe(c);
//# sourceMappingURL=unit.js.map
diff --git a/content/static/js/unit.js.map b/content/static/js/unit.js.map
index bf1eada..a6d7217 100644
--- a/content/static/js/unit.js.map
+++ b/content/static/js/unit.js.map
@@ -1,7 +1,7 @@
{
"version": 3,
"sources": ["unit.ts"],
- "sourcesContent": ["/*!\n * @license\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\nimport { CopyToClipboardController } from './clipboard.js';\nimport './toggle-tip.js';\nimport { ExpandableRowsTableController } from './table.js';\n\ndocument\n .querySelectorAll<HTMLTableElement>('.js-expandableTable')\n .forEach(\n el =>\n new ExpandableRowsTableController(\n el,\n document.querySelector<HTMLButtonElement>('.js-expandAllDirectories')\n )\n );\n\n/**\n * Instantiates CopyToClipboardController controller copy buttons\n * on the unit page.\n */\ndocument.querySelectorAll<HTMLButtonElement>('.js-copyToClipboard').forEach(el => {\n new CopyToClipboardController(el);\n});\n\n/**\n * Event handlers for expanding and collapsing the readme section.\n */\nconst readme = document.querySelector('.js-readme');\nconst readmeContent = document.querySelector('.js-readmeContent');\nconst readmeOutline = document.querySelector('.js-readmeOutline');\nconst readmeExpand = document.querySelectorAll('.js-readmeExpand');\nconst readmeCollapse = document.querySelector('.js-readmeCollapse');\nif (readme && readmeContent && readmeOutline && readmeExpand.length && readmeCollapse) {\n if (window.location.hash.includes('readme')) {\n readme.classList.add('UnitReadme--expanded');\n }\n readmeExpand.forEach(el =>\n el.addEventListener('click', e => {\n e.preventDefault();\n readme.classList.add('UnitReadme--expanded');\n readme.scrollIntoView();\n })\n );\n readmeCollapse.addEventListener('click', e => {\n e.preventDefault();\n readme.classList.remove('UnitReadme--expanded');\n if (readmeExpand[1]) {\n readmeExpand[1].scrollIntoView({ block: 'center' });\n }\n });\n readmeContent.addEventListener('keyup', () => {\n readme.classList.add('UnitReadme--expanded');\n });\n readmeContent.addEventListener('click', () => {\n readme.classList.add('UnitReadme--expanded');\n });\n readmeOutline.addEventListener('click', () => {\n readme.classList.add('UnitReadme--expanded');\n });\n document.addEventListener('keydown', e => {\n if ((e.ctrlKey || e.metaKey) && e.key === 'f') {\n readme.classList.add('UnitReadme--expanded');\n }\n });\n}\n\n/**\n * Disable unavailable sections in navigation dropdown on mobile.\n */\nconst readmeOption = document.querySelector('.js-readmeOption');\nif (readmeOption && !readme) {\n readmeOption.setAttribute('disabled', 'true');\n}\nconst unitDirectories = document.querySelector('.js-unitDirectories');\nconst directoriesOption = document.querySelector('.js-directoriesOption');\nif (!unitDirectories && directoriesOption) {\n directoriesOption.setAttribute('disabled', 'true');\n}\ndocument.querySelectorAll('.js-buildContextSelect').forEach(el => {\n el.addEventListener('change', e => {\n window.location.search = `?GOOS=${(e.target as HTMLSelectElement).value}`;\n });\n});\n\nconst observer = new IntersectionObserver(\n ([e]) => {\n if (e.intersectionRatio < 1) {\n document.querySelector('.js-unitHeader')?.classList.add('UnitHeader--sticky');\n document.querySelector('.js-unitHeader')?.classList.remove('UnitHeader--full');\n } else {\n document.querySelector('.js-unitHeader')?.classList.remove('UnitHeader--sticky');\n document.querySelector('.js-unitHeader')?.classList.add('UnitHeader--full');\n }\n },\n { threshold: 1.0, rootMargin: '-20px' }\n);\n\nconst headerSentinel = document.querySelector('.js-headerSentinel');\nif (headerSentinel) {\n observer.observe(headerSentinel);\n}\n"],
- "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOA,2DACA,wBACA,2DAEA,SACG,iBAAmC,uBACnC,QACC,GACE,GAAI,GACF,EACA,SAAS,cAAiC,8BAQlD,SAAS,iBAAoC,uBAAuB,QAAQ,GAAM,CAChF,GAAI,GAA0B,KAMhC,KAAM,GAAS,SAAS,cAAc,cAChC,EAAgB,SAAS,cAAc,qBACvC,EAAgB,SAAS,cAAc,qBACvC,EAAe,SAAS,iBAAiB,oBACzC,EAAiB,SAAS,cAAc,sBAC9C,AAAI,GAAU,GAAiB,GAAiB,EAAa,QAAU,GACjE,QAAO,SAAS,KAAK,SAAS,WAChC,EAAO,UAAU,IAAI,wBAEvB,EAAa,QAAQ,GACnB,EAAG,iBAAiB,QAAS,GAAK,CAChC,EAAE,iBACF,EAAO,UAAU,IAAI,wBACrB,EAAO,oBAGX,EAAe,iBAAiB,QAAS,GAAK,CAC5C,EAAE,iBACF,EAAO,UAAU,OAAO,wBACpB,EAAa,IACf,EAAa,GAAG,eAAe,CAAE,MAAO,aAG5C,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,SAAS,iBAAiB,UAAW,GAAK,CACxC,AAAK,GAAE,SAAW,EAAE,UAAY,EAAE,MAAQ,KACxC,EAAO,UAAU,IAAI,2BAQ3B,KAAM,GAAe,SAAS,cAAc,oBAC5C,AAAI,GAAgB,CAAC,GACnB,EAAa,aAAa,WAAY,QAExC,KAAM,GAAkB,SAAS,cAAc,uBACzC,EAAoB,SAAS,cAAc,yBACjD,AAAI,CAAC,GAAmB,GACtB,EAAkB,aAAa,WAAY,QAE7C,SAAS,iBAAiB,0BAA0B,QAAQ,GAAM,CAChE,EAAG,iBAAiB,SAAU,GAAK,CACjC,OAAO,SAAS,OAAS,SAAU,EAAE,OAA6B,YAItE,KAAM,GAAW,GAAI,sBACnB,CAAC,CAAC,KAAO,CACP,AAAI,EAAE,kBAAoB,EACxB,UAAS,cAAc,mBAAmB,UAAU,IAAI,sBACxD,SAAS,cAAc,mBAAmB,UAAU,OAAO,qBAE3D,UAAS,cAAc,mBAAmB,UAAU,OAAO,sBAC3D,SAAS,cAAc,mBAAmB,UAAU,IAAI,sBAG5D,CAAE,UAAW,EAAK,WAAY,UAG1B,EAAiB,SAAS,cAAc,sBAC9C,AAAI,GACF,EAAS,QAAQ",
+ "sourcesContent": ["/*!\n * @license\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\nimport { CopyToClipboardController } from './clipboard.js';\nimport './toggle-tip.js';\nimport { ExpandableRowsTableController } from './table.js';\n\ndocument\n .querySelectorAll<HTMLTableElement>('.js-expandableTable')\n .forEach(\n el =>\n new ExpandableRowsTableController(\n el,\n document.querySelector<HTMLButtonElement>('.js-expandAllDirectories')\n )\n );\n\n/**\n * Instantiates CopyToClipboardController controller copy buttons\n * on the unit page.\n */\ndocument.querySelectorAll<HTMLButtonElement>('.js-copyToClipboard').forEach(el => {\n new CopyToClipboardController(el);\n});\n\n/**\n * Event handlers for expanding and collapsing the readme section.\n */\nconst readme = document.querySelector('.js-readme');\nconst readmeContent = document.querySelector('.js-readmeContent');\nconst readmeOutline = document.querySelector('.js-readmeOutline');\nconst readmeExpand = document.querySelectorAll('.js-readmeExpand');\nconst readmeCollapse = document.querySelector('.js-readmeCollapse');\nif (readme && readmeContent && readmeOutline && readmeExpand.length && readmeCollapse) {\n if (window.location.hash.includes('readme')) {\n readme.classList.add('UnitReadme--expanded');\n }\n readmeExpand.forEach(el =>\n el.addEventListener('click', e => {\n e.preventDefault();\n readme.classList.add('UnitReadme--expanded');\n readme.scrollIntoView();\n })\n );\n readmeCollapse.addEventListener('click', e => {\n e.preventDefault();\n readme.classList.remove('UnitReadme--expanded');\n if (readmeExpand[1]) {\n readmeExpand[1].scrollIntoView({ block: 'center' });\n }\n });\n readmeContent.addEventListener('keyup', () => {\n readme.classList.add('UnitReadme--expanded');\n });\n readmeContent.addEventListener('click', () => {\n readme.classList.add('UnitReadme--expanded');\n });\n readmeOutline.addEventListener('click', () => {\n readme.classList.add('UnitReadme--expanded');\n });\n document.addEventListener('keydown', e => {\n if ((e.ctrlKey || e.metaKey) && e.key === 'f') {\n readme.classList.add('UnitReadme--expanded');\n }\n });\n}\n\n/**\n * Disable unavailable sections in navigation dropdown on mobile.\n */\nconst readmeOption = document.querySelector('.js-readmeOption');\nif (readmeOption && !readme) {\n readmeOption.setAttribute('disabled', 'true');\n}\nconst unitDirectories = document.querySelector('.js-unitDirectories');\nconst directoriesOption = document.querySelector('.js-directoriesOption');\nif (!unitDirectories && directoriesOption) {\n directoriesOption.setAttribute('disabled', 'true');\n}\ndocument.querySelectorAll('.js-buildContextSelect').forEach(el => {\n el.addEventListener('change', e => {\n window.location.search = `?GOOS=${(e.target as HTMLSelectElement).value}`;\n });\n});\n\nconst unitHeader = document.querySelector('.js-unitHeader');\nunitHeader?.addEventListener('dblclick', e => {\n const target = e.target as HTMLElement;\n if (\n target === unitHeader.firstElementChild &&\n unitHeader.classList.contains('UnitHeader--sticky')\n ) {\n window.getSelection()?.removeAllRanges();\n window.scrollTo({ top: 0 });\n }\n});\nconst observer = new IntersectionObserver(\n ([e]) => {\n if (e.intersectionRatio < 1) {\n unitHeader?.classList.add('UnitHeader--sticky');\n unitHeader?.classList.remove('UnitHeader--full');\n } else {\n unitHeader?.classList.remove('UnitHeader--sticky');\n unitHeader?.classList.add('UnitHeader--full');\n }\n },\n { threshold: 1.0, rootMargin: '-20px' }\n);\n\nconst headerSentinel = document.querySelector('.js-headerSentinel');\nif (headerSentinel) {\n observer.observe(headerSentinel);\n}\n"],
+ "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOA,2DACA,wBACA,2DAEA,SACG,iBAAmC,uBACnC,QACC,GACE,GAAI,GACF,EACA,SAAS,cAAiC,8BAQlD,SAAS,iBAAoC,uBAAuB,QAAQ,GAAM,CAChF,GAAI,GAA0B,KAMhC,KAAM,GAAS,SAAS,cAAc,cAChC,EAAgB,SAAS,cAAc,qBACvC,EAAgB,SAAS,cAAc,qBACvC,EAAe,SAAS,iBAAiB,oBACzC,EAAiB,SAAS,cAAc,sBAC9C,AAAI,GAAU,GAAiB,GAAiB,EAAa,QAAU,GACjE,QAAO,SAAS,KAAK,SAAS,WAChC,EAAO,UAAU,IAAI,wBAEvB,EAAa,QAAQ,GACnB,EAAG,iBAAiB,QAAS,GAAK,CAChC,EAAE,iBACF,EAAO,UAAU,IAAI,wBACrB,EAAO,oBAGX,EAAe,iBAAiB,QAAS,GAAK,CAC5C,EAAE,iBACF,EAAO,UAAU,OAAO,wBACpB,EAAa,IACf,EAAa,GAAG,eAAe,CAAE,MAAO,aAG5C,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,SAAS,iBAAiB,UAAW,GAAK,CACxC,AAAK,GAAE,SAAW,EAAE,UAAY,EAAE,MAAQ,KACxC,EAAO,UAAU,IAAI,2BAQ3B,KAAM,GAAe,SAAS,cAAc,oBAC5C,AAAI,GAAgB,CAAC,GACnB,EAAa,aAAa,WAAY,QAExC,KAAM,GAAkB,SAAS,cAAc,uBACzC,EAAoB,SAAS,cAAc,yBACjD,AAAI,CAAC,GAAmB,GACtB,EAAkB,aAAa,WAAY,QAE7C,SAAS,iBAAiB,0BAA0B,QAAQ,GAAM,CAChE,EAAG,iBAAiB,SAAU,GAAK,CACjC,OAAO,SAAS,OAAS,SAAU,EAAE,OAA6B,YAItE,KAAM,GAAa,SAAS,cAAc,kBAC1C,GAAY,iBAAiB,WAAY,GAAK,CAE5C,AACE,AAFa,EAAE,SAEJ,EAAW,mBACtB,EAAW,UAAU,SAAS,uBAE9B,QAAO,gBAAgB,kBACvB,OAAO,SAAS,CAAE,IAAK,OAG3B,KAAM,GAAW,GAAI,sBACnB,CAAC,CAAC,KAAO,CACP,AAAI,EAAE,kBAAoB,EACxB,IAAY,UAAU,IAAI,sBAC1B,GAAY,UAAU,OAAO,qBAE7B,IAAY,UAAU,OAAO,sBAC7B,GAAY,UAAU,IAAI,sBAG9B,CAAE,UAAW,EAAK,WAAY,UAG1B,EAAiB,SAAS,cAAc,sBAC9C,AAAI,GACF,EAAS,QAAQ",
"names": []
}
diff --git a/content/static/js/unit.ts b/content/static/js/unit.ts
index 759ea82..6b7beca 100644
--- a/content/static/js/unit.ts
+++ b/content/static/js/unit.ts
@@ -87,14 +87,25 @@
});
});
+const unitHeader = document.querySelector('.js-unitHeader');
+unitHeader?.addEventListener('dblclick', e => {
+ const target = e.target as HTMLElement;
+ if (
+ target === unitHeader.firstElementChild &&
+ unitHeader.classList.contains('UnitHeader--sticky')
+ ) {
+ window.getSelection()?.removeAllRanges();
+ window.scrollTo({ top: 0 });
+ }
+});
const observer = new IntersectionObserver(
([e]) => {
if (e.intersectionRatio < 1) {
- document.querySelector('.js-unitHeader')?.classList.add('UnitHeader--sticky');
- document.querySelector('.js-unitHeader')?.classList.remove('UnitHeader--full');
+ unitHeader?.classList.add('UnitHeader--sticky');
+ unitHeader?.classList.remove('UnitHeader--full');
} else {
- document.querySelector('.js-unitHeader')?.classList.remove('UnitHeader--sticky');
- document.querySelector('.js-unitHeader')?.classList.add('UnitHeader--full');
+ unitHeader?.classList.remove('UnitHeader--sticky');
+ unitHeader?.classList.add('UnitHeader--full');
}
},
{ threshold: 1.0, rootMargin: '-20px' }
