User:Canadabonk/sandbox.js

$(function(){
	if ($('#cosmostweaks-coloreditor').length) {
		mw.util.addCSS(`
#cosmostweaks-coloreditor {
	background-color: #eee;
	color: black;
	padding:1em;
	color-scheme:light;
	border:1px solid lightgrey;
}
#cosmostweaks-coloreditor th {
	background-color:lightgrey;
}
#cosmostweaks-coloreditor td div {
	display:flex;
	justify-content:center;
}
#cosmostweaks-coloreditor input[type='color'] {
	padding:0;
	border:0;
	cursor:pointer;
}
#cosmostweaks-coloreditor input[type='color']:hover {
	opacity:0.6;
}
#cosmostweaks-coloreditor pre {
	margin:0;
	background-color:white;
}


`);
		
		const CSSvarsList = [
			'--main-background-color', 
			'--content-background-color', 
			'--text-color', 
			'--link-color', 
			'--banner-color', 
			'--banner-text-color', 
			'--header-color', 
			'--header-text-color', 
			'--button-color', 
			'--button-text-color', 
			'--footer-color'];
			
		const cosmostweaksCSS = [];
		$.each(document.styleSheets, function(index, sheet){
			const source = sheet.ownerNode.href || 'none';
			if (source.match('Canadabonk')) {
				cosmostweaksCSS.push(sheet.cssRules[0]);
				cosmostweaksCSS.push(sheet.cssRules[1]);	
			}
		});
		
		const lightmodevars = {};
		const darkmodevars = {};
		
		for (const x of CSSvarsList) {
			lightmodevars[x] = tohex(cosmostweaksCSS[0].style.getPropertyValue(x));
			darkmodevars[x] = tohex(cosmostweaksCSS[1].style.getPropertyValue(x));
		}
		
		const lightCSS = mw.loader.addStyleTag(':root{}');
		const darkCSS = mw.loader.addStyleTag('.cosmostweaks-darkmode{}');
		
		function createinput(color, name) {
			return `<input type="color" name="${name}-color" value="${color}"><input type="text" name="${name}-text" value="${color}">`;
		}
		
		function CSSvarsRows() {
			text = "";
			for (const x of CSSvarsList) {
				text += `<tr data-row="${x}"><th>${x}</th><td class="lightcol"><div>${createinput(lightmodevars[x], 'light' + x)}</div></td><td class="darkcol"><div>${createinput(darkmodevars[x], 'dark' + x)}</div></td></tr>\n`;
			}
			return text;
		}
		
		function printcolors(list, name) {
			colorlist = "";
			for (const x in list) {
				colorlist += x + ": " + list[x] + ';\n';
			}
			$(name).text(colorlist);
			switch(name) {
				case ".lightmodevars":
					lightCSS.innerHTML = `:root {\n${colorlist} }`;
					break;
				case ".darkmodevars":
					darkCSS.innerHTML = `.cosmostweaks-darkmode {\n${colorlist} }`;
			}
		}
		
		$('#cosmostweaks-coloreditor').html(`
			<h3 style="margin:0;color:black">Use this to visualise what a color scheme will look like!</h3>
			<p>Anything done here is not saved, this is just for preview purposes.<br>
			Paste the resulting code into your "Mediawiki:Gadget-cosmostweaks.css" to apply it.<br>
			This tool can only work with hexcodes (like "#000000"). Swap them out for RGBA values with opacity in the CSS page, if desired.</p>
			<table style="margin:auto">
				<tr><td></td><th>Light mode</th><th>Dark mode</th></tr>
				${CSSvarsRows()}
			</table>
			<br>
			<table style="width:100%;">
			<tr><th>Light mode colors:</th><th>Dark mode colors:</th><tr>
			<tr><td style="width:50%;">
			<pre class="lightmodevars">
			</pre></td>
			<td>
			<pre class="darkmodevars">
			</pre></td></tr></table>
		`);
		
		$('#cosmostweaks-coloreditor input').change(e => {
			const 
			color = e.target.value,
			variable = $(e.target).closest('tr').attr('data-row');
			
			$(e.target).attr('value', color);
			$(e.target).siblings('input').attr('value', color);
			switch($(e.target).closest('td').attr('class')) {
				case 'lightcol':
					lightmodevars[variable] = color;
					printcolors(lightmodevars, ".lightmodevars");
					break;
				case 'darkcol':
					darkmodevars[variable] = color;
					printcolors(darkmodevars, ".darkmodevars");
			}
		});
		
		printcolors(lightmodevars, ".lightmodevars");
		printcolors(darkmodevars, ".darkmodevars");
	}
});

function tohex(color){
	if (color.match(/^rgb/)) {
		rgb = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
		return (rgb && rgb.length === 4) ? "#" +
		("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
		("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
		("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
	} else if (color.length == 4 && color.match(/^#.../)) {
		return "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
	} else {
		return color;
	}
}