Wikipedysta:Tufor/darkmode.js

$(function () {
mw.loader.using( ['oojs-ui', 'jquery.jStorage'] , function () {
 
	var $container = $( '<div>' ).css( {
		'font-size': '0.8em',
		'margin-bottom': '15px'
	} );
 
	var resetCssHack =  {
 		'background-repeat': 'no-repeat',
		'background-size': 'contain',
 		'color': 'rgba(0,0,0,0)'
 	}
 
	 var updateSize = function( size ) {
 		$('#bodyContent').css( 'font-size', size);
 		$.jStorage.set( 'accessibility-size', size );
 	}
 
	var sizeOptionSmall = new OO.ui.ButtonOptionWidget( {
		label: 'lllllll', 
		title:'Small',
	} ).on( 'click', function() {
		updateSize( '14px' );
 	} );
 
 	sizeOptionSmall.$element.find( '.oo-ui-labelElement-label').css( resetCssHack).css(
 		'background-image', 'url(https://phab.wmfusercontent.org/file/data/ed3bfysrit5xcj2adfkh/PHID-FILE-vv7xydlqodvtqkuhfzb7/uniE041_-_smallerText.svg)'
 	);
 
	var sizeOptionMedium = new OO.ui.ButtonOptionWidget( {
		label: 'lllllll', 
  		title:'Medium' 
	} ).on( 'click', function() {
		updateSize( '16px' );
	} );
 
	sizeOptionMedium.$element.find( '.oo-ui-labelElement-label').css( resetCssHack).css(
 		'background-image', 'url(https://phab.wmfusercontent.org/file/data/y6ruwgf2w4sbwuktpkiz/PHID-FILE-7ar4c3cgiprnm5v6bx2y/mediumText.svg)'
 	);
 
	var sizeOptionLarge = new OO.ui.ButtonOptionWidget( {
		label: 'lllllll', 
  		title:'Large',
	} ).on( 'click', function() {
		updateSize( '20px' );
	} );
 
	sizeOptionLarge.$element.find( '.oo-ui-labelElement-label').css( resetCssHack).css(
 		'background-image', 'url(https://phab.wmfusercontent.org/file/data/sxuc6tz5326qzsjanivf/PHID-FILE-2kgkdhmqllkgivwitviy/uniE040_-_largeText.svg)'
 	);
 
	var sizeSelect=new OO.ui.ButtonSelectWidget( { 
		items: [ sizeOptionSmall, sizeOptionMedium, sizeOptionLarge ] 
	} );
 
	switch( $.jStorage.get('accessibility-size') ) {
		case '12px':
			sizeSelect.selectItem( sizeOptionSmall );
			break;
		case '14px':
			sizeSelect.selectItem( sizeOptionMedium );
			break;
		case '16px':
			sizeSelect.selectItem( sizeOptionLarge );
			break;
		default:
			break;
	}
 
	$container.append( sizeSelect.$element );
 
 
	// contrast
	var updateDarkness = function ( darkness ) {
		$.jStorage.set( 'accessibility-color', darkness );
		$( 'body' )
			.removeClass( 'dark-mode' )
			.removeClass( 'darker-mode' )
			.removeClass( 'darkest-mode' )
			.addClass( darkness + '-mode');
	}
 
	var darkOption = new OO.ui.ButtonOptionWidget( {
		label: 'lllllll', 
		title:'Dark' 
	} ).on( 'click', function () {
		updateDarkness( 'dark' );
	} );
 
	darkOption.$element.find( '.oo-ui-labelElement-label').css( resetCssHack).css(
 		'background-image', 'url(https://phab.wmfusercontent.org/file/data/76cwr22dnerl6axvd56c/PHID-FILE-phrfpsucryeuyo2esyrt/uniE038_-_notBright.svg)'
 	);
 
	var darkerOption = new OO.ui.ButtonOptionWidget( {
		label: 'lllllll', 
		title:'Darker' 
	} ).on( 'click', function () {
		updateDarkness( 'darker' );
	} );
 
	darkerOption.$element.find( '.oo-ui-labelElement-label').css( resetCssHack).css(
 		'background-image', 'url(https://phab.wmfusercontent.org/file/data/fvycl6ximpqawrh6ycao/PHID-FILE-sntwjutfnnnge6nlao4f/uniE037_-_halfBright.svg)'
 	);
 
	var darkestOption = new OO.ui.ButtonOptionWidget( {
		label: 'lllllll', 
		title:'Darkest' 
	} ).on( 'click', function () {
		updateDarkness( 'darkest' );
	} );
 
	darkestOption.$element.find( '.oo-ui-labelElement-label').css( resetCssHack).css(
 		'background-image', 'url(https://phab.wmfusercontent.org/file/data/xnodc6lzja6wcnqo5d5x/PHID-FILE-4glyna4vthpa6zzje5zu/uniE036_-_bright.svg)'
 	);
 
	var darkSelect = new OO.ui.ButtonSelectWidget( { 
		items: [ darkOption, darkerOption, darkestOption ] 
	} );
 
	switch ( $.jStorage.get( 'accessibility-color' ) ) {
		case 'dark':
			darkSelect.selectItem( darkOption );
			break;
		case 'darker':
			darkSelect.selectItem( darkerOption );
			break;
		case 'darkest':
			darkSelect.selectItem( darkestOption );
			break;
		default:
			break;
	}
 
	$container.append( darkSelect.$element );
 
 
	// night mode
	var updateDayNight = function ( mode ) {
 
		$( 'body' )
			.removeClass( 'day-mode' )
			.removeClass( 'night-mode' )
			.addClass( mode + '-mode' );	
		$.jStorage.set( 'accessibility-mode', mode );
	}
 
	var dayOption = new OO.ui.ButtonOptionWidget( {
		data: 1,
		label: 'lllllll', 
		title:'Day' 
	} ).on( 'click', function () {
		updateDayNight( 'day' );
	} );
 
	dayOption.$element.find( '.oo-ui-labelElement-label').css( resetCssHack).css( {
 		'background-image': 'url(https://phab.wmfusercontent.org/file/data/v324gbndcz45kygarqyk/PHID-FILE-ru7vg5e6t3p6vm7jvbvx/uniE005_-_sun.svg)',
  		'margin': '0 12px'
 	} );
 
	var nightOption = new OO.ui.ButtonOptionWidget( {
		data: 1,
		label: 'lllllll', 
		title:'Night' 
	} ).on( 'click', function () {
		updateDayNight( 'night' );
	} );
 
	nightOption.$element.find( '.oo-ui-labelElement-label').css( resetCssHack).css( {
 		'background-image': 'url(https://phab.wmfusercontent.org/file/data/qrsrgvjsdssspv5muuco/PHID-FILE-iqjol7gavf626i7xjhup/uniE039_-_moon.svg)',
 		'margin': '0 11px'
 	} );
 
	var timeSelect = new OO.ui.ButtonSelectWidget( { 
		items: [ dayOption, nightOption ]
	} );
 
	switch ( $.jStorage.get( 'accessibility-mode' ) ) {
		case 'day':
			timeSelect.selectItem( dayOption );
			break;
		case 'night':
			timeSelect.selectItem( nightOption );
			break;
		default:
			break;
	}
 
	$container.append( timeSelect.$element );
	$('#p-tb-label').after( $container );
	updateSize( $.jStorage.get( 'accessibility-size' ) );
	updateDayNight( $.jStorage.get( 'accessibility-mode' ) );
	updateDarkness( $.jStorage.get( 'accessibility-color' ) );
} );
 
}); //domready