UserScript - Make Meaningness a little more like WorkFlowy

meaningness-collapsible-toc.user.js

// ==UserScript==
// @name         Collapsible Meaningness Table of Contents
// @namespace    https://malcolmocean.com
// @version      0.1
// @description  Make Meaningness a little more like WorkFlowy - MIT license, you do you
// @author       @Malcolm_Ocean
// @match        https://meaningness.com/
// @grant        none
// ==/UserScript==
 
;(() => {
  'use strict';
  document.body.addEventListener('click', e => {
    if (e.target.nodeName !== 'LI') {return}
    const li = e.target
    const sib = li.nextSibling
    if (!sib || !/book_toc_container/.test(sib.className)) {return}
    e.preventDefault()
    if (/collapsed/.test(e.target.className)) {
      li.className = li.className.replace(/ ?collapsed ?/, ' ')
    } else {
      li.className = li.className + ' collapsed'
    }
    slideToggle(sib)
  })

  function slideUp (target, duration=200) {
    target.style.transitionProperty = 'height, margin, padding'
    target.style.transitionDuration = duration + 'ms'
    target.style.boxSizing = 'border-box'
    target.style.height = target.offsetHeight + 'px'
    target.offsetHeight
    target.style.overflow = 'hidden'
    target.style.height = 0
    target.style.paddingTop = 0
    target.style.paddingBottom = 0
    target.style.marginTop = 0
    target.style.marginBottom = 0
    window.setTimeout(() => {
      target.style.display = 'none'
      target.style.removeProperty('height')
      target.style.removeProperty('padding-top')
      target.style.removeProperty('padding-bottom')
      target.style.removeProperty('margin-top')
      target.style.removeProperty('margin-bottom')
      target.style.removeProperty('overflow')
      target.style.removeProperty('transition-duration')
      target.style.removeProperty('transition-property')
      //alert("!")
    }, duration)
  }

  function slideDown (target, duration=200) {
    target.style.removeProperty('display')
    let display = window.getComputedStyle(target).display

    if (display === 'none') {
      display = 'block'
    }

    target.style.display = display
    let height = target.offsetHeight
    target.style.overflow = 'hidden'
    target.style.height = 0
    target.style.paddingTop = 0
    target.style.paddingBottom = 0
    target.style.marginTop = 0
    target.style.marginBottom = 0
    target.offsetHeight
    target.style.boxSizing = 'border-box'
    target.style.transitionProperty = "height, margin, padding"
    target.style.transitionDuration = duration + 'ms'
    target.style.height = height + 'px'
    target.style.removeProperty('padding-top')
    target.style.removeProperty('padding-bottom')
    target.style.removeProperty('margin-top')
    target.style.removeProperty('margin-bottom')
    window.setTimeout(() => {
      target.style.removeProperty('height')
      target.style.removeProperty('overflow')
      target.style.removeProperty('transition-duration')
      target.style.removeProperty('transition-property')
    }, duration)
  }
  function slideToggle (target, duration=200) {
    if (window.getComputedStyle(target).display === 'none') {
      return slideDown(target, duration)
    } else {
      return slideUp(target, duration)
    }
  }

  (() => { // the existing "collapsed" style is kinda tiny
    const css = `
      li.collapsed {
        list-style: none !important;
        position: relative;
      }
      li.collapsed:before {
        position: absolute;
        top: 6px;
        left: -20px;
        content: '';
        width: 15px;
        height: 19px;
        background-size: 15px 19px;
        background-image: url('https://www.pngfind.com/pngs/m/320-3203305_png-file-black-triangle-pointing-right-transparent-png.png');
        background-color: red;
        opacity: 0.5;
      }
      li.collapsed:hover:before {
        opacity: 0.7;
      }`
    const head = document.head || document.getElementsByTagName('head')[0]
    const style = document.createElement('style')
    head.appendChild(style)
    style.type = 'text/css'
    style.appendChild(document.createTextNode(css))
  })()

})();