User:BrandonXLF/Invert.js

/*** Invert ***/

// Invert the colour of the page // Documentation at en:w:User:BrandonXLF/Invert // By en:w:User:BrandonXLF

$.when(mw.loader.using('oojs-ui.styles.icons-movement'), $.ready).then(function {	var invert = JSON.parse(mw.user.options.get('userjs-invert') || '[]')[0] || false,		images = JSON.parse(mw.user.options.get('userjs-invert') || '[]')[1] || false,		whiteb = JSON.parse(mw.user.options.get('userjs-invert') || '[]')[2] || false;

function applycss { var tempCSS = '';

tempCSS += 'html{height:auto;background:' + (invert ? '#090909' : 'transparent') + '!important;-webkit-filter:invert(' +			(invert ? '100' : '0') + '%)!important;filter:invert(' +			(invert ? '100' : '0') +			'%)!important}';

tempCSS += 'img,video{-webkit-filter:invert(' +			(invert && !images ? '100' : '0') + '%)!important;filter:invert(' +			(invert && !images ? '100' : '0') + '%)!important}';

tempCSS += 'img,video{background:' + (invert && whiteb ? (images ? '#000000' : '#ffffff') : 'initial') + '}';

$('#inpgdcs').remove; $(' ').html(tempCSS).attr('id', 'inpgdcs').appendTo(document.head); }

function update(e) { if (e && e.target == active2[0] && active2.prop('checked')) { active3.prop('checked', false); } else if (e && e.target == active3[0] && active3.prop('checked')) { active2.prop('checked', false); }

invert = active1.prop('checked'); images = active2.prop('checked'); whiteb = active3.prop('checked'); active2.prop('disabled', !invert); active3.prop('disabled', !invert);

applycss; }

function sync(e) { if (e && e.target == saved2 && saved2.prop('checked')) { saved3.prop('checked', false); } else if (e && e.target == saved3 && saved3.prop('checked')) { saved2.prop('checked', false); }

invert = saved1.prop('checked'); images = saved2.prop('checked'); whiteb = saved3.prop('checked'); active1.prop('checked', invert); active2.prop('checked', images); active3.prop('checked', whiteb); saved2.prop('disabled', !invert); saved3.prop('disabled', !invert); active2.prop('disabled', !invert); active3.prop('disabled', !invert);

applycss;

(new mw.Api).saveOption('userjs-invert', JSON.stringify([invert, images, whiteb])).done(save); mw.user.options.set('userjs-invert', JSON.stringify([invert, images, whiteb])); }

function save { var fileCSS = '/* INVERT CSS */ ' + (images ? '' : 'img,video,') + 'html{-webkit-filter:invert(100%);filter:invert(100%)' + (images ? ';' : '}html{') + 'height:auto;background:#090909}' + (whiteb ? 'img,video{background:' + (images ? '#000000' : '#ffffff') + '}' : ''); $.get(mw.config.get('wgScript'), {			action: 'raw',			title: 'User:' + mw.config.get('wgUserName') + '/common.css'		}).done(function(text) {			var newtext = text.replace(/[\n\r]*\/\* INVERT CSS \*\/ ?.*/, '');

if (invert) { newtext += '\n\n' + fileCSS; }

if (text != newtext) { $.post(mw.config.get('wgScriptPath') + '/api.php', {					action: 'edit',					title: 'User:' + mw.config.get('wgUserName') + '/common.css',					text: newtext,					summary: 'Modifying invert page CSS style',					token: mw.user.tokens.get('csrfToken'),					format: 'json'				}).always(function(a, b) {					if (b == 'error' || a.error) {						mw.notify('Unable to update invert colour CSS.' + (b == 'error' ? ' AJAX request failed.' : ''), {tag: 'invertpage', type: 'error'});					} else {						mw.notify('Invert colour CSS saved sucessfully!', {tag: 'invertpage'});					}				}); }		});	}

var PRE = '' + '' + ' ',		POST = ' ',

saved1 = $(PRE + 'Invert' + POST).children.prop('checked', invert).change(sync), saved2 = $(PRE + 'Invert imgs' + POST).children.prop('checked', images).prop('disabled', !invert).change(sync), saved3 = $(PRE + 'White img bg' + POST).children.prop('checked', whiteb).prop('disabled', !invert).change(sync),

active1 = $(PRE + 'Invert' + POST).children.prop('checked', invert).change(update), active2 = $(PRE + 'Invert imgs' + POST).children.prop('checked', images).prop('disabled', !invert).change(update), active3 = $(PRE + 'White img bg' + POST).children.prop('checked', whiteb).prop('disabled', !invert).change(update),

opts = $(' '), link = $(mw.util.addPortletLink('p-personal', '#', 'Invert', 'invert-colour', 'Invert colour', 'i', '#pt-mytalk')) .on('mouseenter', function {				opts.css('display', 'block');			}) .on('mouseleave', function {				if (mw.config.get('skin') != 'minerva') {					opts.css('display', 'none');				}			}) .on('click', function(e) {				if (e.target == $(this).find('a').get(0)) e.preventDefault;			});

opts.css({display: 'none', padding: '4px', border: '1px solid #999', borderRadius: '2px', position: 'absolute', background: '#fff'}) .appendTo(link) .append(' Saved config ') .append(saved1.parent) .append(saved2.parent) .append(saved3.parent) .append('') .append($(' ')			.append((new OO.ui.IconWidget({ icon: 'expand', label: '▼', title: 'Reset temporary configuration' })).$element.css({height: '1em', minHeight: '1em', cursor: 'pointer', marginRight: '0.5em'}).click(update))			.append((new OO.ui.IconWidget({ icon: 'collapse', label: '▲', title: 'Save temporary configuration' })).$element.css({height: '1em', minHeight: '1em', cursor: 'pointer'}).click(function {				saved1.prop('checked', active1.prop('checked'));				saved2.prop('checked', active2.prop('checked'));				saved3.prop('checked', active3.prop('checked'));				sync;			}))		) .append('') .append(' Temp. config ') .append(active1.parent) .append(active2.parent) .append(active3.parent);

if (mw.config.get('skin') === 'minerva') { link.click(function(e) {			e.stopImmediatePropagation;			opts.css('display', 'block');			OO.ui.alert(opts.css('position', ).css('border', ), {size: 'large'}).done(function {});		}); }

save; });