User:Artoria2e5/Gadget-sidetoc.js

/**
 * Gadget-sidetoc: displays a toc at your left sidebar
 * Nasty hack, huh?
 * 
 * importScript('User:Artoria2e5/Gadget-sidetoc.js') // [[User:Artoria2e5/Gadget-sidetoc.js]]
 * @license CC0
 */
;(function(){
"use strict"
function ScrolledOver(elem) {
    // https://stackoverflow.com/questions/487073
    var docViewTop = $(window).scrollTop();
    // var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return (elemBottom <= docViewTop);
}

function applyStyle(elem, style) {
	for (var i in style)
		if (style.hasOwnProperty(i))
			elem.style[i] = style[i]
}

// provide easy breaks
do {
	try {
		var toc = document.getElementById('toc')
		if (!toc) break;
		var toc2 = toc.cloneNode(true)
		toc2.id = 'side-toc'
		toc2.classList.add('toclimit-3')
		toc2.removeChild(toc2.querySelector('.toctitle, #toctitle'))
		toc2.removeChild(toc2.querySelector('.toctogglecheckbox, #toctogglecheckbox'))
		applyStyle(toc2, {
			// Page position
			'position':		'fixed',
			'left':			'5px',
			'bottom': 		'5px',
			// Metrics
			'width':		'9.3rem',
			'max-height':	'90vh',
			// Reading aid
			'font-size': 	'small',
			// Scroll bar (need height limit and display: 'block')
			'overflow-y': 	'auto',
			// Hide by default (sidetoc_check_hide)
			'display': 		'none',
			// Aesthetic stuff for scrollbar
			// ... in order to minimize its impact on space aviailable for text 
			'-ms-overflow-style':
							'-ms-autohiding-scrollbar',
			// Nothing for ya, WebKit
			// Your whole pseudoelement thing is too complicated
		})
		document.getElementById('mw-panel').appendChild(toc2)
		
		var side_toc_style = document.createElement('style')
		side_toc_style.innerHTML = '/* Gadget-sidetoc */\n' + 
			'#side-toc .toctext { word-break: break-word; hyphens: auto; }\n' +
			'#side-toc .tocnumber { font-size: x-small; font-weight: bolder; }\n' + 
			'#side-toc .tocnumber, #side-toc .toctext { display: inherit; }\n'+
			'#side-toc ul ul { margin: 0 0 0 0.5em; }\n'
		document.head.appendChild(side_toc_style)

		var scrolled = false
		window.addEventListener("scroll", function sidetoc_mark_scroll() {
			return (scrolled = true)
		})
		
		var bot = document.getElementById('mw-panel')
		if (!bot) break;
		window.artoria_sidetoc_interval = setInterval(function sidetoc_check_hide() {
			if (scrolled) {
				toc2.style.display = ScrolledOver(bot) ? 'block' : 'none'
				scrolled = false
			}
			return true
		}, 100)
	} catch (e) { console.error(e) }
} while (0)

})();