monkey patching bookmode for hackmd

monkey-hackmd-bookmode.user.js

// ==UserScript==
// @name     monkey hackmd toc
// @namespace http://gholk.github.io
// @version  9
// @grant    none
// @match    https://hackmd.io/*
// @match    https://hackmd.ccns.ncku.edu.tw/*
// ==/UserScript==

/* this script monkey patch the hackmd easy content table,
 * in hackmd right top menu list **Monkey Book** option.
 * 
 * for example: <https://hackmd.io/ip2nlTQcRLyQhDz0nah-pQ?view>
 */

function parseDocument(doc) {
    const copy = doc.cloneNode(true)
    removeOther(copy)
    copy.id = 'monkey-content-table'
    copy.removeAttribute('class')
    copy.removeAttribute('style')
    copy.querySelectorAll('a').forEach(a => a.target = 'monkey-hackmd-window')
    return copy
    
    function removeOther(doc) {
        const removeList = []
        for (const element of copy.children) {
            if (!['UL', 'H2'].includes(element.tagName)) {
                removeList.push(element)
            }
        }
        removeList.forEach(node => node.remove())
        doc.querySelectorAll('h2 a').forEach(a => a.remove())
    }
}

const monkeyCss = `
#monkey-content-table {
  padding: 0 0.6em;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 20%;
  overflow-x: hidden;
  overflow-y: auto;
  background: white;
  font-size: 16px;
  z-index: 2000;
}
#monkey-content-table ul {
  list-style: none;
  padding-left: 0.5em;
}
#monkey-content-table a {
  color: gray;
}
#monkey-content-table h2 {
  border-bottom: solid 2px #EEE;
  padding-bottom: 0.3em;
}
#monkey-hackmd-window {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80%;
  height: 100%;
  background: white;
  z-index: 2000;
}
`

function monkeyIframe() {
    const iframe = document.createElement('iframe')
    iframe.id = iframe.name = 'monkey-hackmd-window'
    document.body.appendChild(iframe)
    return iframe
}

function monkeyPatchToc() {
    const doc = document.getElementById('doc')
    const copy = parseDocument(doc)
    const style = document.createElement('style')
    style.textContent = monkeyCss
    document.body.appendChild(style)
    document.body.appendChild(copy)
    monkeyIframe()
}


function monkeyPatchButton() {
    const query = '.navbar-right li:nth-child(3) .dropdown-menu'
    const ul = document.querySelector(query)
    const li = createItem()
    ul.appendChild(li)
    
    function createItem() {
        const li = document.createElement('li')
        li.setAttribute('role', 'presentation')
        li.innerHTML = `<a role="menuitem" class="ui-extra-book" tabindex="-1"><i class="fa fa-book fa-fw"></i> Monkey Book</a>`
        li.onclick = monkeyPatchToc
        return li
    }
}

monkeyPatchButton()