MediaWiki:Gadget-ViewerMode.js：修订间差异

2026年3月12日 (四) 10:12的版本

/**
 * ViewerMode gadget — lets editors preview the site as a regular visitor.
 * 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 immediately to prevent flash of edit elements on load
    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' );
        var icon  = document.querySelector( '#pt-viewer-mode .vector-icon' );
        if ( !label ) { return; }
        if ( active ) {
            label.textContent = 'Editor mode';
            if ( icon ) { icon.className = 'vector-icon mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions'; }
        } else {
            label.textContent = 'Reader view';
            if ( icon ) { icon.className = 'vector-icon mw-ui-icon-eye mw-ui-icon-wikimedia-eye'; }
        }
    }

    $( function () {
        // Fix missing icon on "My blog" — match the exact structure other items use
        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';
            // Insert icon + a plain space before the text span (same pattern as other items)
            blogLink.insertBefore( document.createTextNode( ' ' ), blogLink.firstChild );
            blogLink.insertBefore( blogIcon, blogLink.firstChild );
        }

        // Add viewer-mode toggle to the end of p-personal list
        // (logout lives in its own separate portlet p-user-menu-logout)
        var menuList = document.querySelector( '#p-personal .vector-menu-content-list' );
        if ( !menuList ) { return; }

        var li = document.createElement( 'li' );
        li.id = 'pt-viewer-mode';
        li.className = 'mw-list-item';

        var a = document.createElement( 'a' );
        a.href = '#';

        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 ? 'Editor mode' : 'Reader view';

        a.appendChild( iconSpan );
        a.appendChild( document.createTextNode( ' ' ) );
        a.appendChild( textSpan );
        a.addEventListener( 'click', function ( e ) {
            e.preventDefault();
            toggle();
        } );

        li.appendChild( a );
        menuList.appendChild( li );
    } );
}() );