ArticleTOCNavigator

2023/5/23 14:32:33
2023-05-24 기준 버전입니다. 최신 버전을 확인하세요.
줄 바꿈
// ==UserScript==
// @name        ArticleTOCNavigator
// @namespace   This JavaScript plugin generates a dynamic table of contents for dev website. It uses HTML header tags to create links to respective sections, highlights the current section, and displays it on the sidebar for easy navigation.
// @match       https://dev.to/*
// @grant       none
// @version     1.0.1
// @author      Circle
// @description 2023/5/23 14:32:33
// @license MIT
// ==/UserScript==
let hHeadings = [],
  linkTargets = [];
const generateTOC = () => {
  const hStack = [];
  const articleBody = document.querySelector('.crayons-article__body');
  if (!articleBody) return;
  const sidebarRight = document.querySelector('.crayons-layout__sidebar-right');
  // Create the TOC container
  const tocContainer = document.createElement('ul');
  tocContainer.id = 'toc-container';

  const divContainer = document.createElement('div');
  divContainer.className =
    'crayons-article-sticky crayons-card crayons-card--secondary crayons-sponsorship billboard mt-4';
  divContainer.appendChild(tocContainer);

  // Find all headers in the article body
  hHeadings = [...articleBody.childNodes].filter((node) => {
     return node.nodeType !== 3 && node.tagName && node.tagName.includes('H');
  });
  if (!hHeadings.length) return;
  linkTargets = hHeadings.map((hHeading, index) => {
    const hItem = document.createElement('li');
    const hLink = document.createElement('a');
    const level = Number(hHeading.tagName.slice(1));

    hLink.href = '#toc-' + index;
    hLink.textContent = hHeading.textContent;

    hItem.appendChild(hLink);
    hItem.className = 'toc-level-' + level;
    if (!hStack.length) {
      hStack.push(level);
    } else {
      const headLevel = hStack[hStack.length - 1];
      if (headLevel < level) {
        hStack.push(level);
      } else if (headLevel === level) {
      } else {
        hStack.pop();
      }
    }
    hItem.className = 'toc-level-' + hStack.length;
    hItem.style.marginLeft = (hStack.length) * 15 + 'px';

    hHeading.id = 'toc-' + index;
    tocContainer.appendChild(hItem);

    return hItem;
  });

  sidebarRight.appendChild(divContainer);
};

window.addEventListener('scroll', () => {
  const currentPosition =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop ||
    0;

  const currentIndex = hHeadings.findIndex(
    hHeading => hHeading.offsetTop > currentPosition,
  );

  linkTargets.forEach((link, index) =>
    link.classList.toggle('active', index === currentIndex),
  );
});

let oldHref = document.location.href;
const bodyList = document.querySelector('body');
const observer = new MutationObserver(function (mutations) {
  if (oldHref != document.location.href) {
    oldHref = document.location.href;
    // 这里调用你想要执行的函数
    generateTOC();
  }
});
const observerConfig = {
  childList: true,
  subtree: true,
};
observer.observe(bodyList, observerConfig);

generateTOC();

const styleElement = document.createElement('style');
styleElement.textContent = `
  #toc-container {
    padding-left: 20px;
  }
  #toc-container a {
    color:  var(--body-color);
  }
  #toc-container .active a {
    color:  var(--link-branded-color);
  }
  .active {
    color:  var(--link-branded-color);
    font-weight: bold;
  }
`;
document.head.appendChild(styleElement);