跳转到内容

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

来自槌基百科
Fix portlet ID for Vector 2022
Simulate full visitor view: hide user menu + custom buttons, add escape pill
 
(未显示同一用户的6个中间版本)
第1行: 第1行:
/**
/**
  * ViewerMode gadget — toggles a "visitor view" for editors.
  * ViewerMode gadget — simulates a genuine visitor's view as closely as possible.
  * Hides all editing UI so editors can preview the site as a regular visitor.
  * In reader view: hides ALL editor UI (edit buttons, user menu, custom admin buttons).
* An "退出阅读视图" escape pill is fixed bottom-left so you can always get back.
  */
  */
( function () {
( function () {
     'use strict';
     'use strict';


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


     var STORAGE_KEY = 'mw-viewer-mode';
     var STORAGE_KEY = 'mw-viewer-mode';
     var active = localStorage.getItem( STORAGE_KEY ) === '1';
     var active     = localStorage.getItem( STORAGE_KEY ) === '1';
    var btn        = null;  // header pill
    var exitBtn    = null;  // escape pill (bottom-left, only visible in reader view)


    // Apply class immediately to prevent flash of edit elements on load
     if ( active ) { document.documentElement.classList.add( 'viewer-mode' ); }
     if ( active ) {
        document.documentElement.classList.add( 'viewer-mode' );
    }


     function applyMode() {
     function setActive( state ) {
         if ( active ) {
         active = state;
            document.documentElement.classList.add( 'viewer-mode' );
        localStorage.setItem( STORAGE_KEY, active ? '1' : '0' );
         } else {
         document.documentElement.classList.toggle( 'viewer-mode', active );
            document.documentElement.classList.remove( 'viewer-mode' );
         updateUI();
         }
        updateButton();
     }
     }


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


     function updateButton() {
     function updateUI() {
        var link = document.getElementById( 'pt-viewer-mode' );
         if ( btn ) {
         if ( !link ) { return; }
            if ( active ) {
        var a = link.querySelector( 'a' );
                btn.textContent = '📖 阅读视图';
        if ( active ) {
                btn.classList.add( 'vm-active' );
            a.textContent = '⚙ 编辑者模式';
             } else {
            a.title = '切换回编辑者模式(当前:读者视图)';
                btn.textContent = '📖 阅读视图';
             a.style.fontWeight = 'bold';
                btn.classList.remove( 'vm-active' );
        } else {
             }
            a.textContent = '👁 读者模式';
            a.title = '切换到读者模式,预览访客视图';
             a.style.fontWeight = '';
         }
         }
     }
     }


     mw.loader.using( [ 'mediawiki.util' ] ).then( function () {
     $( function () {
         // Vector 2022 uses p-vector-user-menu-overflow for extra user menu items
         /* ── Fix missing icon on "My blog" ─────────────────────── */
        var portlets = [ 'p-vector-user-menu-overflow', 'p-personal' ];
        var blogLink = document.querySelector( '#pt-simpleblog_myblog a' );
         var portletLink = null;
        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 );
         }


         for ( var i = 0; i < portlets.length; i++ ) {
         /* ── Header toggle pill ─────────────────────────────────── */
            portletLink = mw.util.addPortletLink(
        btn = document.createElement( 'button' );
                portlets[ i ],
        btn.id        = 'vm-toggle';
                '#',
        btn.className = 'vm-toggle';
                active ? '⚙ 编辑者模式' : '👁 读者模式',
        btn.textContent = '📖 阅读视图';
                'pt-viewer-mode',
        btn.title    = '模拟访客视图(隐藏所有编辑工具)';
                active ? '切换回编辑者模式(当前:读者视图)' : '切换到读者模式,预览访客视图'
        btn.addEventListener( 'click', toggle );
            );
        if ( active ) { btn.classList.add( 'vm-active' ); }
            if ( portletLink ) {
                break;
            }
        }


         if ( portletLink ) {
         var target = document.querySelector( '.vector-user-links-main' ) ||
            portletLink.querySelector( 'a' ).addEventListener( 'click', function ( e ) {
                    document.querySelector( '.vector-user-links' );
                e.preventDefault();
        if ( target ) { target.insertBefore( btn, target.firstChild ); }
                toggle();
            } );
        }


         applyMode();
         /* ── Escape pill (bottom-left, only shown in reader view) ─ */
        exitBtn = document.createElement( 'button' );
        exitBtn.id        = 'vm-exit';
        exitBtn.className = 'vm-exit';
        exitBtn.innerHTML = '✏️ 退出阅读视图';
        exitBtn.title    = '切换回编辑视图';
        exitBtn.addEventListener( 'click', toggle );
        document.body.appendChild( exitBtn );
     } );
     } );
}() );
}() );

2026年3月12日 (四) 13:26的最新版本

/**
 * ViewerMode gadget — simulates a genuine visitor's view as closely as possible.
 * In reader view: hides ALL editor UI (edit buttons, user menu, custom admin buttons).
 * An "退出阅读视图" escape pill is fixed bottom-left so you can always get back.
 */
( function () {
    'use strict';

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

    var STORAGE_KEY = 'mw-viewer-mode';
    var active      = localStorage.getItem( STORAGE_KEY ) === '1';
    var btn         = null;   // header pill
    var exitBtn     = null;   // escape pill (bottom-left, only visible in reader view)

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

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

    function toggle() { setActive( !active ); }

    function updateUI() {
        if ( btn ) {
            if ( active ) {
                btn.textContent = '📖 阅读视图';
                btn.classList.add( 'vm-active' );
            } else {
                btn.textContent = '📖 阅读视图';
                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 );
        }

        /* ── Header toggle pill ─────────────────────────────────── */
        btn = document.createElement( 'button' );
        btn.id        = 'vm-toggle';
        btn.className = 'vm-toggle';
        btn.textContent = '📖 阅读视图';
        btn.title     = '模拟访客视图(隐藏所有编辑工具)';
        btn.addEventListener( 'click', toggle );
        if ( active ) { btn.classList.add( 'vm-active' ); }

        var target = document.querySelector( '.vector-user-links-main' ) ||
                     document.querySelector( '.vector-user-links' );
        if ( target ) { target.insertBefore( btn, target.firstChild ); }

        /* ── Escape pill (bottom-left, only shown in reader view) ─ */
        exitBtn = document.createElement( 'button' );
        exitBtn.id        = 'vm-exit';
        exitBtn.className = 'vm-exit';
        exitBtn.innerHTML = '✏️ 退出阅读视图';
        exitBtn.title     = '切换回编辑视图';
        exitBtn.addEventListener( 'click', toggle );
        document.body.appendChild( exitBtn );
    } );
}() );