Jump to content

User:DannyS712 test/invert.js

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
// Creates a link and a html id to allow the screen to be inverted
// Documentation at [[User:BrandonXLF/invert]]
// Install using...
// importScript('user:BrandonXLF/invert.js') //Invert page color [[User:BrandonXLF/invert]]

$(function(){                                                       // To make screen inverted at load
	mw.util.addCSS(                                                             // Make inverted colors class
		".inverted-colors{-webkit-filter:invert(100%);filter:invert(100%);background:#020202;}"
	); 
	
	if(mw.storage.get('InvertPage')=='true'){                                   // Use the last value in web storage of possible
		$(document.body).addClass('inverted-colors');
		$("img").addClass("inverted-colors");
		$("#p-logo").addClass("inverted-colors");
	}else{
		$(document.body).removeClass('inverted-colors');
		$("img").removeClass("inverted-colors");
		$("#p-logo").removeClass("inverted-colors");
	} 
	
	function update(e){                                                         // Function to update web storage and filter
		e.preventDefault();
		if(mw.storage.get('InvertPage')=='true'){                        
			mw.storage.set('InvertPage','false');
			$(document.body).removeClass('inverted-colors');
			$("img").removeClass("inverted-colors");
			$("#p-logo").removeClass("inverted-colors");
		}else{
			mw.storage.set('InvertPage','true');
			$(document.body).addClass('inverted-colors');
			$("img").addClass("inverted-colors");
			$("#p-logo").addClass("inverted-colors");
		} 
	}
	
	var node = mw.util.addPortletLink(                                          // Add link
	    'p-personal',
	    "https://en.wikipedia.org/wiki/User:BrandonXLF/invert/select",          // Backup link to URL
	    'Invert',
	    'invert',
	    'Invert page color',
	    'i',
	    '#pt-mytalk'
	);
	
	$(node).on('click',function(e){                                             // Make link invert page
		update(e);
	});
	
	$('#ToggleWikiInvert').click(function(e){                                   // Allow for <div id="ToggleWikiInvert">text</div>
		update(e);
	}); 
	
	$('.ToggleWikiInvert').click(function(e){                                   // Allow for <div class="ToggleWikiInvert">text</div>
		update(e);
	}); 
});

//[[Category:Wikipedia scripts]]