查看“︁MediaWiki:Timeless.js”︁的源代码

/* 将为Timeless皮肤的用户加载此处的所有JavaScript  */

class HeadingTracker {
    constructor(rootElement) {
    	this.rootElement = rootElement
        this.headings = [];
        this.cacheExpired = true;
        this.init();
    }

    init() {
        this.collectHeadings();
        window.addEventListener('resize', () => this.cacheExpired = true);
        window.addEventListener('DOMContentLoaded', () => this.cacheExpired = true);
    }

    collectHeadings() {
        const rawHeadings = Array.from(this.rootElement.querySelectorAll('h1, h2, h3, h4, h5, h6'));
        this.headings = rawHeadings
            .map(heading => ({
                element: heading,
                top: heading.getBoundingClientRect().top + window.scrollY
            }))
            .sort((a, b) => a.top - b.top);
        this.cacheExpired = false;
    }

    getNearestHeadingAboveViewport() {
        if (this.cacheExpired) this.collectHeadings();

        const scrollY = window.scrollY + 60;
        let left = 0, right = this.headings.length - 1;
        let result = null;

        while (left <= right) {
            const mid = Math.floor((left + right) / 2);
            if (this.headings[mid].top <= scrollY) {
                result = this.headings[mid].element;
                left = mid + 1;
            } else {
                right = mid - 1;
            }
        }
        return result;
    }
}

class FloatingToC {
	constructor(toc) {
		this.element = toc;
		this.ignoreScrollUpdate = false;
	    
	    let tocTextList = Array.from(toc.querySelectorAll(".toctext"));
	    this.tocTexts = new Map(tocTextList.map(t => {
	    	let textContent = t.textContent
	    	t.parentElement.onclick = () => {
	    		this.ignoreScrollUpdate = true;
	    		this.setCurrentHeading(textContent);
	    	};
	    	return [textContent, t];
	    }));

		this.tracker = new HeadingTracker(
			document.getElementById('mw-content-text'));
		
		this.scrollHandler = this.onScroll.bind(this);
		window.addEventListener('scroll', this.scrollHandler);
	}
	
	remove() {
		window.removeEventListener('scroll', this.scrollHandler);
		this.element.remove();
	}
	
    setCurrentHeading(heading) {
    	const lastHeading = this.lastHeading;
    	if (heading == lastHeading) {
    		return;
    	}
    	if (lastHeading) {
    		let text = this.tocTexts.get(lastHeading)
    		if (text) text.classList.remove('current-heading');
    	}
    	this.lastHeading = heading;
    	if (heading) {
    		let text = this.tocTexts.get(heading)
    		if (text) text.classList.add('current-heading');
    	}
    };
	
	onScroll() {
		if (window.innerWidth < 1100) {
			return;
		}
		if (this.ignoreScrollUpdate) {
			this.ignoreScrollUpdate = false;
			return;
		}
	    let heading = this.tracker.getNearestHeadingAboveViewport();
	    this.setCurrentHeading(heading ? heading.textContent : null);
	}
}

let siteNavigation = document.getElementById('mw-site-navigation');
let floatingToC;
let toc = document.getElementById('toc');

mw.hook('ve.newTarget').add(target => {
	if (target.constructor.static.name !== 'article') {
		return;
	}
	target.on('teardown', () => {
		var event = new CustomEvent("pageupdate");
		document.dispatchEvent(event);
	});
});

const updateTocParent = () => {
	let width = window.innerWidth;
	if (width > 1340) {
		if (toc.parentNode != siteNavigation) {
			toc.parentNode.removeChild(toc);
			siteNavigation.appendChild(toc);
		}
	}
	else {
		if (toc.parentNode == siteNavigation) {
			toc.parentNode.removeChild(toc);
			siteNavigation.lastChild.before(toc);
		}
	}
}

window.addEventListener("resize", () => {
	if (floatingToC == null) {
		return;
	}
	updateTocParent();
});

document.addEventListener('pageupdate', () => {
	let new_toc = document.querySelectorAll('.mw-parser-output > #toc')[0];
	if (new_toc == null) {
		return;
	}
	if (floatingToC != null) {
		floatingToC.remove();
	}
	toc = new_toc;
	updateTocParent();
    floatingToC = new FloatingToC(toc);
});

if (toc) {
    updateTocParent();
    floatingToC = new FloatingToC(toc);
}