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 — lets editors preview the site as a regular visitor.
 * Also fixes the missing icon on the "我的博客" menu item.
 */
( function () {
    'use strict';

    // Only run for logged-in users
    if ( mw.user.isAnon() ) {
        return;
    }

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

    // Apply class immediately on load to prevent flash of edit elements
    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 );
        updateButton();
    }

    function updateButton() {
        var label = document.querySelector( '#pt-viewer-mode .viewer-mode-label' );
        if ( !label ) { return; }
        label.textContent = active ? '编辑者模式' : '读者模式';
        var icon = document.querySelector( '#pt-viewer-mode .vector-icon' );
        if ( icon ) {
            icon.className = active
                ? 'vector-icon mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions'
                : 'vector-icon mw-ui-icon-eye mw-ui-icon-wikimedia-eye';
        }
    }

    $( function () {
        // --- Fix missing icon on 我的博客 ---
        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 );
            blogLink.insertBefore( document.createTextNode( '\u00a0' ), blogIcon.nextSibling );
        }

        // --- Add viewer-mode toggle to personal menu ---
        var menuList = document.querySelector( '#p-personal .vector-menu-content-list' );
        if ( !menuList ) { return; }

        // Only show toggle if user has any edit controls on this page
        // (safe for all logged-in users; harmless if no edit controls exist)
        var li = document.createElement( 'li' );
        li.id = 'pt-viewer-mode';
        li.className = 'mw-list-item';

        var a = document.createElement( 'a' );
        a.href = '#';
        a.title = active ? '切换回编辑者模式' : '切换到读者模式，预览访客视图';

        var iconSpan = document.createElement( 'span' );
        iconSpan.className = active
            ? 'vector-icon mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions'
            : 'vector-icon mw-ui-icon-eye mw-ui-icon-wikimedia-eye';

        var textSpan = document.createElement( 'span' );
        textSpan.className = 'viewer-mode-label';
        textSpan.textContent = active ? '编辑者模式' : '读者模式';

        a.appendChild( iconSpan );
        a.appendChild( document.createTextNode( '\u00a0' ) );
        a.appendChild( textSpan );

        a.addEventListener( 'click', function ( e ) {
            e.preventDefault();
            toggle();
        } );

        li.appendChild( a );

        // Insert before the logout item, or append at end
        var logoutItem = document.getElementById( 'pt-logout' );
        if ( logoutItem ) {
            menuList.insertBefore( li, logoutItem );
        } else {
            menuList.appendChild( li );
        }
    } );
}() );