Redmine-wiki-ToC-floating-navigator

Redmine wiki TOC navigator.user.js

// ==UserScript==
// @name         Redmine-wiki-ToC-floating-navigator
// @namespace    https://github.com/Lycolia
// @version      0.2
// @description  Redmine wiki ToC floating navigator, for 4.1.1.stable
// @author       Lycolia
// @match        *://*/redmine/projects/*/wiki/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

// customize ToC Style
setStyleToc()
// floating ToC and adjust contents
adjustContents(getToc())


function setStyleToc() {
  // get application.css
  const idx = Object.entries(document.styleSheets).find(([k, v]) => v.href.match(/application/))[0]
  // add ToC padding
  document.styleSheets[idx].insertRule('div.wiki ul.toc { padding: 10px; }', document.styleSheets[idx].cssRules.length)
  // add ToC Header brace start
  document.styleSheets[idx].insertRule('div.wiki ul.toc>li:first-child::before { content: "[ "; }', document.styleSheets[idx].cssRules.length)
  // add ToC Header style
  document.styleSheets[idx].insertRule('div.wiki ul.toc>li:first-child { margin: 10px; padding-bottom: 10px; color: #777; text-align: center; font-size: 13pt; }', document.styleSheets[idx].cssRules.length)
  // add ToC Header brace end
  document.styleSheets[idx].insertRule('div.wiki ul.toc>li:first-child::after { content: " ]"; }', document.styleSheets[idx].cssRules.length)
  // add ToC font-size
  document.styleSheets[idx].insertRule('div.wiki ul.toc a { font-size: 11pt; }', document.styleSheets[idx].cssRules.length)
}

function getToc() {
  const tocFind = document.getElementsByClassName('toc')
  if (tocFind.length > 0) {
    const toc = tocFind[0]
    const tocRect = toc.getBoundingClientRect()
    toc.style.float = 'left'
    toc.style.position = 'fixed'
    toc.style.top = tocRect.y
    toc.style.left = tocRect.x
    return { el: toc, rect: tocRect }
  }

  return null
}

function adjustContents(toc) {
  const wikiFind = document.getElementsByClassName('wiki wiki-page')
  if (wikiFind.length > 0) {
    const body = wikiFind[0]
    body.removeChild(toc.el);

    body.innerHTML = toc.el.outerHTML + body.innerHTML.replace(
      /([\s\S]+)/gm,
      `<div style="padding-left: ${toc.rect.x + toc.rect.width + 10}px">$1</div>`
    )
  }
}
})();

Redmine-wiki-ToC-floating-navigator

Tampermonkey Script for Redmine wiki ToC floating navigator

before scrolling

floating after scrolling