Content added Content deleted
mNo edit summary |
mNo edit summary |
||
Line 55: | Line 55: | ||
fieldset.addItems( [ |
fieldset.addItems( [ |
||
new OO.ui.FieldLayout( langToggle, { label: 'Display language', align: ' |
new OO.ui.FieldLayout( langToggle, { label: 'Display language', align: 'inline' }), |
||
new OO.ui.FieldLayout( colorToggle, { label: 'Show character colors', align: 'inline' } ), |
new OO.ui.FieldLayout( colorToggle, { label: 'Show character colors', align: 'inline' } ), |
||
] ); |
] ); |
||
$( '.dialogue-toggle' ).append( fieldset.$element ); |
$( '.dialogue-toggle' ).append( fieldset.$element ); |
||
$( '.dialogue' ).each( function() { |
|||
var $dt = $( this ).find( '.dialogue-text' ); |
|||
$dt.on( 'click', function () { |
|||
console.log('clicked'); |
|||
} ); |
|||
} ); |
|||
} ); |
} ); |
||
}); |
}); |
Revision as of 22:12, 11 December 2021
mw.loader.using( ['oojs-ui-core', 'oojs-ui-widgets'] ).done( function() {
function makeLangToggle() {
var langToggle = new OO.ui.ButtonSelectWidget( {
items: [
new OO.ui.ButtonOptionWidget({ data: 'en', label: 'English' }),
new OO.ui.ButtonOptionWidget({ data: 'jp', label: 'Japanese' }),
new OO.ui.ButtonOptionWidget({ data: 'both', label: 'Both' })
],
align: 'left'
} );
langToggle.selectItemByData('en');
langToggle.on( 'choose' , function( item, selected ) {
$( '.dialogue' ).each( function() {
var $dt_en = $( this ).find( '.dt-en' );
var $dt_jp = $( this ).find( '.dt-jp' );
if ( item.getData() === 'en' ) {
$dt_jp.hide();
$dt_en.show();
} else if ( item.getData() === 'jp' ) {
$dt_en.hide();
$dt_jp.show();
} else if ( item.getData() === 'both' ) {
$dt_en.show();
$dt_jp.show();
}
} );
} );
$( '.dialogue' ).each( function() {
var $dt_jp = $( this ).find( '.dt-jp' );
$dt_jp.hide();
} );
return langToggle;
}
function makeColorToggle() {
var colorToggle = new OO.ui.CheckboxInputWidget( {
value: 'colorized',
selected: false
} );
return colorToggle;
}
$( function() {
var langToggle = makeLangToggle();
var colorToggle = makeColorToggle();
var fieldset = new OO.ui.FieldsetLayout( {
label: 'Dialogue options'
} );
fieldset.addItems( [
new OO.ui.FieldLayout( langToggle, { label: 'Display language', align: 'inline' }),
new OO.ui.FieldLayout( colorToggle, { label: 'Show character colors', align: 'inline' } ),
] );
$( '.dialogue-toggle' ).append( fieldset.$element );
$( '.dialogue' ).each( function() {
var $dt = $( this ).find( '.dialogue-text' );
$dt.on( 'click', function () {
console.log('clicked');
} );
} );
} );
});