MediaWiki:Gadget-ViewerMode.js - 版本历史

LocalAdmin：Simulate full visitor view: hide user menu + custom buttons, add escape pill

2026-03-12T13:26:47Z

Simulate full visitor view: hide user menu + custom buttons, add escape pill

←上一版本		2026年3月12日 (四) 13:26的版本
第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 () {
第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; // ~~set once DOM is ready~~		var btn = null; // header pill
			var exitBtn = null; // escape pill (bottom-left, only visible in reader view)

	~~/* Apply class immediately to avoid flicker */~~
	if ( active ) { document.documentElement.classList.add( 'viewer-mode' ); }		if ( active ) { document.documentElement.classList.add( 'viewer-mode' ); }

	function ~~updateBtn~~() {		function setActive( state ) {
	~~if ( !btn ) { return~~; }		active = state;
	if ( active ~~) {~~		localStorage.setItem( STORAGE_KEY, active ? '1' : '0' );
	~~btn.textContent =~~ '~~✏️ 编辑视图~~';		document.documentElement.classList.toggle( 'viewer-mode', active );
	~~btn.title =~~ '~~切换回编辑视图~~';		updateUI();
	~~btn~~.classList.~~add~~( 'vm-active' );
	~~} else {~~
	~~btn.textContent = '📖 阅读视图';~~
	~~btn.title = '切换至阅读视图（隐藏编辑工具）';~~
	~~btn.classList.remove~~( ~~'vm-active'~~ );
	}
	}		}

	function toggle() {		function toggle() { setActive( !active ); }
	~~active =~~ !active;
	~~localStorage.setItem~~( ~~STORAGE_KEY,~~ active ? '1' : '0' );		function updateUI() {
	~~document~~.~~documentElement~~.classList.~~toggle~~( '~~viewer~~-~~mode~~'~~, active~~ );		if ( btn ) {
	~~updateBtn();~~		if ( active ) {
			btn.textContent = '📖 阅读视图';
			btn.classList.add( 'vm-active' );
			} else {
			btn.textContent = '📖 阅读视图';
			btn.classList.remove( 'vm-active' );
			}
			}
	}		}

第44行：		第46行：
	}		}

	/* ── ~~Build~~ toggle pill ~~and set its label immediately ──────~~ */		/* ── 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 );
	~~updateBtn~~(); ~~// btn is now in scope — label is set before insertion~~		if ( active ) { btn.classList.add( 'vm-active' ); }

	~~/* Inject into header user-links area */~~
	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 );
	} );		} );
	}() );		}() );

LocalAdmin：Fix: use direct btn reference so label is set before DOM insertion

2026-03-12T13:23:10Z

Fix: use direct btn reference so label is set before DOM insertion

←上一版本		2026年3月12日 (四) 13:23的版本
第9行：		第9行：

	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; // set once DOM is ready

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

	~~/* Label logic:~~
	* viewer mode OFF → button says "阅读视图" (click to enter reader view)
	* viewer mode ON → button says "编辑视图" (click to return to editor view)
	*/
	function updateBtn() {		function updateBtn() {
	~~var btn = document.getElementById( 'vm-toggle' );~~
	if ( !btn ) { return; }		if ( !btn ) { return; }
	if ( active ) {		if ( active ) {
第37行：		第26行：
	btn.classList.remove( 'vm-active' );		btn.classList.remove( 'vm-active' );
	}		}
			}

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

第48行：		第44行：
	}		}

	/* ── Build toggle pill ~~────────────────────────────────────~~ */		/* ── Build toggle pill and set its label immediately ────── */
	~~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.addEventListener( 'click', toggle );		btn.addEventListener( 'click', toggle );
	updateBtn();		updateBtn(); // btn is now in scope — label is set before insertion

	/* Inject into ~~.vector-~~user-links~~-main, before the dropdown~~ */		/* Inject into header user-links area */
	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' );

LocalAdmin：Redesign: move toggle to header pill, add Chinese labels

2026-03-12T13:21:52Z

Redesign: move toggle to header pill, add Chinese labels

←上一版本		2026年3月12日 (四) 13:21的版本
第1行：		第1行：
	/**		/**
	* ViewerMode gadget — ~~lets editors preview~~ the site ~~as a regular visitor~~.		* ViewerMode gadget — reader/editor toggle pill in the site header.
	* Also fixes the missing icon on the "My blog" menu item.		* Also fixes the missing icon on the "My blog" menu item.
	*/		*/
