User:Canadabonk/sandbox.js: Difference between revisions
Content deleted Content added
Canadabonk (talk | contribs) No edit summary |
Canadabonk (talk | contribs) No edit summary Tag: Reverted |
||
Line 74:
if (color.match(/^rgb/)) {
rgb = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
r = rgb[1].toString(16);
return (rgb && rgb.length === 4) ? "#" +▼
if (g.length == 1) g = "0" + g;
if (b.length == 1) b = "0" + b;
return "#" + r + g + b;
} else if (color.match(/^#.../)) {
return "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
|
Revision as of 05:29, 26 June 2024
$(function(){
if ($('#cosmostweaks-coloreditor').length) {
mw.util.addCSS(`
#cosmostweaks-coloreditor {
background-color: #eee;
color: black;
padding:10px;
}
#cosmostweaks-coloreditor td, #cosmostweaks-coloreditor th {
border:1px solid black;
}
#cosmostweaks-coloreditor th {
background-color:lightgrey;
}
`);
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));
}
function createinput(color) {
return `<input type="color" value="${color}"><input type="text" value="${color}">`;
}
function CSSvarsRows() {
text = "";
for (const x of CSSvarsList) {
text += `<tr data-row="${x}"><th>${x}</th><td>${createinput(lightmodevars[x])}</td><td>${createinput(darkmodevars[x])}</td></tr>\n`;
}
return text;
}
$('#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="width:100%;border-collapse:collapse">
<tr><td style="width:30%"></td><th>Light mode</th><th>Dark mode</th></tr>
${CSSvarsRows()}
</table>
`);
}
});
function tohex(color){
if (color.match(/^rgb/)) {
rgb = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
r = rgb[1].toString(16);
g = rgb[2].toString(16);
b = rgb[3].toString(16);
if (r.length == 1) r = "0" + r;
if (g.length == 1) g = "0" + g;
if (b.length == 1) b = "0" + b;
return "#" + r + g + b;
} else if (color.match(/^#.../)) {
return "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
} else {
return color;
}
}