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 makeLanguageSelector( 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() {
$( '.lyrics-options' ).each( function () {
var id = $( this ).data( 'id' );
var languages = $( this ).data( 'languages' );
var fieldset = new OO.ui.FieldsetLayout( {
label: 'Lyrics display options'
} );
var langSelector = makeLanguageSelector( id );
fieldset.addItems( [
new OO.ui.FieldLayout( langSelector, { label: 'Display language', align: 'inline' } )
] );
$( this ).append( fieldset.$element );
} );
} );
} )( jQuery, mediaWiki );