Content added Content deleted
m (fix selector) |
(clean up legacy code) |
||
Line 1: | Line 1: | ||
( function ( $, mw ) { |
( function ( $, mw ) { |
||
'use strict'; |
'use strict'; |
||
function makeLanguageSelectorLegacy ( id ) { |
|||
⚫ | |||
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(); |
|||
⚫ | |||
⚫ | |||
switch( changedLang ) { |
|||
case 'jp': |
|||
⚫ | |||
⚫ | |||
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(); |
|||
⚫ | |||
$ly.hide(); |
|||
} |
|||
} ); |
|||
} |
|||
selector.on( 'choose', langSelect ); |
|||
return selector; |
|||
} |
|||
function makeLanguageSelector ( id, languages, labels ) { |
function makeLanguageSelector ( id, languages, labels ) { |
||
Line 91: | Line 43: | ||
var labels = $( this ).data( 'labels' ); |
var labels = $( this ).data( 'labels' ); |
||
⚫ | |||
var langSelector; |
|||
typeof languages === 'string' && |
|||
typeof labels !== 'undefined' |
|||
langSelector = makeLanguageSelector( |
|||
⚫ | |||
⚫ | |||
id, |
id, |
||
languages.split( ',' ), |
languages.split( ',' ), |
||
labels |
labels |
||
); |
); |
||
⚫ | |||
} else { // legacy mode |
|||
⚫ | |||
langSelector = makeLanguageSelectorLegacy( id ); |
|||
⚫ | |||
} |
|||
⚫ | |||
fieldset.addItems( [ |
|||
new OO.ui.FieldLayout( |
|||
⚫ | |||
⚫ | |||
} ); |
|||
⚫ | |||
⚫ | |||
fieldset.addItems( [ |
|||
⚫ | |||
⚫ | |||
] ); |
|||
$( this ).append( fieldset.$element ); |
$( this ).append( fieldset.$element ); |
||
⚫ | |||
console.error('Unable to load lyrics options.'); |
|||
⚫ | |||
} ); |
} ); |
||
} ); |
} ); |
Revision as of 02:26, 15 April 2023
( 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' &&
typeof labels !== 'undefined'
) {
var langSelector = makeLanguageSelector(
id,
languages.split( ',' ),
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 );
} else {
console.error('Unable to load lyrics options.');
}
} );
} );
} )( jQuery, mediaWiki );