User:WikiMacaroons/WikiDyslexia.js

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.

var img = new Image();
img.src = "https://media.discordapp.net/attachments/674670422544875520/714483896460247060/WikiDyslexiaforWiki.png"
document.getElementById('p-logo').innerHTML='<img src=\'https://media.discordapp.net/attachments/674670422544875520/714483896460247060/WikiDyslexiaforWiki.png'+'#\'>'
var dysmen = $(mw.util.addPortletLink('p-personal','#','WikiDyslexia','Turn on WikiDyslexia','Turn on WikiDyslexia','','#pt-mytalk'));
$( dysmen ).click( function() {
	addMenu();
});
function addMenu(){
window.colpick = `
<label for="favcolor">Select the highlight colour:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
<style>
.okbutton {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: #ebf0f5; 
  color: black; 
  border: 2px solid #ebf0f5;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
  border: 2px solid #4CAF50;
}
.button3 {
  background-color: #ebf0f5; 
  color: black; 
  border: 2px solid #ebf0f5;
}

.button3:hover {
  background-color: #fa6e4b;
  color: white;
  border: 2px solid #fa6e4b;
}
</style>
<button class="okbutton button3" onclick="noHigh()">No Highlight</button>   <button class="okbutton button1" onclick="addHigh()">OK</button>
`;
document.getElementById("mw-content-text").innerHTML = colpick+document.getElementById("mw-content-text").innerHTML;
}
function noHigh(){
	window.highcol = "#FFFFFF";
	fontNext();
}
function addHigh(){
	/*
	document.getElementById("bodyContent").style.backgroundColor = document.getElementById("favcolor").value;
	document.getElementById("content").style.backgroundColor = document.getElementById("favcolor").value;
	*/
	window.highcol = document.getElementById("favcolor").value;
	fontNext();
}
function fontNext(){
	window.fontpick = `
	<select id="fonts" name="fonts">
    <option value="nochange">No Font Change</option>
    <option value="sans">Comic Sans</option>
	</select>
	<style>
.okbutton {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: #ebf0f5; 
  color: black; 
  border: 2px solid #ebf0f5;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
  border: 2px solid #4CAF50;
}
.button3 {
  background-color: #ebf0f5; 
  color: black; 
  border: 2px solid #ebf0f5;
}

.button3:hover {
  background-color: #fa6e4b;
  color: white;
  border: 2px solid #fa6e4b;
}
</style>
<button class="okbutton button1" onclick="checkFont()">OK</button>
	`;
	document.getElementById("mw-content-text").innerHTML = document.getElementById("mw-content-text").innerHTML.replace(colpick, fontpick);
}
function checkFont(){
	window.fontn = document.getElementById("fonts").value;
	doSpacing();
}
function doSpacing(){
	window.linespacepick = `
<p id="spactitle">Spacing:</p>

<div>
  <input type="range" id="linesp" name="LineSpacing"
         min="0" max="500" value="110" step="10">
  <label for="volume" id="lsplab">Line Spacing</label>
</div>

<div>
  <input type="range" id="wordsp" name="Word Spacing" 
         min="0" max="200" value="0.1" step="10">
  <label for="cowbell" id="wsplab">Word Spacing</label>
</div>
	<style>
.okbutton {
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: #ebf0f5; 
  color: black; 
  border: 2px solid #ebf0f5;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
  border: 2px solid #4CAF50;
}
.button3 {
  background-color: #ebf0f5; 
  color: black; 
  border: 2px solid #ebf0f5;
}

.button3:hover {
  background-color: #fa6e4b;
  color: white;
  border: 2px solid #fa6e4b;
}
</style>
<button class="okbutton button1" onclick="checkSpace()" id="okb">OK</button>
	`;
	document.getElementById("mw-content-text").innerHTML = document.getElementById("mw-content-text").innerHTML.replace(fontpick, linespacepick);
}
function checkSpace(){
	window.linespace = document.getElementById("linesp").value;
	window.wordspace = document.getElementById("wordsp").value;
	document.getElementById("bodyContent").style.backgroundColor = highcol;
	document.getElementById("content").style.backgroundColor = highcol;
	if(fontn == "sans"){
		document.getElementById("bodyContent").style.fontFamily = "Comic Sans MS";
		document.getElementById("bodyContent").style.fontSize = "large";
	}
	document.getElementById("bodyContent").style.wordSpacing = wordspace+"px";
	document.getElementById("bodyContent").style.lineHeight = linespace+"%";
	document.getElementById("wordsp").remove();
	document.getElementById("linesp").remove();
	document.getElementById("wsplab").remove();
	document.getElementById("lsplab").remove();
	document.getElementById("spactitle").remove();
	document.getElementById("okb").remove();
}