MediaWiki:Gadget-ViewerMode.js:修订间差异
外观
LocalAdmin(留言 | 贡献) Fix: use direct btn reference so label is set before DOM insertion |
LocalAdmin(留言 | 贡献) Simulate full visitor view: hide user menu + custom buttons, add escape pill |
||
| 第1行: | 第1行: | ||
/** | /** | ||
* ViewerMode gadget — reader | * 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 () { | ( function () { | ||
| 第10行: | 第11行: | ||
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; // | 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' ); } | if ( active ) { document.documentElement.classList.add( 'viewer-mode' ); } | ||
function | function setActive( state ) { | ||
active = state; | |||
localStorage.setItem( STORAGE_KEY, active ? '1' : '0' ); | |||
document.documentElement.classList.toggle( 'viewer-mode', active ); | |||
updateUI(); | |||
} | } | ||
function toggle() { | 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' ); | |||
} | |||
} | |||
} | } | ||
| 第44行: | 第46行: | ||
} | } | ||
/* ── | /* ── Header toggle pill ─────────────────────────────────── */ | ||
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 ); | ||
if ( active ) { btn.classList.add( 'vm-active' ); } | |||
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 ); } | ||
/* ── 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 );
} );
}() );