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>
This commit is contained in:
Jamal Carvalho 2021-03-23 18:37:19 -04:00
Родитель c06d85d27e
Коммит 4e9e4e94bc
3 изменённых файлов: 18 добавлений и 7 удалений

Просмотреть файл

@ -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

Просмотреть файл

@ -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": []
}

Просмотреть файл

@ -87,14 +87,25 @@ document.querySelectorAll('.js-buildContextSelect').forEach(el => {
});
});
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' }