第8行：		第8行：
	if ( mw.user.isAnon() ) { return; }		if ( mw.user.isAnon() ) { return; }

	var STORAGE_KEY = 'mw-viewer-mode';		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';		var active = localStorage.getItem( STORAGE_KEY ) === '1';

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

	function toggle() {		function toggle() {
第22行：		第18行：
	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 );
	~~updateButton~~();		updateBtn();
	}		}

	~~function updateButton~~() {		/* Label logic:
	~~var label = document.querySelector( '#pt-~~viewer-mode ~~.viewer-mode-label'~~ );		* viewer mode OFF → button says "阅读视图" (click to enter reader view)
	var ~~icon~~ = document.~~querySelector~~( '~~#pt-viewer~~-~~mode .vector-icon~~' );		* viewer mode ON → button says "编辑视图" (click to return to editor view)
	if ( !~~label~~ ) { return; }		*/
	~~label~~.textContent = ~~active ?~~ '~~Editor mode~~' : '~~Reader view~~';		function updateBtn() {
	if ( ~~icon~~ ) { ~~icon~~.~~className~~ = active ~~? EDITOR_ICON : READER_ICON~~; }		var btn = document.getElementById( 'vm-toggle' );
			if ( !btn ) { return; }
			if ( active ) {
			btn.textContent = '✏️ 编辑视图';
			btn.title = '切换回编辑视图';
			btn.classList.add( 'vm-active' );
			} else {
			btn.textContent = '📖 阅读视图';
			btn.title = '切换至阅读视图（隐藏编辑工具）';
			btn.classList.remove( 'vm-active' );
			}
	}		}

	$( function () {		$( function () {
	/~~/ Guard: only run once per page load~~		/* ── Fix missing icon on "My blog" ─────────────────────── */
	~~if ( document.getElementById( 'pt-viewer-mode' ) ) { return; }~~

	// Fix missing icon on "My blog"
	var blogLink = document.querySelector( '#pt-simpleblog_myblog a' );		var blogLink = document.querySelector( '#pt-simpleblog_myblog a' );
	if ( blogLink && !blogLink.querySelector( '.vector-icon' ) ) {		if ( blogLink && !blogLink.querySelector( '.vector-icon' ) ) {
	var blogIcon = document.createElement( 'span' );		var blogIcon = document.createElement( 'span' );
	blogIcon.className = 'vector-icon mw-ui-icon-article mw-ui-icon-wikimedia-article';		blogIcon.className = 'vector-icon mw-ui-icon-article mw-ui-icon-wikimedia-article';
	~~blogLink.insertBefore( document.createTextNode( ' ' ), blogLink.firstChild );~~
	blogLink.insertBefore( blogIcon, blogLink.firstChild );		blogLink.insertBefore( blogIcon, blogLink.firstChild );
	}		}

	/~~/ Add~~ toggle ~~to end of p-personal list~~		/* ── Build toggle pill ──────────────────────────────────── */
	/~~/ (logout lives in its own portlet: p-user-menu-logout)~~		var btn = document.createElement( 'button' );
	var ~~menuList~~ = document.~~querySelector~~( '#p-~~personal~~ .~~vector~~-~~menu-content-list~~' );		btn.id = 'vm-toggle';
	if ( ~~!menuList~~ ) ~~{ return~~; }		btn.className = 'vm-toggle';
			btn.addEventListener( 'click', toggle );
			updateBtn();

	~~var li = document.createElement( 'li' );~~		/* Inject into .vector-user-links-main, before the dropdown */
	li.~~id = 'pt~~-~~viewer~~-~~mode';~~		var target = document.querySelector( '.vector-user-links-main' ) \|\|
	~~li.className = 'mw~~-~~list-item';~~		document.querySelector( '.vector-user-links' );
			if ( target ) {
	var a = document.~~createElement~~( '~~a' );~~		target.insertBefore( btn, target.firstChild );
	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 );~~
	} );		} );
	}() );		}() );

LocalAdmin：Add double-run guard to prevent duplicate menu items

2026-03-12T10:42:49Z

Add double-run guard to prevent duplicate menu items

