1// Copyright 2023 The Pigweed Authors 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); you may not 4// use this file except in compliance with the License. You may obtain a copy of 5// the License at 6// 7// https://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT 11// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the 12// License for the specific language governing permissions and limitations under 13// the License. 14 15window.pigweed = {}; 16 17// Scroll the site nav so that the current page is visible. 18// Context: https://pigweed.dev/docs/style_guide.html#site-nav-scrolling 19window.pigweed.scrollSiteNav = () => { 20 const siteNav = document.querySelector('.sidebar-scroll'); 21 // The node within the site nav that represents the page that the user is 22 // currently looking at. 23 const currentPage = document.querySelector('.current-page'); 24 // Determine which site nav node to scroll to. Scroll directly to top-level 25 // (L1) and second-level (L2) nodes. For L3 nodes and deeper, scroll to the 26 // node's L2 ancestor so that the user sees all the docs in the set. 27 let targetNode; 28 if ( 29 currentPage.classList.contains('toctree-l1') || 30 currentPage.classList.contains('toctree-l2') 31 ) { 32 targetNode = currentPage; 33 } else { 34 targetNode = document.querySelector('li.toctree-l2.current'); 35 } 36 // Scroll to the node. Note that we also tried scrollIntoView() but 37 // it wasn't reliable enough. 38 const scrollDistance = 39 targetNode.getBoundingClientRect().top - 40 siteNav.getBoundingClientRect().top; 41 siteNav.scrollTop = scrollDistance; 42}; 43 44// If the URL has a deep link, make sure the page scrolls to that section. 45// Context: https://pigweed.dev/docs/style_guide.html#site-nav-scrolling 46window.pigweed.scrollMainContent = () => { 47 // Only run this logic if there's a deep link in the URL. 48 if (!window.location.hash) { 49 return; 50 } 51 // Make sure that there's actually a node that matches the deep link before 52 // attempting to jump to it. 53 const targetNode = document.querySelector(window.location.hash); 54 if (!targetNode) { 55 return; 56 } 57 // Scroll to the node. Note that we also tried scrollIntoView() but 58 // it wasn't reliable enough. 59 const mainContent = document.querySelector('div.main'); 60 const scrollDistance = 61 targetNode.getBoundingClientRect().top - 62 mainContent.getBoundingClientRect().top; 63 mainContent.scrollTop = scrollDistance; 64}; 65 66window.addEventListener('DOMContentLoaded', () => { 67 // Manually control when Mermaid diagrams render to prevent scrolling issues. 68 // Context: https://pigweed.dev/docs/style_guide.html#site-nav-scrolling 69 if (window.mermaid) { 70 // https://mermaid.js.org/config/usage.html#using-mermaid-run 71 window.mermaid.run(); 72 } 73 window.pigweed.scrollSiteNav(); 74 window.pigweed.scrollMainContent(); 75}); 76