MediaWiki:Gadget-ViewerMode.js

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

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

/**
 * ViewerMode gadget — reader/editor toggle pill in the site header.
 * Also fixes the missing icon on the "My blog" menu item.
 */
( function () {
    'use strict';

    if ( mw.user.isAnon() ) { return; }

    var STORAGE_KEY = 'mw-viewer-mode';
    var active = localStorage.getItem( STORAGE_KEY ) === '1';

    /* Apply class immediately on load (before DOM ready) to avoid flicker */
    if ( active ) { document.documentElement.classList.add( 'viewer-mode' ); }

    function toggle() {
        active = !active;
        localStorage.setItem( STORAGE_KEY, active ? '1' : '0' );
        document.documentElement.classList.toggle( 'viewer-mode', active );
        updateBtn();
    }

    /* Label logic:
     *   viewer mode OFF → button says "阅读视图"  (click to enter reader view)
     *   viewer mode ON  → button says "编辑视图"  (click to return to editor view)
     */
    function updateBtn() {
        var btn = document.getElementById( 'vm-toggle' );
        if ( !btn ) { return; }
        if ( active ) {
            btn.textContent = '✏️ 编辑视图';
            btn.title       = '切换回编辑视图';
            btn.classList.add( 'vm-active' );
        } else {
            btn.textContent = '📖 阅读视图';
            btn.title       = '切换至阅读视图（隐藏编辑工具）';
            btn.classList.remove( 'vm-active' );
        }
    }

    $( function () {
        /* ── Fix missing icon on "My blog" ─────────────────────── */
        var blogLink = document.querySelector( '#pt-simpleblog_myblog a' );
        if ( blogLink && !blogLink.querySelector( '.vector-icon' ) ) {
            var blogIcon = document.createElement( 'span' );
            blogIcon.className = 'vector-icon mw-ui-icon-article mw-ui-icon-wikimedia-article';
            blogLink.insertBefore( blogIcon, blogLink.firstChild );
        }

        /* ── Build toggle pill ──────────────────────────────────── */
        var btn = document.createElement( 'button' );
        btn.id        = 'vm-toggle';
        btn.className = 'vm-toggle';
        btn.addEventListener( 'click', toggle );
        updateBtn();

        /* Inject into .vector-user-links-main, before the dropdown */
        var target = document.querySelector( '.vector-user-links-main' ) ||
                     document.querySelector( '.vector-user-links' );
        if ( target ) {
            target.insertBefore( btn, target.firstChild );
        }
    } );
}() );