☰

Git Markdown Content Navigation

Provide directory navigation of the markdown file content of the github/gitee website.

// ==UserScript==
// @name         Git Markdown Content Navigation
// @name:zh-CN   Git Markdown 文件内容导航
// @namespace    https://github.com/wang1212/user-script/blob/main/git-markdown-content-navigation
// @version      0.3.1
// @description  Provide directory navigation of the markdown file content of the github/gitee website.
// @description:zh-cn 提供 github/gitee 网站 markdown 文件内容的目录导航。
// @author       wang1212
// @match        http*://github.com/*
// @match        http*://gitee.com/*
// @grant        GM_registerMenuCommand
// @grant        GM_openInTab
// @grant        GM_setValue
// @grant        GM_getValue
// @supportURL   https://github.com/wang1212/user-script/blob/main/git-markdown-content-navigation
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  const log = console.log;

  /* ------------------------------- Register menu configuration item ----------------------------- */

  let menu_item_value_switch;
  let menu_item_id_switch;
  let menu_item_id_feedback;
  let menu_item_id_source;

  function registerMenuCommand() {
    //
    if (menu_item_id_switch) GM_unregisterMenuCommand(menu_item_id_switch);

    menu_item_value_switch = GM_getValue('menu_item_value_switch');
    menu_item_id_switch = GM_registerMenuCommand(
      !menu_item_value_switch ? '默认显示 [点击切换]' : '默认隐藏 [点击切换]',
      function () {
        GM_setValue('menu_item_value_switch', !menu_item_value_switch);
        location.reload();
      }
    );

    //
    if (menu_item_id_source) GM_unregisterMenuCommand(menu_item_id_source);

    menu_item_id_source = GM_registerMenuCommand('源码 [GitHub]', function () {
      GM_openInTab(
        'https://github.com/wang1212/user-script/tree/main/git-markdown-content-navigation',
        { active: true, insert: true, setParent: true }
      );
    });

    //
    if (menu_item_id_feedback) GM_unregisterMenuCommand(menu_item_id_feedback);

    menu_item_id_feedback = GM_registerMenuCommand('反馈 & 更新', function () {
      GM_openInTab(
        'https://greasyfork.org/scripts/421316-git-markdown-content-navigation',
        { active: true, insert: true, setParent: true }
      );
    });
  }

  registerMenuCommand();

  /* ------------------------------- Init ----------------------------- */

  const href = location.href;

  const matchGithub = /github/;
  const matchGithubRepository = /https?:\/\/github.com\/.+\/.+/;
  const matchGitee = /gitee/;
  const matchGiteeRepository = /https?:\/\/gitee.com\/.+\/.+/;

  const isGithub = !!href.match(matchGithub);
  const isGitee = !!href.match(matchGitee);
  const isRepositoryPage = !!(
    href.match(matchGithubRepository) || href.match(matchGiteeRepository)
  );

  /* ------------------------------- Parse MarkDown file content navigation ----------------------------- */

  function updateMarkdownFileContentNavigation() {
    let navBarElem = document.querySelector('.wang1212_md-content-nav');

    // Remove existing
    navBarElem && navBarElem.remove();

    if (!isRepositoryPage) return;

    // titles
    const titles = getMarkDownContentTitles();
    if (!titles.length) return;

    // navBar button
    navBarElem = document.createElement('div');
    navBarElem.classList.add('wang1212_md-content-nav');
    navBarElem.title = 'Markdown 文件内容导航';

    navBarElem.innerText = 'N';

    // Panel
    const navBarPanelElem = document.createElement('div');
    navBarPanelElem.classList.add('wang1212_md-content-nav_panel');

    navBarPanelElem.innerHTML = '';

    // draw titles
    titles.forEach((title) => {
      const level = +title.tagName.substr(-1);
      navBarPanelElem.innerHTML += `
<p class="wang1212_md-content-nav_to-anchor" style="font-size: ${
        1 - ((level - 1) * 0).toFixed(2)
      }rem; margin: 0; padding-left: ${((level - 1) * 0.5).toFixed(
        2
      )}rem" data-anchor="${title.anchorId}">
${title.text}
</p>
`;
    });

    // --- CSS Style ---
    const styleElem = document.createElement('style');
    styleElem.type = 'text/css';
    styleElem.innerHTML = `
.wang1212_md-content-nav {
position: fixed;
right: 1rem;
bottom: 3.5rem;
z-index: 1999;
width: 2rem;
height: 2rem;
color: white;
font-size: 1.5rem;
line-height: 2rem;
text-align: center;
background-color: rgb(36, 41, 46);
cursor: pointer;
}
.wang1212_md-content-nav_panel {
position: absolute;
right: 0;
bottom: 2rem;
display: block;
width: 20rem;
height: 75vh;
padding: 0.5rem;
overflow: auto;
color: #999;
text-align: left;
background: white;
box-shadow: rgba(0, 0, 0, 0.25) 0 0 0.5rem 0;
}
.wang1212_md-content-nav_to-anchor {
line-height: 1.6 !important;
transition: all 0.4s linear;
}
.wang1212_md-content-nav_to-anchor:hover {
	color: rgb(0, 0, 0);
    transform: translateX(4px);
}
`;

    navBarElem.appendChild(navBarPanelElem);
    document.body.appendChild(navBarElem);
    document.head.appendChild(styleElem);

    // --- Event ---
    // Show/Hide
    navBarElem.addEventListener(
      'click',
      (e) => {
        if (e.target !== navBarElem) return;

        if (navBarPanelElem.style.display === 'none') {
          navBarPanelElem.style.display = 'block';
        } else {
          navBarPanelElem.style.display = 'none';
        }
      },
      false
    );
    if (menu_item_value_switch) {
      navBarPanelElem.style.display = 'none';
    }

    // fly to view
    navBarPanelElem.addEventListener(
      'click',
      (e) => {
        if (!e.target.classList.contains('wang1212_md-content-nav_to-anchor'))
          return;

        const anchorElem = document.getElementById(e.target.dataset.anchor);
        if (!anchorElem) return;

        anchorElem.scrollIntoView({ behavior: 'smooth', block: 'start' });
      },
      false
    );
  }

  /* ------------------------------- To Top ----------------------------- */

  // to top button
  function updateGoToTopButton() {
    let toTopElem = document.querySelector('.wang1212_to-top');

    // Remove existing
    toTopElem && toTopElem.remove();

    // toTop button
    toTopElem = document.createElement('div');
    toTopElem.classList.add('wang1212_to-top');
    toTopElem.title = '回到顶部';

    toTopElem.innerText = '↑';

    // --- CSS Style ---
    const styleElem = document.createElement('style');
    styleElem.type = 'text/css';
    styleElem.innerHTML = `
.wang1212_to-top {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 1999;
width: 2rem;
height: 2rem;
color: white;
font-size: 1.5rem;
line-height: 2rem;
text-align: center;
background-color: rgb(36, 41, 46);
cursor: pointer;
}
`;

    document.body.appendChild(toTopElem);
    document.head.appendChild(styleElem);

    // --- Event ---
    // fly to view
    toTopElem.addEventListener(
      'click',
      () => {
        document.body.scrollIntoView({ behavior: 'smooth' });
      },
      false
    );
  }

  /* ------------------------------- Utils ----------------------------- */

  // parse titles
  function getMarkDownContentTitles() {
    let rootElem = document.querySelector('.markdown-body');

    if (!rootElem) return [];

    const anchors = rootElem.querySelectorAll('a.anchor');

    if (!anchors.length) return [];

    const titles = [];

    anchors.forEach((elem) => {
      const parentElem = elem.parentElement;

      titles.push({
        tagName: parentElem.tagName,
        text: parentElem.textContent,
        anchorId: elem.id,
      });
    });

    return titles;
  }

  /* ------------------------------- Load ----------------------------- */

  function load() {
    updateMarkdownFileContentNavigation();
    updateGoToTopButton();
  }

  // Monitor page reload
  document.addEventListener('pjax:end', load, false);
  // see docs: https://turbo.hotwired.dev/reference/events
  // see https://github.com/refined-github/refined-github/issues/5719
  //document.addEventListener('turbo:render', load, false)
  document.documentElement.addEventListener('turbo:render', load, false);

  if (isGitee) {
    // Monitor page modify
    const observer = new MutationObserver(load);

    observer.observe(document.querySelector('.tree-holder'), {
      childList: true,
      subtree: false,
    });
  }

  //
  load();
})();