Content added Content deleted
m (ChaoticShadow moved page MediaWiki:Gadget-dialogue-toggle.js to MediaWiki:Gadget-dialogue-options.js without leaving a redirect) |
mNo edit summary |
||
Line 2: | Line 2: | ||
function makeLangToggle() { |
function makeLangToggle() { |
||
var |
var toggle = new OO.ui.ButtonSelectWidget( { |
||
items: [ |
items: [ |
||
new OO.ui.ButtonOptionWidget({ data: 'en', label: 'English' }), |
new OO.ui.ButtonOptionWidget({ data: 'en', label: 'English' }), |
||
Line 10: | Line 10: | ||
align: 'left' |
align: 'left' |
||
} ); |
} ); |
||
⚫ | |||
var cookie_val = $.cookie( 'dialogue_lang' ); |
|||
⚫ | |||
if ( cookie_val !== 'en' || cookie_val !== 'jp' || cookie_val !== 'both' ) { |
|||
⚫ | |||
} else { |
|||
toggle.selectItemByData(cookie_val); |
|||
⚫ | |||
⚫ | |||
$.cookie( 'dialogue_lang', item.getData(), { path: '/' } ); |
|||
$( '.dialogue' ).each( function() { |
$( '.dialogue' ).each( function() { |
||
var $dt_en = $( this ).find( '.dt-en' ); |
var $dt_en = $( this ).find( '.dt-en' ); |
||
Line 27: | Line 36: | ||
} |
} |
||
} ); |
} ); |
||
} |
} |
||
toggle.on( 'choose', langToggle ); |
|||
$( '.dialogue' ).each( function() { |
|||
toggle.on( 'select', langToggle ); |
|||
var $dt_jp = $( this ).find( '.dt-jp' ); |
|||
$dt_jp.hide(); |
|||
⚫ | |||
return |
return toggle; |
||
} |
} |
||
Revision as of 00:57, 12 December 2021
mw.loader.using( ['oojs-ui-core', 'oojs-ui-widgets'] ).done( function() {
function makeLangToggle() {
var toggle = 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'
} );
var cookie_val = $.cookie( 'dialogue_lang' );
if ( cookie_val !== 'en' || cookie_val !== 'jp' || cookie_val !== 'both' ) {
toggle.selectItemByData('en');
} else {
toggle.selectItemByData(cookie_val);
}
function langToggle( item, selected ) {
$.cookie( 'dialogue_lang', item.getData(), { path: '/' } );
$( '.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();
}
} );
}
toggle.on( 'choose', langToggle );
toggle.on( 'select', langToggle );
return toggle;
}
function makeLayoutToggle() {
function changeClass( value, $elem ) {
if ( value === 'cozy' ) {
$elem.removeClass( 'compact' );
$elem.addClass( 'cozy' );
} else if ( value === 'compact' ) {
$elem.removeClass( 'cozy' );
$elem.addClass( 'compact' );
}
}
var layoutToggle = new OO.ui.ButtonSelectWidget( {
items: [
new OO.ui.ButtonOptionWidget({ data: 'cozy', label: 'Cozy' }),
new OO.ui.ButtonOptionWidget({ data: 'compact', label: 'Compact' }),
],
align: 'left'
} );
layoutToggle.selectItemByData('cozy');
layoutToggle.on( 'choose', function ( item, selected ) {
$( '.dialogue' ).each( function() {
changeClass( item.getData(), $( this ) );
} );
$( '.dialogue-scene' ).each( function() {
changeClass( item.getData(), $( this ) );
} );
} );
return layoutToggle;
}
function makeColorToggle() {
var colorToggle = new OO.ui.CheckboxInputWidget( {
value: 'colorized',
selected: false
} );
colorToggle.on( 'change', function ( selected ) {
$( '.dialogue-text' ).each( function() {
if ( selected ) {
var color = $( this ).attr('data-character-color');
$( this ).css( 'border-left-color', color );
$( this ).css( 'border-left-width', 'thick' );
} else {
$( this ).css( 'border-left-color', '' );
$( this ).css( 'border-left-width', '' );
}
} );
} );
return colorToggle;
}
function initMarking() {
$( '.dialogue-text' ).each( function() {
$( this ).css( 'cursor' , 'pointer' );
$( this ).attr( 'title', 'Mark' );
$( this ).click( function () {
if ( $( this ).hasClass( 'marked' ) ) {
$( this ).removeClass( 'marked' );
$( this ).attr( 'title', 'Mark' );
} else {
$( this ).addClass( 'marked' );
$( this ).attr( 'title', 'Unmark' );
}
} );
} );
}
$( function() {
var langToggle = makeLangToggle();
var layoutToggle = makeLayoutToggle();
var colorToggle = makeColorToggle();
var fieldset = new OO.ui.FieldsetLayout( {
label: 'Dialogue display options'
} );
fieldset.addItems( [
new OO.ui.FieldLayout( langToggle, { label: 'Display language', align: 'inline' } ),
new OO.ui.FieldLayout( layoutToggle, { label: 'Display layout' , align: 'inline' } ),
new OO.ui.FieldLayout( colorToggle, { label: 'Show character colors', align: 'inline' } ),
] );
$( '.dialogue-options' ).append( fieldset.$element );
initMarking();
} );
});