User:Cwek/Gadget-PreviewWithVariant.js

/*
  本工具會在「顯示預覽」按鈕增加選單，選單裏有各種地區字詞轉換的語言
  當按下「顯示預覽」後，便會以選單中所選的地區字詞來預覽
  這可以毋須在保存後再切換用字模式才能看到效果，直接用預覽便可檢視各種用字模式，從而減少bug的保存
  
*/

	$(function() {
		
		var isOOUI = $( '.mw-editform-ooui' ).length !== 0;
		
		//偵測「顯示預覽」按鈕
		/*界面未启用OOUI的话，#wpPreviewWidget会找预览按钮；但是启用的话，则找到是按钮所包裹的，span
		 *所以如下区分，以保证找到一定是button而不是其包裹span
		*/
		$(isOOUI?'form#editform[name="editform"] input[type="submit"][name*="wpPreview"][id*="wpPreview"]':'#wpPreview').each( function(){
			var $this=$(this), addVarOpt;
			
			//建立菜單
			var $listVariant=$('<select />').attr("name", "listVariant_"+$this.attr("name")).attr("id", "listVariant_"+$this.attr("id"));
			this.listVariant=$listVariant.get(0);
			
			//建立菜單選項
			(addVarOpt=function(text, variant){
				$listVariant.append( new Option(text, variant, mw.config.get('wgUserVariant')==variant, mw.config.get('wgUserVariant')==variant) );
				return addVarOpt;
			})
			(wgULS("不转换","不轉換"), "zh")
			("简体", "zh-hans")
			("繁體", "zh-hant")
			("大陆简体", "zh-cn")
			("香港繁體", "zh-hk")
			("澳門繁體", "zh-mo")
			("马新简体", "zh-sg")
			("台灣正體", "zh-tw");
			
			/*上述，为了保障OOUI下button所包裹其span的功能，将button与其包裹的span作为整体去调整
			 * 非OOUI则只有按钮，可以直接插入
			 */
			var $insertBlock=isOOUI?$this.parent("span"):$this;
			//安排位置
			$('<span style="border:1px dashed grey; padding: ' + (isOOUI ? '10' : '5') + 'px; white-space: nowrap;">以</span>').append($listVariant).insertAfter($insertBlock).append($insertBlock);
			
			//修改預覽按鈕單擊動作
			$this.click( function(){
				//被按下時在表單傳送字串添加variant參數
				mw.config.set( 'wgUserLanguage', this.listVariant.options[this.listVariant.selectedIndex].value);
				var $form=$(this.form);
				$form.attr("action", $form.attr("action").replace(/\&variant\=[^\&\?\#]*($|\&)/g, "$1").replace(/\?variant\=[^\&\?\#]*(?:$|\&)/, "?").replace(/\?/,"?variant="+this.listVariant.options[this.listVariant.selectedIndex].value+"&").replace(/\&$/, "") );
			});
			
		});
	});