ArticleTOCNavigator

Greasy Fork镜像 is available in English.
ArticleTOCNavigator

2023/5/23 14:32:33
Verzia zo dňa 24.05.2023. Pozri najnovšiu verziu.
Spýtať sa otázku, uverejniť recenziu, alebo nahlásiť skript.
Zalomiť riadky
// ==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.5
// @author      Circle
// @description 2023/5/23 14:32:33
// @license MIT
// ==/UserScript==
const generateTOC = () => {
  const articleBody = document.querySelector('.crayons-article__body');
  if (!articleBody || document.querySelector('#toc-container')) return;

  const sidebarRight = document.querySelector('.crayons-layout__sidebar-right');
  const tocContainer = document.createElement('ul');
  tocContainer.id = 'toc-container';
  tocContainer.style.paddingLeft = '20px';

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

  const hStack = [];
  const regex = /\bH[1-5]\b/g;
  const hHeadings = [...articleBody.childNodes].filter((node) => node.nodeType !== 3 && node.tagName && regex.test(node.tagName));
  if (!hHeadings.length) return;

  const 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;
    hLink.style.color = 'var(--body-color)';
    hLink.onclick = (event) => {
      event.preventDefault();
      hHeading.scrollIntoView({ behavior: "smooth" });
    }

    hItem.appendChild(hLink);
    hItem.className = 'toc-level-' + level;
    hItem.style.marginLeft = (hStack.length) * 15 + 'px';

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

    if (!hStack.length || hStack[hStack.length - 1] < level) {
      hStack.push(level);
    } else if (hStack[hStack.length - 1] > level) {
      hStack.pop();
    }

    return hItem;
  });

  sidebarRight.appendChild(divContainer);

  return { hHeadings, linkTargets };
};

let tocData = generateTOC();

window.addEventListener('scroll', () => {
  if (!tocData) return;

  const { hHeadings, linkTargets } = tocData;
  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 observer = new MutationObserver(() => {
  if (oldHref != document.location.href) {
    oldHref = document.location.href;
    tocData = generateTOC();
  }
});

observer.observe(document.querySelector('body'), {
  childList: true,
  subtree: true,
});

const styleElement = document.createElement('style');
styleElement.textContent = `
  #toc-container .active a {
    color:  var(--link-branded-color)!important;
  }
  .active {
    color:  var(--link-branded-color);
    font-weight: bold;
  }
`;
document.head.appendChild(styleElement);
Greasy Fork镜像

ArticleTOCNavigator

赞助商

广告
