MediaWiki:Gadget-ViewerMode.js:修订间差异
外观
LocalAdmin(留言 | 贡献) 读者模式切换 JS |
LocalAdmin(留言 | 贡献) Simulate full visitor view: hide user menu + custom buttons, add escape pill |
||
| (未显示同一用户的7个中间版本) | |||
| 第1行: | 第1行: | ||
/** | /** | ||
* ViewerMode gadget — | * 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 () { | ||
'use strict'; | 'use strict'; | ||
if ( | if ( mw.user.isAnon() ) { 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) | |||
if ( active ) { | if ( active ) { document.documentElement.classList.add( 'viewer-mode' ); } | ||
document.documentElement.classList. | |||
function setActive( state ) { | |||
active = state; | |||
localStorage.setItem( STORAGE_KEY, active ? '1' : '0' ); | |||
document.documentElement.classList.toggle( 'viewer-mode', active ); | |||
updateUI(); | |||
} | } | ||
function | function toggle() { setActive( !active ); } | ||
if ( active ) { | |||
function updateUI() { | |||
if ( btn ) { | |||
if ( active ) { | |||
btn.textContent = '📖 阅读视图'; | |||
btn.classList.add( 'vm-active' ); | |||
} else { | |||
btn.textContent = '📖 阅读视图'; | |||
btn.classList.remove( 'vm-active' ); | |||
} | |||
} | } | ||
} | } | ||
function | $( 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 ); | |||
var | |||
if ( ! | |||
} | } | ||
/* ── 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 ); | |||
} ); | } ); | ||
}() ); | }() ); | ||
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 );
} );
}() );