User:Quiddity (WMF)/accessibility-alpha.js

// Content copied from User:MGalloway (WMF)/common.js // Developed in https://phabricator.wikimedia.org/T91201

$(function { mw.loader.using( ['oojs-ui', 'jquery.jStorage'], function  { var $container = $( ' ' ).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