Content added Content deleted
(set selected to default to true, fixed not a function bug) |
(split language selector into legacy and new mode) |
||
Line 2: | Line 2: | ||
'use strict'; |
'use strict'; |
||
function |
function makeLanguageSelectorLegacy ( id ) { |
||
var selector = new OO.ui.ButtonSelectWidget( { |
var selector = new OO.ui.ButtonSelectWidget( { |
||
items: [ |
items: [ |
||
Line 13: | Line 13: | ||
} ); |
} ); |
||
function langSelect( item, selected ) { |
function langSelect ( item, selected ) { |
||
var cssSelector = '#lyrics-' + id + ' .lyric'; |
var cssSelector = '#lyrics-' + id + ' .lyric'; |
||
Line 50: | Line 50: | ||
} |
} |
||
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 () { |
$( '.lyrics-options' ).each( function () { |
||
var id = $( this ).data( 'id' ); |
var id = $( this ).data( 'id' ); |
||
var languages = $( this ).data( 'languages' ); |
var languages = $( this ).data( 'languages' ); |
||
var labels = $( this ).data( 'labels' ); |
|||
⚫ | |||
if (typeof languages === 'string' && typeof labels !== 'undefined') { |
|||
langSelector = makeLanguageSelector( |
|||
id, |
|||
languages.splti( ',' ) |
|||
); |
|||
} else { // legacy mode |
|||
langSelector = makeLanguageSelectorLegacy( id ); |
|||
} |
|||
var fieldset = new OO.ui.FieldsetLayout( { |
var fieldset = new OO.ui.FieldsetLayout( { |
||
label: 'Lyrics display options' |
label: 'Lyrics display options' |
||
} ); |
} ); |
||
⚫ | |||
fieldset.addItems( [ |
fieldset.addItems( [ |
||
new OO.ui.FieldLayout( langSelector, { label: 'Display language', align: 'inline' } ) |
new OO.ui.FieldLayout( langSelector, { label: 'Display language', align: 'inline' } ) |
||
] ); |
] ); |
||
$( this ).append( fieldset.$element ); |
$( this ).append( fieldset.$element ); |
||
} ); |
} ); |
Revision as of 05:53, 14 April 2023
( 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 );