User:SinonJZH/js/PreviewWithVariant.js

// @author Tranve
// @license MIT
// <nowiki>

( function () {
	if (
		!mw.config.get( 'wgAction' ).match( /^(edit|submit)$/ ) ||
		mw.config.get( 'wgPageContentModel' ) !== 'wikitext'
	) {
		return;
	}

	mw.messages.set( {
		'pwv-previewwith': wgULS( '预览字词转换', '預覽字詞轉換' ),
		'pwv-dropdown': wgULS( '使用该语言变体显示预览：', '使用該語言變體顯示預覽：' ),
		'pwv-zh': wgULS( '不转换', '不轉換' ),
		'pwv-zh-hans': '简体',
		'pwv-zh-hant': '繁體',
		'pwv-zh-cn': '大陆简体',
		'pwv-zh-hk': '香港繁體',
		'pwv-zh-tw': '臺灣繁體'
	} );

	var DATA = [
		{ var: 'zh', msg: 'pwv-zh' },
		{ var: 'zh-hans', msg: 'pwv-zh-hans' },
		{ var: 'zh-hant', msg: 'pwv-zh-hant' },
		{ var: 'zh-cn', msg: 'pwv-zh-cn' },
		{ var: 'zh-hk', msg: 'pwv-zh-hk' },
		{ var: 'zh-tw', msg: 'pwv-zh-tw' }
	];
	var OLD_VARIANT = mw.config.get( 'wgUserVariant' );

	function createMenus() {
		return DATA.map( function ( item ) {
			return new OO.ui.MenuOptionWidget( {
				data: item.var,
				label: mw.msg( item.msg ) /* eslint-disable-line mediawiki/msg-doc */
			} );
		} );
	}

	function applyVariant( $form, variant ) {
		$form.attr(
			'action',
			new mw.Uri( $form.attr( 'action' ) )
				.extend( { variant: variant } )
				.getRelativePath()
		);
	}

	function getCheckboxState() {
		return Object.hasOwnProperty.call( new mw.Uri().query, 'variant' );
	}

	function init() {
		var $layout, $editForm, checkbox, checkboxField, dropdown, dropdownField;

		$layout = $( '.editCheckboxes .oo-ui-horizontalLayout' );
		if ( !$layout.length ) {
			return;
		}

		$editForm = $( '#editform' );
		checkbox = new OO.ui.CheckboxInputWidget( {
			selected: getCheckboxState()
		} );
		checkboxField = new OO.ui.FieldLayout( checkbox, {
			align: 'inline',
			label: mw.msg( 'pwv-previewwith' )
		} );
		dropdown = new OO.ui.DropdownWidget( {
			$overlay: true,
			disabled: !checkbox.isSelected(),
			menu: {
				items: createMenus()
			}
		} );
		dropdownField = new OO.ui.FieldLayout( dropdown, {
			align: 'top',
			label: mw.msg( 'pwv-dropdown' ),
			invisibleLabel: true
		} );

		dropdown.getMenu().selectItemByData( mw.config.get( 'wgUserVariant' ) );
		checkbox.on( 'change', function ( selected ) {
			dropdown.setDisabled( !selected );
		} );
		$( '#wpPreview, input[name=wpTemplateSandboxPreview]' ).on( 'click.pwv', function () {
			if ( checkbox.isSelected() ) {
				applyVariant( $editForm, dropdown.getMenu().findSelectedItem().getData() );
			}
		}
		);

		if ( mw.user.options.get( 'uselivepreview' ) ) {
			$( '#wpPreview' ).off( 'click.pwv' ).on( 'click.pwv', function () {
				var variant = dropdown.getMenu().findSelectedItem().getData();
				// FIXME: wgUserLanguage should be changed to wgUserVariant
				// After T284625 is resolved
				mw.config.set( 'wgUserLanguage', checkbox.isSelected() ? variant : OLD_VARIANT );
			} );
		}

		$layout.append( checkboxField.$element, dropdownField.$element );
	}

	$( init );
}() );

mw.loader.using( 'ext.visualEditor.desktopArticleTarget.init' ).then(function () {
	mw.libs.ve.addPlugin( 'ext.gadget.PreviewWithVariant2017' );
} );
// </nowiki>