User:Canadabonk/sandbox.js: Difference between revisions
Content added Content deleted
Canadabonk (talk | contribs) No edit summary |
Canadabonk (talk | contribs) No edit summary |
||
(39 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
$ |
$(function(){ |
||
if ($(' |
if ($('#cosmostweaks-coloreditor').length) { |
||
mw.util.addCSS(` |
|||
#cosmostweaks-coloreditor { |
|||
const |
|||
background-color: #eee; |
|||
color: black; |
|||
contentBackgroundColor = $('#mw-content').css('background-color'), |
|||
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 = [ |
|||
fontColor = $('#mw-content').css('color'), |
|||
'--main-background-color', |
|||
linkColor = $('#content a:not(.new').css('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 = {}; |
|||
bannerColor = $('#cosmos-banner').css('background-color'), |
|||
const darkmodevars = {}; |
|||
headerColor = $('.cosmos-header').css('background-color'), |
|||
for (const x of CSSvarsList) { |
|||
buttonColor = $('.cosmos-button-primary').css('background-color'), |
|||
lightmodevars[x] = tohex(cosmostweaksCSS[0].style.getPropertyValue(x)); |
|||
buttonTextColor = $('.cosmos-button-primary').css('color'), |
|||
darkmodevars[x] = tohex(cosmostweaksCSS[1].style.getPropertyValue(x)); |
|||
} |
|||
const lightCSS = mw.loader.addStyleTag(':root{}'); |
|||
footerColor = $('#cosmos-footer').css('background-color'); |
|||
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}">`; |
|||
this.name = name; |
|||
this.val = val; |
|||
this.desc = desc ? desc : "none"; |
|||
} |
|||
const variablesList = { |
|||
mainbgcolor: new cssVar('--main-background-color', mainBackgroundColor, "used for background behind content block. hidden if there is a background image"), |
|||
contentbgcolor: new cssVar('--content-background-color', contentBackgroundColor, "background of the content block"), |
|||
fontcolor: new cssVar('--text-color', fontColor), |
|||
linkcolor: new cssVar('--link-color', linkColor), |
|||
bannercolor: new cssVar('--banner-color', bannerColor), |
|||
headercolor: new cssVar('--header-color', headerColor), |
|||
buttoncolor: new cssVar('--button-color', buttonColor), |
|||
buttontext: new cssVar('--button-text-color', buttonTextColor), |
|||
footercolor: new cssVar('--footer-color', footerColor), |
|||
}; |
|||
function variablesListCSS() { |
|||
text = ""; |
|||
for (var x in variablesList){ |
|||
text += " " + variablesList[x].name + ": " + variablesList[x].val + ";\n"; |
|||
} |
} |
||
return text; |
|||
} |
|||
function CSSvarsRows() { |
|||
const newCSSVariables = |
|||
text = ""; |
|||
`:root { |
|||
for (const x of CSSvarsList) { |
|||
${variablesListCSS()} |
|||
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; |
|||
$('head link[rel=stylesheet]').first.after('<style>' + newCSSVariables + '</style>'); |
|||
} |
|||
$('#printCSSVars').append( |
|||
`<pre> |
|||
${newCSSVariables} |
|||
</pre>`); |
|||
$('#printCSSVarsTable').append(printCSSVarsTable()); |
|||
function printcolors(list, name) { |
|||
colorlist = ""; |
|||
table = '<table class="wikitable"><tr><th>CSS variable</th><th>Value</th><th>Description</th></tr>'; |
|||
for ( |
for (const x in list) { |
||
colorlist += x + ": " + list[x] + ';\n'; |
|||
table += `<tr><td>${variablesList[x].name}</td><td><div style="display:inline-block;margin-right:0.5em;width:1em;height:1em;border:1px solid black;background-color:${variablesList[x].val};"></div>${variablesList[x].val}</td><td>${variablesList[x].desc}</td>`; |
|||
} |
|||
$(name).text(colorlist); |
|||
switch(name) { |
|||
case ".lightmodevars": |
|||
lightCSS.innerHTML = `:root {\n${colorlist} }`; |
|||
break; |
|||
case ".darkmodevars": |
|||
darkCSS.innerHTML = `.cosmostweaks-darkmode {\n${colorlist} }`; |
|||
} |
|||
} |
} |
||
table += '</table>'; |
|||
$('#cosmostweaks-coloreditor').html(` |
|||
return table; |
|||
<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> |
|||
if ($('.cosmos-header').css('background-image') == "none") { |
|||
This tool can only work with hexcodes (like "#000000"). Swap them out for RGBA values with opacity in the CSS page, if desired.</p> |
|||
mw.util.addCSS('.cosmos-header::before {display:none}'); |
|||
<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; |
|||
} |
|||
} |
} |
||
}); |
Latest revision as of 20:08, 26 June 2024
$(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;
}
}