查看“︁MediaWiki:Gadget-ViewerMode.js”︁的源代码

/**
 * 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 READER_ICON  = 'vector-icon mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist';
    var EDITOR_ICON  = 'vector-icon mw-ui-icon-wikiText mw-ui-icon-wikimedia-wikiText';
    var active = localStorage.getItem( STORAGE_KEY ) === '1';

    // Apply immediately 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' );
        var icon  = document.querySelector( '#pt-viewer-mode .vector-icon' );
        if ( !label ) { return; }
        label.textContent   = active ? 'Editor mode' : 'Reader view';
        if ( icon ) { icon.className = active ? EDITOR_ICON : READER_ICON; }
    }

    $( function () {
        // Guard: only run once per page load
        if ( document.getElementById( 'pt-viewer-mode' ) ) { return; }

        // 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( document.createTextNode( ' ' ), blogLink.firstChild );
            blogLink.insertBefore( blogIcon, blogLink.firstChild );
        }

        // Add toggle to end of p-personal list
        // (logout lives in its own 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 ? EDITOR_ICON : READER_ICON;

        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 );
    } );
}() );