MediaWiki:Gadget-dialogue-options.js

mw.loader.using( ['oojs-ui-core', 'oojs-ui-widgets'] ).done( function() {
	
	function makeLangToggle() {
		var toggle = 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'
		} );
		
		function langToggle( item, selected ) {
			$.cookie( 'dialogue_lang', item.getData(), { expires: 365, path: '/' } );
			
			$( '.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();
				}
			} );
		} 
		
		toggle.on( 'choose', langToggle );
		toggle.on( 'select', langToggle );
		
		var cookie_val = $.cookie( 'dialogue_lang' );
		if ( cookie_val !== 'en' && cookie_val !== 'jp' && cookie_val !== 'both' ) {
			toggle.selectItemByData('en');
		} else {
			toggle.selectItemByData(cookie_val);
		}
		
		return toggle;
	}
	
	function makeLayoutToggle() {
		var toggle = new OO.ui.ButtonSelectWidget( {
			items: [
				new OO.ui.ButtonOptionWidget({ data: 'cozy', label: 'Cozy' }),
				new OO.ui.ButtonOptionWidget({ data: 'compact', label: 'Compact' }),
			],
			align: 'left'
		} );
		
		function changeClass( value, $elem ) {
			if ( value === 'cozy' ) {
				$elem.removeClass( 'compact' );
				$elem.addClass( 'cozy' );
			} else if ( value === 'compact' ) {
				$elem.removeClass( 'cozy' );
				$elem.addClass( 'compact' );
			}
		}
		
		function layoutToggle( item, selected ) {
			$.cookie( 'dialogue_layout', item.getData(), { expires: 365, path: '/' } );
			
			$( '.dialogue' ).each( function() {
				changeClass( item.getData(), $( this ) );
			} );
			$( '.dialogue-scene' ).each( function() {
				changeClass( item.getData(), $( this ) );
			} );
		}
		
		
		toggle.on( 'choose', layoutToggle );
		toggle.on( 'select', layoutToggle );
		
		var cookie_val = $.cookie( 'dialogue_layout' );
		if ( cookie_val !== 'cozy' && cookie_val !== 'compact' ) {
			toggle.selectItemByData('cozy');
		} else {
			toggle.selectItemByData(cookie_val);
		}
		
		return toggle;
	}
	
	function makeColorToggle() {
		var toggle = new OO.ui.CheckboxInputWidget( {
			value: 'colorized',
			selected: false
		} );
		
		function colorToggle( selected ) {
			$.cookie( 'dialogue_colorized', selected, { expires: 365, path: '/' } );
			
			$( '.dialogue-text' ).each( function() {
				if ( selected ) {
					var color = $( this ).attr('data-character-color');
					$( this ).css( 'border-left-color', color );
					$( this ).css( 'border-left-width', 'thick' );
				} else {
					$( this ).css( 'border-left-color', '' );
					$( this ).css( 'border-left-width', '' );
				}
			} );
		}
		
		toggle.on( 'change', colorToggle );
		
		var cookie_val = $.cookie( 'dialogue_colorized' );
		if ( cookie_val !== null ) {
			toggle.setSelected( cookie_val );
		}
		
		return toggle;
	}
	
	function initMarking() {
		$( '.dialogue-text' ).each( function() {
			$( this ).css( 'cursor' , 'pointer' );
			$( this ).attr( 'title', 'Mark' );
			$( this ).click( function () {
				if ( $( this ).hasClass( 'marked' ) ) {
					$( this ).removeClass( 'marked' );
					$( this ).attr( 'title', 'Mark' );
				} else {
					$( this ).addClass( 'marked' );
					$( this ).attr( 'title', 'Unmark' );
				}
			} );
		} );
	}
	
	$( function() {
		var langToggle = makeLangToggle();
		var layoutToggle = makeLayoutToggle();
		var colorToggle = makeColorToggle();
		
		var fieldset = new OO.ui.FieldsetLayout( {
			label: 'Dialogue display options'
		} );
		
		fieldset.addItems( [
			new OO.ui.FieldLayout( langToggle, { label: 'Display language', align: 'inline' } ),
			new OO.ui.FieldLayout( layoutToggle, { label: 'Display layout' , align: 'inline' } ),
			new OO.ui.FieldLayout( colorToggle, { label: 'Show character colors', align: 'inline' } ),
		] );
		
		$( '.dialogue-options' ).append( fieldset.$element );
		
		initMarking();
	} );
});