MediaWiki:Gadget-lyrics-options.js

( function ( $, mw ) {
	'use strict';
	
	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 + ' .lyrics-row';
			
			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' );
			
			if (
				typeof languages !== 'string' ||
				languages.length === 0
			) {
				console.error(
					'Lyrics options ' + 
					'#' + id + ': ' +
					'Unable to get columns.'
				);
				return;
			}
			
			var languagesList = languages.split( ',' )
				.filter( function ( language ) {
					return language.length > 0;
				} );
			
			for ( var i = 0; i < languagesList.length; i++ ) {
				var language = languagesList[i];
				if (!(language in labels)) {
					console.error(
						'Lyrics options ' +
						'#' + id + ': ' +
						'No label found for column "' + language + '".' 
					);
					return;
				}
			}
			
			if (languagesList.length <= 1) {
				// Do not add options for tables with one column or less
				return;
			}
			
			var langSelector = makeLanguageSelector( id, languagesList, labels );
			
			var fieldset = new OO.ui.FieldsetLayout( {
				label: 'Lyrics display options'
			} );
		
			fieldset.addItems( [
				new OO.ui.FieldLayout( 
					langSelector,
					{ label: 'Visible columns', align: 'inline' } 
				)
			] );
			
			$( this ).append( fieldset.$element );
		} );
	} );
	
} )( jQuery, mediaWiki );