Content added Content deleted
(Created page with "( function ( $, mw ) { 'use strict'; function makeLanguageSelector( id ) { var selector = new OO.ui.ButtonSelectWidget( { items: [ new OO.ui.ButtonOptionWidget( { data: 'jp', label: 'Japanese' } ), new OO.ui.ButtonOptionWidget( { data: 'rm', label: 'Romaji '} ), new OO.ui.ButtonOptionWidget( { data: 'en', label: 'English' } ) ], align: 'left', multiselect: true } ); function langSelect( item, selected ) { var cssSelector = '#ly...") |
(prevent adding column selector when there is only one column) |
||
(9 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
'use strict'; |
'use strict'; |
||
function makeLanguageSelector( id ) { |
function makeLanguageSelector ( id, languages, labels ) { |
||
var selector = new OO.ui.ButtonSelectWidget( { |
var selector = new OO.ui.ButtonSelectWidget( { |
||
items: |
items: languages.map( function ( language ) { |
||
new OO.ui.ButtonOptionWidget( { |
return new OO.ui.ButtonOptionWidget( { |
||
data: language, |
|||
new OO.ui.ButtonOptionWidget( { data: 'rm', label: 'Romaji '} ), |
|||
label: labels[language], |
|||
new OO.ui.ButtonOptionWidget( { data: 'en', label: 'English' } ) |
|||
selected: true |
|||
⚫ | |||
⚫ | |||
} ), |
|||
align: 'left', |
align: 'left', |
||
multiselect: true |
multiselect: true |
||
} ); |
} ); |
||
function langSelect( item, selected ) { |
function langSelect ( item, selected ) { |
||
var cssSelector = '#lyrics-' + id + ' .lyrics-row'; |
|||
var |
var changedLanguage = item.getData(); |
||
var languageSelector = '.lyrics-' + changedLanguage; |
|||
$( cssSelector ).each( function() { |
$( cssSelector ).each( function () { |
||
var $ |
var $lyricsElement = $( this ).find( languageSelector ); |
||
⚫ | |||
⚫ | |||
if ( selected ) { |
|||
$lyricsElement.show(); |
|||
} else { |
|||
$lyricsElement.hide(); |
|||
⚫ | |||
} ); |
} ); |
||
} |
|||
console.log(item, selected); |
|||
⚫ | |||
selector.on( 'choose', langSelect ); |
|||
toggle.on( 'select', langSelect ); |
|||
return selector; |
return selector; |
||
} |
} |
||
$( function() { |
$( function () { |
||
$( '.lyrics-options' ).each( function () { |
$( '.lyrics-options' ).each( function () { |
||
var id = $( this ).data( 'id' ); |
var id = $( this ).data( 'id' ); |
||
var languages = $( this ).data( 'languages' ); |
|||
⚫ | |||
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 fieldset = new OO.ui.FieldsetLayout( { |
var fieldset = new OO.ui.FieldsetLayout( { |
||
label: ' |
label: 'Lyrics display options' |
||
} ); |
} ); |
||
⚫ | |||
⚫ | |||
fieldset.addItems( [ |
fieldset.addItems( [ |
||
new OO.ui.FieldLayout( |
new OO.ui.FieldLayout( |
||
langSelector, |
|||
{ label: 'Visible columns', align: 'inline' } |
|||
) |
|||
] ); |
] ); |
||
Latest revision as of 03:14, 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' ||
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 );