MediaWiki:Gadget-lyrics-options.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

( function ( $, mw ) {
	'use strict';
	
	function makeLanguageSelectorLegacy ( id ) {
		var selector = new OO.ui.ButtonSelectWidget( {
			items: [
				new OO.ui.ButtonOptionWidget( { data: 'jp', label: 'Japanese', selected: true } ),
				new OO.ui.ButtonOptionWidget( { data: 'rm', label: 'Romaji', selected: true } ),
				new OO.ui.ButtonOptionWidget( { data: 'en', label: 'English', selected: true } )
			],
			align: 'left',
			multiselect: true
		} );
		
		function langSelect ( item, selected ) {
			var cssSelector = '#lyrics-' + id + ' .lyric';
			
			var changedLang = item.getData();
			var langSelector = '';
			
			switch( changedLang ) {
				case 'jp':
					langSelector = '.ly-jp';
					break;
				case 'rm':
					langSelector = '.ly-rm';
					break;
				case 'en':
					langSelector = '.ly-en';
					break;
				default:
					return;
			}
			
			$( cssSelector ).each( function() {
				var $ly = $( this ).find( langSelector );
				
				if ( selected ) {
					$ly.show();
				} else {
					$ly.hide();
				}
			} );
			
		}
		
		selector.on( 'choose', langSelect );
		
		return selector;
	}
	
	function makeLanguageSelector ( id, languages, labels ) {
		var selector = new OO.ui.ButtonSelectWidget( {
			items: languages.map( function ( language ) {
				return new OO.ui.ButtonOptionWidget( {
					data: language,
					label: labels[language],
					selected: true
				} );
			} ),
			align: 'left',
			multiselect: true
		} );
		
		function langSelect ( item, selected ) {
			var cssSelector = '#lyrics-' + id + ' .lyric';
			
			var changedLanguage = item.getData();
			var languageSelector = '.lyrics-' + changedLanguage;
			
			$( cssSelector ).each( function () {
				var $lyricsElement = $( this ).find( languageSelector );
				
				if ( selected ) {
					$lyricsElement.show();
				} else {
					$lyricsElement.hide();
				}
			} );
		}
		
		selector.on( 'choose', langSelect );
		
		return selector;
	}
	
	$( function () {
		$( '.lyrics-options' ).each( function () {
			var id = $( this ).data( 'id' );
			var languages = $( this ).data( 'languages' );
			var labels = $( this ).data( 'labels' );
			
			var langSelector;
			if (typeof languages === 'string' && typeof labels !== 'undefined') {
				langSelector = makeLanguageSelector(
					id,
					languages.splti( ',' )
				);
			} else { // legacy mode
				langSelector = makeLanguageSelectorLegacy( id );
			}
			
			var fieldset = new OO.ui.FieldsetLayout( {
				label: 'Lyrics display options'
			} );
			
			fieldset.addItems( [
				new OO.ui.FieldLayout( langSelector, { label: 'Display language', align: 'inline' } )
			] );
				
			$( this ).append( fieldset.$element );
		} );
	} );
	
} )( jQuery, mediaWiki );