Content added Content deleted
mNo edit summary |
mNo edit summary |
||
(34 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
( function ( $, mw ) { |
|||
mw.loader.using( ['oojs-ui-core', 'oojs-ui-widgets'] ).done( function() { |
|||
'use strict'; |
|||
$( '.story-dialogue' ).each( function() { |
|||
var $sd_en = $( this ).find( '.sd-en' ); |
|||
function makeLangToggle() { |
|||
var $sd_jp = $( this ).find( '.sd-jp' ); |
|||
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' |
|||
} ); |
|||
function langToggle( item, selected ) { |
|||
$.cookie( 'dialogue_lang', item.getData(), { expires: 365, 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 ); |
|||
var toggleButton = new OO.ui.ButtonSelectWidget( { |
|||
toggle.on( 'select', langToggle ); |
|||
var cookie_val = $.cookie( 'dialogue_lang' ); |
|||
if ( cookie_val !== 'en' && cookie_val !== 'jp' && cookie_val !== 'both' ) { |
|||
toggle.selectItemByData( 'both' ); |
|||
} else { |
|||
toggle.selectItemByData( cookie_val ); |
|||
} |
|||
return toggle; |
|||
} |
|||
function makeLayoutToggle() { |
|||
var toggle = new OO.ui.ButtonSelectWidget( { |
|||
items: [ |
items: [ |
||
new OO.ui.ButtonOptionWidget({ data: ' |
new OO.ui.ButtonOptionWidget( { data: 'modern', label: 'Modern' } ), |
||
new OO.ui.ButtonOptionWidget({ data: ' |
new OO.ui.ButtonOptionWidget( { data: 'traditional', label: 'Traditional' } ), |
||
], |
], |
||
align: 'left' |
align: 'left' |
||
} ); |
} ); |
||
toggleButton.selectItemByData('en'); |
|||
function layoutToggle( item, selected ) { |
|||
$.cookie( 'dialogue_layout', item.getData(), { expires: 365, path: '/' } ); |
|||
$sd_jp.hide(); |
|||
$( '.dialogue, .dialogue-scene, .dialogue-sfx, .dialogue-image' ).each ( function() { |
|||
$sd_en.show(); |
|||
if ( item.getData() === 'modern' ) { |
|||
$ |
$( this ).removeClass( 'traditional' ); |
||
$ |
$( this ).addClass( 'modern' ); |
||
} else if ( item.getData() === 'traditional' ) { |
|||
} |
|||
$( this ).removeClass( 'modern' ); |
|||
}); |
|||
$( this ).addClass( 'traditional' ); |
|||
} |
|||
$sd_jp.hide(); |
|||
} ); |
|||
$( this ).find( '.sd-toggle' ).append( toggleButton.$element ); |
|||
} |
|||
}); |
|||
toggle.on( 'choose', layoutToggle ); |
|||
toggle.on( 'select', layoutToggle ); |
|||
var cookie_val = $.cookie( 'dialogue_layout' ); |
|||
if ( cookie_val !== 'modern' && cookie_val !== 'traditional' ) { |
|||
toggle.selectItemByData( 'modern' ); |
|||
} else { |
|||
toggle.selectItemByData( cookie_val ); |
|||
} |
|||
return toggle; |
|||
} |
|||
function makeColorToggle() { |
|||
var allToggle = new OO.ui.ButtonSelectWidget( { |
|||
var toggle = new OO.ui.CheckboxInputWidget( { |
|||
items: [ |
|||
value: 'colorized' |
|||
new OO.ui.ButtonOptionWidget({ data: 'en', label: 'EN' }), |
|||
} ); |
|||
new OO.ui.ButtonOptionWidget({ data: 'jp', label: 'JP' }), |
|||
toggle.on( 'change', function( selected ) { |
|||
align: 'left' |
|||
$.cookie( 'dialogue_colorized', selected, { expires: 365, path: '/' } ); |
|||
} ); |
|||
allToggle.selectItemByData('en'); |
|||
$( '.dialogue-text' ).each( function() { |
|||
if ( |
if ( selected ) { |
||
var color = $( this ).attr('data-character-color'); |
|||
$( '.story-dialogue' ).each( function() { |
|||
$( this ).css( 'border-left-color', color ); |
|||
$( this ).css( 'border-left-width', 'thick' ); |
|||
} else { |
|||
$( this ).css( 'border-left-color', '' ); |
|||
$sd_en.show(); |
|||
$( this ).css( 'border-left-width', '' ); |
|||
}); |
|||
} |
|||
} else if ( item.getData() === 'jp' ) { |
|||
} ); |
|||
$( '.story-dialogue' ).each( function() { |
|||
} ); |
|||
var $sd_en = $( this ).find( '.sd-en' ); |
|||
var $sd_jp = $( this ).find( '.sd-jp' ); |
|||
var cookie_val = $.cookie( 'dialogue_colorized' ); |
|||
$sd_en.hide(); |
|||
if ( cookie_val !== null ) { |
|||
$sd_jp.show(); |
|||
toggle.setSelected( cookie_val === 'true' ); |
|||
}); |
|||
} |
} |
||
}); |
|||
return toggle; |
|||
} |
|||
function initMarking() { |
|||
$( '.dialogue-text' ).each( function() { |
|||
$( this ).css( 'cursor' , 'pointer' ); |
|||
$( this ).attr( 'title', 'Mark' ); |
|||
$( this ).on( 'click tap touchstart', 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(); |
|||
} ); |
|||
} )( jQuery, mediaWiki ); |
|||
$( '.all-toggle' ).append( allToggle.$element ); |
|||
}); |
Latest revision as of 05:57, 22 December 2021
( function ( $, mw ) {
'use strict';
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'
} );
function langToggle( item, selected ) {
$.cookie( 'dialogue_lang', item.getData(), { expires: 365, 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 );
var cookie_val = $.cookie( 'dialogue_lang' );
if ( cookie_val !== 'en' && cookie_val !== 'jp' && cookie_val !== 'both' ) {
toggle.selectItemByData( 'both' );
} else {
toggle.selectItemByData( cookie_val );
}
return toggle;
}
function makeLayoutToggle() {
var toggle = new OO.ui.ButtonSelectWidget( {
items: [
new OO.ui.ButtonOptionWidget( { data: 'modern', label: 'Modern' } ),
new OO.ui.ButtonOptionWidget( { data: 'traditional', label: 'Traditional' } ),
],
align: 'left'
} );
function layoutToggle( item, selected ) {
$.cookie( 'dialogue_layout', item.getData(), { expires: 365, path: '/' } );
$( '.dialogue, .dialogue-scene, .dialogue-sfx, .dialogue-image' ).each ( function() {
if ( item.getData() === 'modern' ) {
$( this ).removeClass( 'traditional' );
$( this ).addClass( 'modern' );
} else if ( item.getData() === 'traditional' ) {
$( this ).removeClass( 'modern' );
$( this ).addClass( 'traditional' );
}
} );
}
toggle.on( 'choose', layoutToggle );
toggle.on( 'select', layoutToggle );
var cookie_val = $.cookie( 'dialogue_layout' );
if ( cookie_val !== 'modern' && cookie_val !== 'traditional' ) {
toggle.selectItemByData( 'modern' );
} else {
toggle.selectItemByData( cookie_val );
}
return toggle;
}
function makeColorToggle() {
var toggle = new OO.ui.CheckboxInputWidget( {
value: 'colorized'
} );
toggle.on( 'change', function( selected ) {
$.cookie( 'dialogue_colorized', selected, { expires: 365, path: '/' } );
$( '.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', '' );
}
} );
} );
var cookie_val = $.cookie( 'dialogue_colorized' );
if ( cookie_val !== null ) {
toggle.setSelected( cookie_val === 'true' );
}
return toggle;
}
function initMarking() {
$( '.dialogue-text' ).each( function() {
$( this ).css( 'cursor' , 'pointer' );
$( this ).attr( 'title', 'Mark' );
$( this ).on( 'click tap touchstart', 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();
} );
} )( jQuery, mediaWiki );