MediaWiki:Common.js：修订间差异

2026年6月8日 (一) 05:49的最新版本

$( function () {
	mw.hook( 'wikiEditor.toolbarReady' ).add( function ( $textarea ) {
		function btn( pre, peri, post, label, cls ) {
			return {
				action: { type: 'encapsulate', options: { pre: pre, peri: peri || '', post: post || '' } },
				label: label,
				cssClass: cls || ''
			};
		}
		$textarea.wikiEditor( 'addToToolbar', {
			sections: {
				noblecraft: {
					type: 'booklet',
					label: 'Noblecraft 格式',
					pages: {
						colors: { layout: 'characters', label: '颜色', characters: [
							btn('{{红|','文字','}}','红','nc-红'),
							btn('{{绿|','文字','}}','绿','nc-绿'),
							btn('{{蓝|','文字','}}','蓝','nc-蓝'),
							btn('{{橙|','文字','}}','橙','nc-橙'),
							btn('{{紫|','文字','}}','紫','nc-紫'),
							btn('{{青|','文字','}}','青','nc-青'),
							btn('{{粉|','文字','}}','粉','nc-粉'),
							btn('{{灰|','文字','}}','灰','nc-灰'),
							btn('{{金|','文字','}}','金','nc-金'),
							btn('{{高亮|','文字','}}','高亮','nc-高亮')
						] },
						callouts: { layout: 'characters', label: '提示框', characters: [
							btn('{{提示|','提示内容','}}','提示'),
							btn('{{警告|','警告内容','}}','警告'),
							btn('{{成功|','内容','}}','成功'),
							btn('{{注释|','内容','}}','注释'),
							btn('{{重要|','内容','}}','重要'),
							btn('{{失败|','内容','}}','失败'),
							btn('{{例子|','内容','}}','例子'),
							btn('{{引用|','内容','}}','引用'),
							btn('{{新手|','内容','}}','新手'),
							btn('{{进阶|','内容','}}','进阶'),
							btn('{{彩蛋|','内容','}}','彩蛋'),
							btn('{{奖励|','内容','}}','奖励'),
							btn('{{更新|','内容','}}','更新'),
							btn('{{过时|','内容','}}','过时')
						] },
						game: { layout: 'characters', label: '游戏元素', characters: [
							btn('{{指令|','/命令','}}','指令'),
							btn('{{命令|语法=/命令|说明=|权限=|示例=}}','','','命令框'),
							btn('{{键|','F3','}}','键'),
							btn('{{坐标|x=','0','|y=0|z=0}}','坐标'),
							btn('{{稀有度|','史诗','}}','稀有度'),
							btn('{{评分星|','4','}}','评分星'),
							btn('{{状态|','可用','}}','状态'),
							btn('{{版本|','1.0','}}','版本')
						] },
						links: { layout: 'characters', label: '链接 / 剧情', characters: [
							btn('{{NPC|','角色名','}}','NPC'),
							btn('{{地点|','地点名','}}','地点'),
							btn('{{物品|','物品名','}}','物品'),
							btn('{{剧透|','剧透内容','}}','剧透'),
							btn('{{对话|角色=角色名|','台词','}}','对话'),
							btn('{{视频|标题=|链接=|平台=}}','','','视频')
						] },
						infobox: { layout: 'characters', label: '信息框', characters: [
							btn(`{{信息框|类型=npc|标题=角色名|图片=|图注=|内容=
{{信息框行|头衔|}}
{{信息框行|所属势力|}}
{{信息框行|所在地|}}
{{信息框行|身份|}}
{{信息框行|登场|}}
}}`,'','','NPC'),
							btn(`{{信息框|类型=place|标题=地点名|图片=|图注=|内容=
{{信息框行|类型|}}
{{信息框行|所在世界|}}
{{信息框行|坐标|}}
{{信息框行|如何到达|}}
{{信息框行|管理者|}}
}}`,'','','地点'),
							btn(`{{信息框|类型=player|标题=玩家ID|图片=|图注=|内容=
{{信息框行|加入时间|}}
{{信息框行|权限组|}}
{{信息框行|所在聚落|}}
{{信息框行|擅长|}}
}}`,'','','玩家'),
							btn(`{{信息框|颜色=#1a6b7d|标题=|图片=|图注=|内容=
{{信息框行||}}
{{信息框行||}}
{{信息框行||}}
}}`,'','','纯色'),
							btn(`{{信息框|颜色=linear-gradient(120deg,#7a5c9a,#9a6fae)|标题=|图片=|图注=|内容=
{{信息框行||}}
{{信息框行||}}
{{信息框行||}}
}}`,'','','渐变')
						] },
						blocks: { layout: 'characters', label: '区块 / 标记', characters: [
                            btn('{{玩家创作|作者=}}','','','玩家创作'),
							btn('{{剧透警告}}','','','剧透警告'),
							btn('{{框|颜色=蓝|','内容','}}','框'),
							btn('{{框|颜色=蓝|标题=标题|','内容','}}','框·标题'),
							btn('{{折叠|标题=标题|','内容','}}','折叠'),
							btn('{{公告|','公告内容','}}','公告'),
							btn('{{主条目|','页面名','}}','主条目'),
							btn('{{参见|','页面名','}}','参见'),
							btn('{{更新日志|版本=|日期=|内容=}}','','','更新日志')
						] },
						maintain: { layout: 'characters', label: '维护标记', characters: [
							btn('{{待补充}}','','','待补充'),
							btn('{{待更新}}','','','待更新'),
							btn('{{草稿}}','','','草稿'),
							btn('{{精选}}','','','精选'),
							btn('{{待删除|','原因','}}','待删除'),
							btn('{{重复|','目标页面','}}','重复'),
							btn('{{消歧义|','当前主题','|其他条目}}','消歧义')
						] }
					}
				}
			}
		} );

		// ===== 🎨 取色按钮 =====
		var NC_PALETTE = [
			'#c0392b','#d35400','#e67e22','#f1c40f','#27ae60','#16a085','#1a6b7d','#0f4c5c',
			'#2c6fb3','#2980b9','#8e44ad','#9b59b6','#34495e','#7f8c8d','#000000','#ffffff'
		];
		var $ncPanel = null;
		function ncApplyColor( hex ) {
			try { localStorage.setItem( 'nc-last-color', hex ); } catch ( e ) {}
			$textarea.textSelection( 'encapsulateSelection',
				{ pre: '{{色|' + hex + '|', peri: '文字', post: '}}', selectPeri: true } );
			ncClosePanel();
		}
		function ncCopyHex( hex, $btn ) {
			try { localStorage.setItem( 'nc-last-color', hex ); } catch ( e ) {}
			function flash() {
				var orig = $btn.html();
				$btn.html( '✓ ' + hex ).css( 'background', '#d4edda' );
				setTimeout( function () { $btn.html( orig ).css( 'background', '#fff' ); }, 1200 );
			}
			if ( navigator.clipboard && navigator.clipboard.writeText ) {
				navigator.clipboard.writeText( hex ).then( flash, fallback );
			} else { fallback(); }
			function fallback() {
				var $tmp = $( '<input>' ).val( hex ).appendTo( document.body );
				$tmp[0].select();
				try { document.execCommand( 'copy' ); } catch ( e ) {}
				$tmp.remove();
				flash();
			}
		}
		function ncClosePanel() {
			if ( $ncPanel ) { $ncPanel.remove(); $ncPanel = null; }
			$( document ).off( 'click.nccolor' );
		}
		function ncTogglePanel() {
			if ( $ncPanel ) { ncClosePanel(); return; }
			$ncPanel = $( '<div class="nc-colorpop">' );
			var $grid = $( '<div class="nc-colorpop-grid">' ).appendTo( $ncPanel );
			NC_PALETTE.forEach( function ( c ) {
				$( '<button type="button" class="nc-swatch">' ).css( 'background', c )
					.attr( 'title', c ).on( 'click', function () { ncApplyColor( c ); } ).appendTo( $grid );
			} );
			var $row = $( '<div class="nc-colorpop-row">' ).appendTo( $ncPanel );
			$( '<label>自定义</label>' ).appendTo( $row );
			var lastColor;
			try { lastColor = localStorage.getItem( 'nc-last-color' ); } catch ( e ) {}
			var $native = $( '<input type="color">' ).val( lastColor || '#1a6b7d' ).appendTo( $row );
			$( '<button type="button" class="nc-colorpop-ok">应用</button>' )
				.on( 'click', function () { ncApplyColor( $native.val() ); } ).appendTo( $row );
			var $copyBtn = $( '<button type="button" class="nc-colorpop-copy" title="复制色值（粘到 {{信息框|颜色=}} 等参数里）">📋</button>' )
				.css( {
					padding: '3px 10px', border: '1px solid #c8c2b4', background: '#fff',
					borderRadius: '4px', cursor: 'pointer', marginLeft: '4px', fontSize: '13px', minWidth: '40px'
				} );
			$copyBtn.on( 'click', function () { ncCopyHex( $native.val(), $copyBtn ); } );
			$copyBtn.appendTo( $row );
			$( '<div class="nc-colorpop-hint">' )
				.html( '💡 点上方取色器先选好颜色，再点 <b>📋</b> 即可复制色值，可粘到 <code>{{信息框|颜色=...}}</code> 等参数里使用。' )
				.css( {
					marginTop: '8px', paddingTop: '8px', borderTop: '1px solid #eee',
					fontSize: '11px', color: '#666', lineHeight: '1.5', maxWidth: '220px'
				} )
				.appendTo( $ncPanel );
			$ncPanel.appendTo( document.body );
			var $btn = $( '.tool[rel="nccolorpicker"]' );
			var off = $btn.length ? $btn.offset() : { top: 120, left: 120 };
			$ncPanel.css( { top: ( off.top + 30 ) + 'px', left: off.left + 'px' } );
			setTimeout( function () {
				$( document ).on( 'click.nccolor', function ( e ) {
					if ( !$( e.target ).closest( '.nc-colorpop, .tool[rel="nccolorpicker"]' ).length ) ncClosePanel();
				} );
			}, 0 );
		}
		$textarea.wikiEditor( 'addToToolbar', {
			section: 'main',
			group: 'format',
			tools: {
				nccolorpicker: {
					label: '🎨 颜色',
					type: 'button',
					action: { type: 'callback', execute: function () { ncTogglePanel(); } }
				}
			}
		} );
	} );
} );