table-of-contents.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. const getPageToc = () => document.getElementsByClassName('pagetoc')[0];
  2. const pageToc = getPageToc();
  3. const pageTocChildren = [...pageToc.children];
  4. const headers = [...document.getElementsByClassName('header')];
  5. // Select highlighted item in ToC when clicking an item
  6. pageTocChildren.forEach(child => {
  7. child.addEventHandler('click', () => {
  8. pageTocChildren.forEach(child => {
  9. child.classList.remove('active');
  10. });
  11. child.classList.add('active');
  12. });
  13. });
  14. /**
  15. * Test whether a node is in the viewport
  16. */
  17. function isInViewport(node) {
  18. const rect = node.getBoundingClientRect();
  19. return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
  20. }
  21. /**
  22. * Set a new ToC entry.
  23. * Clear any previously highlighted ToC items, set the new one,
  24. * and adjust the ToC scroll position.
  25. */
  26. function setTocEntry() {
  27. let activeEntry;
  28. const pageTocChildren = [...getPageToc().children];
  29. // Calculate which header is the current one at the top of screen
  30. headers.forEach(header => {
  31. if (window.pageYOffset >= header.offsetTop) {
  32. activeEntry = header;
  33. }
  34. });
  35. // Update selected item in ToC when scrolling
  36. pageTocChildren.forEach(child => {
  37. if (activeEntry.href.localeCompare(child.href) === 0) {
  38. child.classList.add('active');
  39. } else {
  40. child.classList.remove('active');
  41. }
  42. });
  43. let tocEntryForLocation = document.querySelector(`nav a[href="${activeEntry.href}"]`);
  44. if (tocEntryForLocation) {
  45. const headingForLocation = document.querySelector(activeEntry.hash);
  46. if (headingForLocation && isInViewport(headingForLocation)) {
  47. // Update ToC scroll
  48. const nav = getPageToc();
  49. const content = document.querySelector('html');
  50. if (content.scrollTop !== 0) {
  51. nav.scrollTo({
  52. top: tocEntryForLocation.offsetTop - 100,
  53. left: 0,
  54. behavior: 'smooth',
  55. });
  56. } else {
  57. nav.scrollTop = 0;
  58. }
  59. }
  60. }
  61. }
  62. /**
  63. * Populate sidebar on load
  64. */
  65. window.addEventListener('load', () => {
  66. // Only create table of contents if there is more than one header on the page
  67. if (headers.length <= 1) {
  68. return;
  69. }
  70. // Create an entry in the page table of contents for each header in the document
  71. headers.forEach((header, index) => {
  72. const link = document.createElement('a');
  73. // Indent shows hierarchy
  74. let indent = '0px';
  75. switch (header.parentElement.tagName) {
  76. case 'H1':
  77. indent = '5px';
  78. break;
  79. case 'H2':
  80. indent = '20px';
  81. break;
  82. case 'H3':
  83. indent = '30px';
  84. break;
  85. case 'H4':
  86. indent = '40px';
  87. break;
  88. case 'H5':
  89. indent = '50px';
  90. break;
  91. case 'H6':
  92. indent = '60px';
  93. break;
  94. default:
  95. break;
  96. }
  97. let tocEntry;
  98. if (index == 0) {
  99. // Create a bolded title for the first element
  100. tocEntry = document.createElement("strong");
  101. tocEntry.innerHTML = header.text;
  102. } else {
  103. // All other elements are non-bold
  104. tocEntry = document.createTextNode(header.text);
  105. }
  106. link.appendChild(tocEntry);
  107. link.style.paddingLeft = indent;
  108. link.href = header.href;
  109. pageToc.appendChild(link);
  110. });
  111. setTocEntry.call();
  112. });
  113. // Handle active headers on scroll, if there is more than one header on the page
  114. if (headers.length > 1) {
  115. window.addEventListener('scroll', setTocEntry);
  116. }