MediaWiki:Timeless.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/* 将为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 ) => {
    // Check the target is an article
	if ( target.constructor.static.name !== 'article' ) {
	    // Other valid targets exist, e.g. 'discussionTools'
		return;
	}

	// To check if the target is desktop or mobile, one could use:
	// isMobile = ve.init.mw.MobileArticleTarget && target instanceof ve.init.mw.MobileArticleTarget;
	// isDesktop = ve.init.mw.DesktopArticleTarget && target instanceof ve.init.mw.DesktopArticleTarget;

    // Some replacements for existing hooks:
	// ve.activationComplete
	target.on( 'surfaceReady', () => {
		console.log( 'surface ready' );
	} );
	// ve.toolbarSaveButton.stateChanged
	target.on( 'toolbarSaveButtonStateChanged', () => {
		console.log( 'toolbar save button changed', target.toolbarSaveButton, target.isSaveable() );
	} );
	// ve.saveDialog.stateChanged
	target.on( 'saveWorkflowChangePanel', () => {
		console.log( 'save dialog change panel', target.saveDialog );
	} );
	// ve.deactivationComplete
	target.on( 'teardown', () => {
		console.log( 'teardown', target.edited );
	} );
} );

document.addEventListener('replysubmit', () => {
	let new_toc = document.querySelectorAll('.mw-parser-output > #toc')[0];
	console.log(new_toc);
	if (new_toc == null) {
		return;
	}
	if (floatingToC != null) {
		floatingToC.remove();
	}
	toc = new_toc;
	toc.parentNode.removeChild(toc);
    siteNavigation.appendChild(toc);
    floatingToC = new FloatingToC(toc);
    console.log(floatingToC);
});

if (toc) {
    toc.parentNode.removeChild(toc);
    siteNavigation.appendChild(toc);
    floatingToC = new FloatingToC(toc);
}