MediaWiki:Gadget-ViewerMode.js

LocalAdmin留言 | 贡献2026年3月12日 (四) 09:57的版本 (读者模式切换 JS)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)

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

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-R(Mac为⌘-R
  • Google Chrome:Ctrl-Shift-R(Mac为⌘-Shift-R
  • Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
/**
 * ViewerMode gadget — toggles a "visitor view" for editors.
 * Hides all editing UI so editors can see how the site looks to visitors.
 */
( function () {
    'use strict';

    if ( !mw.user.isAllowed( 'edit' ) ) {
        return;
    }

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

    if ( active ) {
        document.documentElement.classList.add( 'viewer-mode' );
    }

    function applyMode() {
        if ( active ) {
            document.documentElement.classList.add( 'viewer-mode' );
        } else {
            document.documentElement.classList.remove( 'viewer-mode' );
        }
        updateButton();
    }

    function toggle() {
        active = !active;
        localStorage.setItem( STORAGE_KEY, active ? '1' : '0' );
        applyMode();
    }

    function updateButton() {
        var link = document.getElementById( 'pt-viewer-mode' );
        if ( !link ) { return; }
        var a = link.querySelector( 'a' );
        if ( active ) {
            a.textContent = '⚙ 编辑者模式';
            a.title = '切换回编辑者模式(当前:读者视图)';
        } else {
            a.textContent = '👁 读者模式';
            a.title = '切换到读者模式,查看访客视图';
        }
    }

    mw.loader.using( [ 'mediawiki.util' ] ).then( function () {
        var portletLink = mw.util.addPortletLink(
            'p-personal',
            '#',
            active ? '⚙ 编辑者模式' : '👁 读者模式',
            'pt-viewer-mode',
            active ? '切换回编辑者模式(当前:读者视图)' : '切换到读者模式,查看访客视图',
            null,
            '#pt-preferences'
        );

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

        applyMode();
    } );
}() );