User:Canadabonk/sandbox.js: Difference between revisions
Content deleted Content added
Canadabonk (talk | contribs) No edit summary |
Canadabonk (talk | contribs) No edit summary |
||
(18 intermediate revisions by the same user not shown) | |||
Line 2:
if ($('#cosmostweaks-coloreditor').length) {
mw.util.addCSS(`
}▼
}
#cosmostweaks-coloreditor td, #cosmostweaks-coloreditor th {▼
▲ border:1px solid black;
}▼
}
▲ #cosmostweaks-coloreditor th {
▲ background-color:lightgrey;
display:flex;
}▼
justify-content:center;
`);▼
}
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 = [
Line 46 ⟶ 62:
}
const lightCSS = mw.loader.addStyleTag(':root{}');
function createinput(color) {▼
const darkCSS = mw.loader.addStyleTag('.cosmostweaks-darkmode{}');
return `<input type="color" value="${color}"><input type="text" value="${color}">`;▼
▲ function createinput(color, name) {
▲ return `<input type="color" name="${name}-color" value="${color}"><input type="text" name="${name}-text" value="${color}">`;
}
Line 53 ⟶ 72:
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';
}
switch(name) {
▲ $(listclass).text(colorlist);
}▼
lightCSS.innerHTML = `:root {\n${colorlist} }`;
▲ $('#cosmostweaks-coloreditor input').change(function(){
const ▼
color = $(this).val(),▼
variable = $(this).closest('tr').attr('data-row');▼
$(this).siblings('input').attr('value', color);▼
switch($(this).parent().attr('class')) {▼
case 'lightcol':▼
lightmodevars[variable] = color;▼
▲ printcolors(lightmodevars);
break;
case
darkCSS.innerHTML = `.cosmostweaks-darkmode {\n${colorlist} }`;
darkmodevars[variable] = color;▼
printcolors(darkmodevars);▼
}
}
$('#cosmostweaks-coloreditor').html(`
Line 88 ⟶ 97:
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="
<tr><td
${CSSvarsRows()}
</table>
<br>
<p>Light mode colors:</p>▼
<table style="width:100%;">
<tr><td style="width:50%;">
<pre class="lightmodevars">
</pre></td>
<td>
<pre class="darkmodevars">
</pre></td></tr></table>
`);
$('#cosmostweaks-coloreditor input').change(e => {
printcolors(lightmodevars);▼
▲ const
printcolors(darkmodevars);▼
$(e.target).attr('value', color);
▲ case 'lightcol':
▲ lightmodevars[variable] = color;
printcolors(lightmodevars, ".lightmodevars");
break;
case 'darkcol':
▲ darkmodevars[variable] = color;
▲ printcolors(darkmodevars, ".darkmodevars");
▲ }
▲ printcolors(lightmodevars, ".lightmodevars");
▲ printcolors(darkmodevars, ".darkmodevars");
}
});
|