From cfc856e53a2814ebbf691fb21c98c3252ef5b5a0 Mon Sep 17 00:00:00 2001 From: Russ Cox Date: Tue, 9 Nov 2021 12:55:57 -0500 Subject: [PATCH] go.dev/_content/js: delete h2 manipulation in misc.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It's unclear what “correct scroll” means here, but it's definitely incorrect to blow away any HTML (such as links) in every h2 and replace it with the text-only representation of the original h2. Delete that code. If we figure out what this means, we can look for a better way to solve this problem (probably scroll-margin-top?). Also, make it clearer that the stickyNav setup is a no-op without a sticky nav. Preparation for the golang.org -> go.dev move. Change-Id: Ib8930a4e3aba688d645f689d3c2ee90b3e09229f Reviewed-on: https://go-review.googlesource.com/c/website/+/362499 Trust: Russ Cox Reviewed-by: Jamal Carvalho --- go.dev/_content/js/misc.js | 295 +++++++++++++++++-------------------- 1 file changed, 139 insertions(+), 156 deletions(-) diff --git a/go.dev/_content/js/misc.js b/go.dev/_content/js/misc.js index c4455c89..708d6ff2 100644 --- a/go.dev/_content/js/misc.js +++ b/go.dev/_content/js/misc.js @@ -11,177 +11,160 @@ }); })(); -/* Header tags generated with markdown - inner span needed for correct scroll - position */ -(() => { - const headingHashes = Array.from(document.querySelectorAll('h2[id]')); - headingHashes.forEach(h2 => { - const text = h2.textContent; - const id = h2.id; - h2.id = id + '-h2'; - h2.textContent = ''; - const span = document.createElement('span'); - span.textContent = text; - span.id = id; - h2.appendChild(span); - }); -})(); - // Use case pages section navigation (() => { const stickyNav = document.querySelector('.js-useCaseStickyNav'); - if (stickyNav) { - const linkData = { - 'overview': 'Overview', - 'key-benefits': 'Key Benefits', - 'use-case': 'Use Case', - 'featured-users': 'Featured Users', - 'get-started': 'Get Started', - }; - const container = document.querySelector('.js-useCaseSubnav'); - const subNavAnchorLinks = document.querySelector('.js-useCaseSubnavLinks'); - const siteHeader = document.querySelector('.js-siteHeader'); - const header = document.querySelector('.js-useCaseSubnavHeader'); - const icon = document.querySelector('.js-useCaseSubnavMenuIcon'); - const menu = document.querySelector('.js-useCaseSubnavMenu'); - const contentBody = document.querySelector('.js-useCaseContentBody'); - const headerHeightPx = 56; - const sectionHeadings = Array.from( - document.querySelectorAll('.sectionHeading') - ).map(h => h.firstChild); - let distanceFromTop = - window.pageYOffset + - contentBody.getBoundingClientRect().top - - headerHeightPx; - if (!header || !menu) return; - container.addEventListener('click', handleClick); - container.addEventListener('keydown', handleKeydown); - changeScrollPosition(); + if (!stickyNav) return; + const linkData = { + 'overview': 'Overview', + 'key-benefits': 'Key Benefits', + 'use-case': 'Use Case', + 'featured-users': 'Featured Users', + 'get-started': 'Get Started', + }; + const container = document.querySelector('.js-useCaseSubnav'); + const subNavAnchorLinks = document.querySelector('.js-useCaseSubnavLinks'); + const siteHeader = document.querySelector('.js-siteHeader'); + const header = document.querySelector('.js-useCaseSubnavHeader'); + const icon = document.querySelector('.js-useCaseSubnavMenuIcon'); + const menu = document.querySelector('.js-useCaseSubnavMenu'); + const contentBody = document.querySelector('.js-useCaseContentBody'); + const headerHeightPx = 56; + const sectionHeadings = Array.from( + document.querySelectorAll('.sectionHeading') + ).map(h => h.firstChild); + let distanceFromTop = + window.pageYOffset + + contentBody.getBoundingClientRect().top - + headerHeightPx; + if (!header || !menu) return; + container.addEventListener('click', handleClick); + container.addEventListener('keydown', handleKeydown); + changeScrollPosition(); - function handleClick(event) { - if (event.target === header) { - toggleMenu(); - } else { - closeMenu(); - } + function handleClick(event) { + if (event.target === header) { + toggleMenu(); + } else { + closeMenu(); } + } - function handleKeydown(event) { - if (event.key === 'Enter') { - closeMenu(); - } else { - openMenu(); - } + function handleKeydown(event) { + if (event.key === 'Enter') { + closeMenu(); + } else { + openMenu(); } + } - function openMenu() { - menu.classList.add('UseCaseSubNav-menu--open'); - icon.classList.add('UseCaseSubNav-menuIcon--open'); - } + function openMenu() { + menu.classList.add('UseCaseSubNav-menu--open'); + icon.classList.add('UseCaseSubNav-menuIcon--open'); + } - function closeMenu() { - menu.classList.remove('UseCaseSubNav-menu--open'); - icon.classList.remove('UseCaseSubNav-menuIcon--open'); - } + function closeMenu() { + menu.classList.remove('UseCaseSubNav-menu--open'); + icon.classList.remove('UseCaseSubNav-menuIcon--open'); + } - function toggleMenu() { - menu.classList.toggle('UseCaseSubNav-menu--open'); - icon.classList.toggle('UseCaseSubNav-menuIcon--open'); - } + function toggleMenu() { + menu.classList.toggle('UseCaseSubNav-menu--open'); + icon.classList.toggle('UseCaseSubNav-menuIcon--open'); + } - sectionHeadings.forEach(heading => { - let a = document.createElement('a'); - a.classList.add('UseCase-anchorLink', 'anchor-link'); - a.href = `${window.location.pathname}#${heading.id}`; - a.textContent = linkData[heading.id]; - stickyNav.appendChild(a); - a = a.cloneNode(); - a.textContent = linkData[heading.id]; - subNavAnchorLinks.appendChild(a); + sectionHeadings.forEach(heading => { + let a = document.createElement('a'); + a.classList.add('UseCase-anchorLink', 'anchor-link'); + a.href = `${window.location.pathname}#${heading.id}`; + a.textContent = linkData[heading.id]; + stickyNav.appendChild(a); + a = a.cloneNode(); + a.textContent = linkData[heading.id]; + subNavAnchorLinks.appendChild(a); + }); + + // Selected section styles + const anchorLinks = document.querySelectorAll('.anchor-link'); + anchorLinks.forEach(link => { + link.addEventListener('click', () => { + document + .querySelectorAll('.anchor-link') + .forEach(el => el.classList.remove('selected')); + link.classList.add('selected'); }); + }); - // Selected section styles - const anchorLinks = document.querySelectorAll('.anchor-link'); - anchorLinks.forEach(link => { - link.addEventListener('click', () => { - document - .querySelectorAll('.anchor-link') - .forEach(el => el.classList.remove('selected')); - link.classList.add('selected'); - }); - }); + window.addEventListener('scroll', () => { + // delay in case the user clicked the anchor link and we are autoscrolling + setTimeout(setSelectedAnchor, 500); + }); - window.addEventListener('scroll', () => { - // delay in case the user clicked the anchor link and we are autoscrolling - setTimeout(setSelectedAnchor, 500); - }); - - function setSelectedAnchor() { - for (heading of sectionHeadings) { - const {offsetTop} = heading; - if (offsetTop > window.scrollY) { - anchorLinks.forEach(link => { - const anchorId = link.href.slice(link.href.indexOf('#') + 1); - if (anchorId === heading.id) { - link.classList.add('selected'); - } else { - link.classList.remove('selected'); - } - }); - break; - } - } - } - - /* sticky nav logic -- uses content for y position because reloading page - when not scrolled to the top creates bug if using current y position of - sticky nav */ - window.addEventListener('scroll', setStickyNav); - - window.addEventListener('resize', () => { - distanceFromTop = - window.pageYOffset + - contentBody.getBoundingClientRect().top - - headerHeightPx; - - changeScrollPosition() - }); - - /** - * Changes scroll position according to the size of the header and menu - * Also changes according to the user's browser - */ - function changeScrollPosition() { - const SUPPORTS_SCROLL_BEHAVIOR = document.body.style.scrollBehavior !== undefined; - const WINDOW_WIDTH_BREAKPOINT_PX = 923; - let scrollPosition = headerHeightPx; - - if (SUPPORTS_SCROLL_BEHAVIOR) { - if (window.innerWidth < WINDOW_WIDTH_BREAKPOINT_PX) { - scrollPosition += header.clientHeight; - } - } else { - if (window.innerWidth >= WINDOW_WIDTH_BREAKPOINT_PX) { - scrollPosition = siteHeader.clientHeight - } else { - scrollPosition = siteHeader.clientHeight + header.clientHeight; - } - } - - sectionHeadings.forEach((sectionHeading) => { - sectionHeading.setAttribute('style', ` - margin-bottom: -${scrollPosition}px; - padding-top: ${scrollPosition}px; - `) - }); - } - - function setStickyNav() { - if (window.scrollY > distanceFromTop) { - stickyNav.classList.add('UseCaseSubNav-anchorLinks--sticky'); - } else { - stickyNav.classList.remove('UseCaseSubNav-anchorLinks--sticky'); + function setSelectedAnchor() { + for (heading of sectionHeadings) { + const {offsetTop} = heading; + if (offsetTop > window.scrollY) { + anchorLinks.forEach(link => { + const anchorId = link.href.slice(link.href.indexOf('#') + 1); + if (anchorId === heading.id) { + link.classList.add('selected'); + } else { + link.classList.remove('selected'); + } + }); + break; } } } + + /* sticky nav logic -- uses content for y position because reloading page + when not scrolled to the top creates bug if using current y position of + sticky nav */ + window.addEventListener('scroll', setStickyNav); + + window.addEventListener('resize', () => { + distanceFromTop = + window.pageYOffset + + contentBody.getBoundingClientRect().top - + headerHeightPx; + + changeScrollPosition() + }); + + /** + * Changes scroll position according to the size of the header and menu + * Also changes according to the user's browser + */ + function changeScrollPosition() { + const SUPPORTS_SCROLL_BEHAVIOR = document.body.style.scrollBehavior !== undefined; + const WINDOW_WIDTH_BREAKPOINT_PX = 923; + let scrollPosition = headerHeightPx; + + if (SUPPORTS_SCROLL_BEHAVIOR) { + if (window.innerWidth < WINDOW_WIDTH_BREAKPOINT_PX) { + scrollPosition += header.clientHeight; + } + } else { + if (window.innerWidth >= WINDOW_WIDTH_BREAKPOINT_PX) { + scrollPosition = siteHeader.clientHeight + } else { + scrollPosition = siteHeader.clientHeight + header.clientHeight; + } + } + + sectionHeadings.forEach((sectionHeading) => { + sectionHeading.setAttribute('style', ` + margin-bottom: -${scrollPosition}px; + padding-top: ${scrollPosition}px; + `) + }); + } + + function setStickyNav() { + if (window.scrollY > distanceFromTop) { + stickyNav.classList.add('UseCaseSubNav-anchorLinks--sticky'); + } else { + stickyNav.classList.remove('UseCaseSubNav-anchorLinks--sticky'); + } + } })();