MediaWiki:Gadget-dialogue-options.js

mw.loader.using( ['oojs-ui-core', 'oojs-ui-widgets'] ).done( function() {
	
	function makeLangToggle() {
		var langToggle = new OO.ui.ButtonSelectWidget( {
			items: [
				new OO.ui.ButtonOptionWidget({ data: 'en', label: 'English' }),
				new OO.ui.ButtonOptionWidget({ data: 'jp', label: 'Japanese' }),
				new OO.ui.ButtonOptionWidget({ data: 'both', label: 'Both' })
			],
			align: 'left'
		} );
		langToggle.selectItemByData('en');
		langToggle.on( 'choose' , function( item, selected ) {
			$( '.dialogue' ).each( function() {
				var $dt_en = $( this ).find( '.dt-en' );
				var $dt_jp = $( this ).find( '.dt-jp' );
				
				if ( item.getData() === 'en' ) {
					$dt_jp.hide();
					$dt_en.show();
				} else if ( item.getData() === 'jp' ) {
					$dt_en.hide();
					$dt_jp.show();
				} else if ( item.getData() === 'both' ) {
					$dt_en.show();
					$dt_jp.show();
				}
			} );
		} );
		
		$( '.dialogue' ).each( function() {
			var $dt_jp = $( this ).find( '.dt-jp' );
			$dt_jp.hide();
		} );
		
		return langToggle;
	}
	
	function makeColorToggle() {
		var colorToggle = new OO.ui.CheckboxInputWidget( {
			value: 'colorized',
			selected: false
		} );
		
		return colorToggle;
	}
	
	$( function() {
		var langToggle = makeLangToggle();
		var colorToggle = makeColorToggle();
		
		var fieldset = new OO.ui.FieldsetLayout( {
			label: 'Dialogue options'
		} );
		
		fieldset.addItems( [
			new OO.ui.FieldLayout( langToggle, { label: 'Display langauge', align: 'inline' }),
			new OO.ui.FieldLayout( colorToggle, { label: 'Show character colors', align: 'inline' } ),
		] );
		
		$( '.dialogue-toggle' ).append( fieldset.$element );
	} );
});