槌基百科

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

←上一编辑
Redesign: move toggle to header pill, add Chinese labels
Simulate full visitor view: hide user menu + custom buttons, add escape pill
 
（未显示同一用户的1个中间版本）
第1行： 第1行：
/**
/**
  * ViewerMode gadget — reader/editor toggle pill in the site header.
  * ViewerMode gadget — simulates a genuine visitor's view as closely as possible.
  * Also fixes the missing icon on the "My blog" menu item.
* 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 () {
第9行： 第10行：


     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 on load (before DOM ready) to avoid flicker */
     if ( active ) { document.documentElement.classList.add( 'viewer-mode' ); }
     if ( active ) { document.documentElement.classList.add( 'viewer-mode' ); }


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


     /* Label logic:
     function toggle() { setActive( !active ); }
    *  viewer mode OFF → button says "阅读视图"  (click to enter reader view)
 
    *  viewer mode ON  → button says "编辑视图"  (click to return to editor view)
     function updateUI() {
    */
         if ( btn ) {
     function updateBtn() {
            if ( active ) {
        var btn = document.getElementById( 'vm-toggle' );
                btn.textContent = '📖 阅读视图';
         if ( !btn ) { return; }
                btn.classList.add( 'vm-active' );
        if ( active ) {
            } else {
            btn.textContent = '✏️ 编辑视图';
                btn.textContent = '📖 阅读视图';
            btn.title      = '切换回编辑视图';
                btn.classList.remove( 'vm-active' );
            btn.classList.add( 'vm-active' );
            }
        } else {
            btn.textContent = '📖 阅读视图';
            btn.title      = '切换至阅读视图（隐藏编辑工具）';
            btn.classList.remove( 'vm-active' );
         }
         }
     }
     }
第48行： 第46行：
         }
         }


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


        /* Inject into .vector-user-links-main, before the dropdown */
         var target = document.querySelector( '.vector-user-links-main' ) ||
         var target = document.querySelector( '.vector-user-links-main' ) ||
                     document.querySelector( '.vector-user-links' );
                     document.querySelector( '.vector-user-links' );
         if ( target ) {
         if ( target ) { target.insertBefore( btn, target.firstChild ); }
            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 );
     } );
     } );
}() );
}() );
检索自“https://chuihub.com/index.php/MediaWiki:Gadget-ViewerMode.js”