←上一版本		2026年3月12日 (四) 10:42的版本
第8行：		第8行：
	if ( mw.user.isAnon() ) { return; }		if ( mw.user.isAnon() ) { return; }

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

			// Apply immediately to prevent flash of edit elements
	if ( active ) {		if ( active ) {
	document.documentElement.classList.add( 'viewer-mode' );		document.documentElement.classList.add( 'viewer-mode' );
第28行：		第29行：
	var icon = document.querySelector( '#pt-viewer-mode .vector-icon' );		var icon = document.querySelector( '#pt-viewer-mode .vector-icon' );
	if ( !label ) { return; }		if ( !label ) { return; }
	~~if ( active ) {~~		label.textContent = active ? 'Editor mode' : 'Reader view';
	label.textContent = 'Editor mode';		if ( icon ) { icon.className = active ? EDITOR_ICON : READER_ICON; }
	~~if ( icon ) { icon.className = EDITOR_ICON; }~~
	~~} else {~~
	~~label.textContent =~~ 'Reader view';
	if ( icon ) { icon.className = READER_ICON; }
	}
	}		}

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

	// Fix missing icon on "My blog"		// Fix missing icon on "My blog"
	var blogLink = document.querySelector( '#pt-simpleblog_myblog a' );		var blogLink = document.querySelector( '#pt-simpleblog_myblog a' );
第47行：		第46行：
	}		}

	// Add ~~viewer-mode~~ toggle at end of p-personal list		// Add toggle to end of p-personal list
	// (logout is in its own ~~separate~~ portlet: p-user-menu-logout)		// (logout lives in its own portlet: p-user-menu-logout)
	var menuList = document.querySelector( '#p-personal .vector-menu-content-list' );		var menuList = document.querySelector( '#p-personal .vector-menu-content-list' );
	if ( !menuList ) { return; }		if ( !menuList ) { return; }

	var li = document.createElement( 'li' );		var li = document.createElement( 'li' );
	li.id = 'pt-viewer-mode';		li.id = 'pt-viewer-mode';
	li.className = 'mw-list-item';		li.className = 'mw-list-item';

第63行：		第62行：

	var textSpan = document.createElement( 'span' );		var textSpan = document.createElement( 'span' );
	textSpan.className = 'viewer-mode-label';		textSpan.className = 'viewer-mode-label';
	textSpan.textContent = active ? 'Editor mode' : 'Reader view';		textSpan.textContent = active ? 'Editor mode' : 'Reader view';

LocalAdmin：Use confirmed-available icons: watchlist for reader, wikiText for editor

2026-03-12T10:15:34Z

Use confirmed-available icons: watchlist for reader, wikiText for editor

←上一版本		2026年3月12日 (四) 10:15的版本
第6行：		第6行：
	'use strict';		'use strict';

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

	var STORAGE_KEY = 'mw-viewer-mode';		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';		var active = localStorage.getItem( STORAGE_KEY ) === '1';

	~~// Apply immediately to prevent flash of edit elements on load~~
	if ( active ) {		if ( active ) {
	document.documentElement.classList.add( 'viewer-mode' );		document.documentElement.classList.add( 'viewer-mode' );
第31行：		第30行：
	if ( active ) {		if ( active ) {
	label.textContent = 'Editor mode';		label.textContent = 'Editor mode';
	if ( icon ) { icon.className = ~~'vector-icon mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions'~~; }		if ( icon ) { icon.className = EDITOR_ICON; }
	} else {		} else {
	label.textContent = 'Reader view';		label.textContent = 'Reader view';
	if ( icon ) { icon.className = ~~'vector-icon mw-ui-icon-eye mw-ui-icon-wikimedia-eye'~~; }		if ( icon ) { icon.className = READER_ICON; }
	}		}
	}		}

	$( function () {		$( function () {
	// Fix missing icon on "My blog" ~~— match the exact structure other items use~~		// Fix missing icon on "My blog"
	var blogLink = document.querySelector( '#pt-simpleblog_myblog a' );		var blogLink = document.querySelector( '#pt-simpleblog_myblog a' );
	if ( blogLink && !blogLink.querySelector( '.vector-icon' ) ) {		if ( blogLink && !blogLink.querySelector( '.vector-icon' ) ) {
	var blogIcon = document.createElement( 'span' );		var blogIcon = document.createElement( 'span' );
	blogIcon.className = 'vector-icon mw-ui-icon-article mw-ui-icon-wikimedia-article';		blogIcon.className = 'vector-icon mw-ui-icon-article mw-ui-icon-wikimedia-article';
	~~// Insert icon + a plain space before the text span (same pattern as other items)~~
	blogLink.insertBefore( document.createTextNode( ' ' ), blogLink.firstChild );		blogLink.insertBefore( document.createTextNode( ' ' ), blogLink.firstChild );
	blogLink.insertBefore( blogIcon, blogLink.firstChild );		blogLink.insertBefore( blogIcon, blogLink.firstChild );
	}		}

	// Add viewer-mode toggle ~~to the~~ end of p-personal list		// Add viewer-mode toggle at end of p-personal list
	// (logout ~~lives~~ in its own separate portlet p-user-menu-logout)		// (logout is in its own separate portlet: p-user-menu-logout)
	var menuList = document.querySelector( '#p-personal .vector-menu-content-list' );		var menuList = document.querySelector( '#p-personal .vector-menu-content-list' );
	if ( !menuList ) { return; }		if ( !menuList ) { return; }
第62行：		第60行：

	var iconSpan = document.createElement( 'span' );		var iconSpan = document.createElement( 'span' );
	iconSpan.className = active		iconSpan.className = active ? EDITOR_ICON : READER_ICON;
	? ~~'vector-icon mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions'~~
	: ~~'vector-icon mw-ui-icon-eye mw-ui-icon-wikimedia-eye'~~;

	var textSpan = document.createElement( 'span' );		var textSpan = document.createElement( 'span' );

LocalAdmin：Fix DOM injection: logout in separate portlet; fix My blog spacing

2026-03-12T10:12:38Z

Fix DOM injection: logout in separate portlet; fix My blog spacing

←上一版本		2026年3月12日 (四) 10:12的版本
第1行：		第1行：
	/**		/**
	* ViewerMode gadget — lets editors preview the site as a regular visitor.		* ViewerMode gadget — lets editors preview the site as a regular visitor.
	* Also fixes the missing icon on the "~~我的博客~~" menu item.		* Also fixes the missing icon on the "My blog" menu item.
	*/		*/
	( function () {		( function () {
	'use strict';		'use strict';

	~~// Only run for logged-in users~~
	if ( mw.user.isAnon() ) {		if ( mw.user.isAnon() ) {
	return;		return;
第14行：		第13行：
	var active = localStorage.getItem( STORAGE_KEY ) === '1';		var active = localStorage.getItem( STORAGE_KEY ) === '1';

	// Apply ~~class~~ immediately ~~on load~~ to prevent flash of edit elements		// Apply immediately to prevent flash of edit elements on load
	if ( active ) {		if ( active ) {
	document.documentElement.classList.add( 'viewer-mode' );		document.documentElement.classList.add( 'viewer-mode' );
第28行：		第27行：
	function updateButton() {		function updateButton() {
	var label = document.querySelector( '#pt-viewer-mode .viewer-mode-label' );		var label = document.querySelector( '#pt-viewer-mode .viewer-mode-label' );
			var icon = document.querySelector( '#pt-viewer-mode .vector-icon' );
	if ( !label ) { return; }		if ( !label ) { return; }
	label.textContent = ~~active ? '编辑者模式' : '读者模式';~~		if ( active ) {
	~~var icon = document.querySelector(~~ '~~#pt-viewer-~~mode ~~.vector-icon~~' );		label.textContent = 'Editor mode';
	if ( icon ) {		if ( icon ) { icon.className = 'vector-icon mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions'; }
	icon.className = ~~active~~		} else {
	? 'vector-icon mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions'		label.textContent = 'Reader view';
	: 'vector-icon mw-ui-icon-eye mw-ui-icon-wikimedia-eye';		if ( icon ) { icon.className = 'vector-icon mw-ui-icon-eye mw-ui-icon-wikimedia-eye'; }
	}		}
	}		}

	$( function () {		$( function () {
	// ~~---~~ Fix missing icon on ~~我的博客 ---~~		// Fix missing icon on "My blog" — match the exact structure other items use
	var blogLink = document.querySelector( '#pt-simpleblog_myblog a' );		var blogLink = document.querySelector( '#pt-simpleblog_myblog a' );
	if ( blogLink && !blogLink.querySelector( '.vector-icon' ) ) {		if ( blogLink && !blogLink.querySelector( '.vector-icon' ) ) {
	var blogIcon = document.createElement( 'span' );		var blogIcon = document.createElement( 'span' );
	blogIcon.className = 'vector-icon mw-ui-icon-article mw-ui-icon-wikimedia-article';		blogIcon.className = 'vector-icon mw-ui-icon-article mw-ui-icon-wikimedia-article';
			// Insert icon + a plain space before the text span (same pattern as other items)
			blogLink.insertBefore( document.createTextNode( ' ' ), blogLink.firstChild );
	blogLink.insertBefore( blogIcon, blogLink.firstChild );		blogLink.insertBefore( blogIcon, blogLink.firstChild );
	~~blogLink.insertBefore( document.createTextNode( '\u00a0' ), blogIcon.nextSibling );~~
	}		}

	// ~~---~~ Add viewer-mode toggle to personal ~~menu~~ ---		// Add viewer-mode toggle to the end of p-personal list
			// (logout lives in its own separate portlet p-user-menu-logout)
	var menuList = document.querySelector( '#p-personal .vector-menu-content-list' );		var menuList = document.querySelector( '#p-personal .vector-menu-content-list' );
	if ( !menuList ) { return; }		if ( !menuList ) { return; }

	~~// Only show toggle if user has any edit controls on this page~~
	~~// (safe for all logged-in users; harmless if no edit controls exist)~~
	var li = document.createElement( 'li' );		var li = document.createElement( 'li' );
	li.id = 'pt-viewer-mode';		li.id = 'pt-viewer-mode';
第60行：		第60行：
	var a = document.createElement( 'a' );		var a = document.createElement( 'a' );
	a.href = '#';		a.href = '#';
	~~a.title = active ? '切换回编辑者模式' : '切换到读者模式，预览访客视图';~~

	var iconSpan = document.createElement( 'span' );		var iconSpan = document.createElement( 'span' );
第69行：		第68行：
	var textSpan = document.createElement( 'span' );		var textSpan = document.createElement( 'span' );
	textSpan.className = 'viewer-mode-label';		textSpan.className = 'viewer-mode-label';
	textSpan.textContent = active ? '~~编辑者模式~~' : '~~读者模式~~';		textSpan.textContent = active ? 'Editor mode' : 'Reader view';

	a.appendChild( iconSpan );		a.appendChild( iconSpan );
	a.appendChild( document.createTextNode( '~~\u00a0~~' ) );		a.appendChild( document.createTextNode( ' ' ) );
	a.appendChild( textSpan );		a.appendChild( textSpan );

	a.addEventListener( 'click', function ( e ) {		a.addEventListener( 'click', function ( e ) {
	e.preventDefault();		e.preventDefault();
第81行：		第79行：

	li.appendChild( a );		li.appendChild( a );
			menuList.appendChild( li );
	~~// Insert before the logout item, or append at end~~
	~~var logoutItem = document.getElementById( 'pt-logout' );~~
	~~if ( logoutItem ) {~~
	~~menuList.insertBefore( li, logoutItem );~~
	~~} else {~~
	menuList.appendChild( li );
	}
	} );		} );
	}() );		}() );

LocalAdmin：直接注入DOM，修复Vector 2022兼容性，补全我的博客图标

2026-03-12T10:08:27Z

直接注入DOM，修复Vector 2022兼容性，补全我的博客图标

显示更改

LocalAdmin：Fix portlet ID for Vector 2022

2026-03-12T10:01:57Z

Fix portlet ID for Vector 2022

←上一版本		2026年3月12日 (四) 10:01的版本
第1行：		第1行：
	/**		/**
	* ViewerMode gadget — toggles a "visitor view" for editors.		* ViewerMode gadget — toggles a "visitor view" for editors.
	* Hides all editing UI so editors can ~~see how~~ the site ~~looks to visitors~~.		* Hides all editing UI so editors can preview the site as a regular visitor.
	*/		*/
	( function () {		( function () {
第13行：		第13行：
	var active = localStorage.getItem( STORAGE_KEY ) === '1';		var active = localStorage.getItem( STORAGE_KEY ) === '1';

			// Apply class immediately to prevent flash of edit elements on load
	if ( active ) {		if ( active ) {
	document.documentElement.classList.add( 'viewer-mode' );		document.documentElement.classList.add( 'viewer-mode' );
第39行：		第40行：
	a.textContent = '⚙ 编辑者模式';		a.textContent = '⚙ 编辑者模式';
	a.title = '切换回编辑者模式（当前：读者视图）';		a.title = '切换回编辑者模式（当前：读者视图）';
			a.style.fontWeight = 'bold';
	} else {		} else {
	a.textContent = '👁 读者模式';		a.textContent = '👁 读者模式';
	a.title = '~~切换到读者模式，查看访客视图~~';		a.title = '切换到读者模式，预览访客视图';
			a.style.fontWeight = '';
	}		}
	}		}

	mw.loader.using( [ 'mediawiki.util' ] ).then( function () {		mw.loader.using( [ 'mediawiki.util' ] ).then( function () {
	var portletLink = mw.util.addPortletLink(		// Vector 2022 uses p-vector-user-menu-overflow for extra user menu items
	~~'p-personal'~~,		var portlets = [ 'p-vector-user-menu-overflow', 'p-personal' ];
	'#',		var portletLink = null;
	active ? '⚙ 编辑者模式' : '👁 读者模式',
	'pt-viewer-mode',		for ( var i = 0; i < portlets.length; i++ ) {
	active ? '切换回编辑者模式（当前：读者视图）' : '~~切换到读者模式，查看访客视图~~',		portletLink = mw.util.addPortletLink(
	~~null,~~		portlets[ i ],
	~~'#pt-preferences'~~		'#',
	);		active ? '⚙ 编辑者模式' : '👁 读者模式',
			'pt-viewer-mode',
			active ? '切换回编辑者模式（当前：读者视图）' : '切换到读者模式，预览访客视图'
			);
			if ( portletLink ) {
			break;
			}
			}

	if ( portletLink ) {		if ( portletLink ) {

LocalAdmin：读者模式切换 JS

2026-03-12T09:57:08Z

读者模式切换 JS

新页面

/**
* ViewerMode gadget — toggles a "visitor view" for editors.
* Hides all editing UI so editors can see how the site looks to visitors.
*/
( function () {
'use strict';

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

var STORAGE_KEY = 'mw-viewer-mode';
var active = localStorage.getItem( STORAGE_KEY ) === '1';

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

function applyMode() {
if ( active ) {
document.documentElement.classList.add( 'viewer-mode' );
} else {
document.documentElement.classList.remove( 'viewer-mode' );
}
updateButton();
}

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

function updateButton() {
var link = document.getElementById( 'pt-viewer-mode' );
if ( !link ) { return; }
var a = link.querySelector( 'a' );
if ( active ) {
a.textContent = '⚙ 编辑者模式';
a.title = '切换回编辑者模式（当前：读者视图）';
} else {
a.textContent = '👁 读者模式';
a.title = '切换到读者模式，查看访客视图';
}
}

mw.loader.using( [ 'mediawiki.util' ] ).then( function () {
var portletLink = mw.util.addPortletLink(
'p-personal',
'#',
active ? '⚙ 编辑者模式' : '👁 读者模式',
'pt-viewer-mode',
active ? '切换回编辑者模式（当前：读者视图）' : '切换到读者模式，查看访客视图',
null,
'#pt-preferences'
);

if ( portletLink ) {
portletLink.querySelector( 'a' ).addEventListener( 'click', function ( e ) {
e.preventDefault();
toggle();
} );
}

applyMode();
} );
}() );

MediaWiki:Gadget-ViewerMode.js - 版本历史

LocalAdmin：​Simulate full visitor view: hide user menu + custom buttons, add escape pill

LocalAdmin：​Fix: use direct btn reference so label is set before DOM insertion

LocalAdmin：​Redesign: move toggle to header pill, add Chinese labels

LocalAdmin：​Add double-run guard to prevent duplicate menu items

LocalAdmin：​Use confirmed-available icons: watchlist for reader, wikiText for editor

LocalAdmin：​Fix DOM injection: logout in separate portlet; fix My blog spacing

LocalAdmin：​直接注入DOM，修复Vector 2022兼容性，补全我的博客图标

LocalAdmin：​Fix portlet ID for Vector 2022

LocalAdmin：​读者模式切换 JS