darkwiiplayer/.profile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor color palette code

Browse source
This commit is contained in:
Talia 2022-10-11 09:15:53 +02:00
parent c3838bae6a
commit 3da727667b
1 changed files with 38 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
templates/palette.html
View file

@ -15,15 +15,6 @@
<h2>Primary</h2> <h2>Primary</h2>
<!-- Only override values here for slight tweaking --> <!-- Only override values here for slight tweaking -->
<colour-palette style="--hue: var(--base-hue);"> <colour-palette style="--hue: var(--base-hue);">
<button style="--lightness: 05%"></button>
<button style="--lightness: 15%"></button>
<button style="--lightness: 30%"></button>
<button style="--lightness: 40%"></button>
<button style="--lightness: 50%"></button>
<button style="--lightness: 60%"></button>
<button style="--lightness: 70%"></button>
<button style="--lightness: 80%"></button>
<button style="--lightness: 95%"></button>
</colour-palette> </colour-palette>
<section class="hint box"> <section class="hint box">
@ -32,17 +23,7 @@
</section> </section>
<h2>Secondary</h2> <h2>Secondary</h2>
<colour-palette style="--hue: calc(var(--base-hue) + var(--offset));"> <colour-palette style="--hue: calc(var(--base-hue) + var(--offset));"></colour-palette>
<button style="--lightness: 05%"></button>
<button style="--lightness: 15%"></button>
<button style="--lightness: 30%"></button>
<button style="--lightness: 40%"></button>
<button style="--lightness: 50%"></button>
<button style="--lightness: 60%"></button>
<button style="--lightness: 70%"></button>
<button style="--lightness: 80%"></button>
<button style="--lightness: 95%"></button>
</colour-palette>
<section class="hint box"> <section class="hint box">
You can copy any colour to the clipboard by just clicking on its box. You can copy any colour to the clipboard by just clicking on its box.
@ -51,17 +32,7 @@
</section> </section>
<h2>Tertiary</h2> <h2>Tertiary</h2>
<colour-palette style="--hue: calc(var(--base-hue) - var(--offset));"> <colour-palette style="--hue: calc(var(--base-hue) - var(--offset));"></colour-palette>
<button style="--lightness: 05%"></button>
<button style="--lightness: 15%"></button>
<button style="--lightness: 30%"></button>
<button style="--lightness: 40%"></button>
<button style="--lightness: 50%"></button>
<button style="--lightness: 60%"></button>
<button style="--lightness: 70%"></button>
<button style="--lightness: 80%"></button>
<button style="--lightness: 95%"></button>
</colour-palette>
<section class="hint box"> <section class="hint box">
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated. By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
@ -69,17 +40,7 @@
</section> </section>
<h2>Neutral</h2> <h2>Neutral</h2>
<colour-palette style="--hue: 210deg; --saturation: 5%;"> <colour-palette style="--hue: 210deg; --saturation: 5%;"></colour-palette>
<button style="--lightness: 05%"></button>
<button style="--lightness: 15%"></button>
<button style="--lightness: 30%"></button>
<button style="--lightness: 40%"></button>
<button style="--lightness: 50%"></button>
<button style="--lightness: 60%"></button>
<button style="--lightness: 70%"></button>
<button style="--lightness: 80%"></button>
<button style="--lightness: 95%"></button>
</colour-palette>
<section class="hint box"> <section class="hint box">
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated. By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
@ -176,13 +137,6 @@
/* === Popup notification shenanigans === */ /* === Popup notification shenanigans === */
@keyframes fade {
0% { opacity: 0; transform: translate(-50%, -10%)}
20% { opacity: 1;}
50% { opacity: 1;}
100% { opacity: 0; transform: translate(-50%, -150%)}
}
div.notification { div.notification {
top: 0em; top: 0em;
border: 1px solid currentcolor; border: 1px solid currentcolor;
@ -263,26 +217,17 @@
document.querySelector("body").appendChild(box); document.querySelector("body").appendChild(box);
box.style.setProperty('animation', 'fade 1s'); box.animate([
box.style.setProperty('animation-fill-mode', 'forwards'); { offset: 0, opacity: 1, transform: "translate(-50%, -10%)"},
{ offset: .3, opacity: 1 },
{ offset: 1, opacity: 0, transform: "translate(-50%, -200%)"},
], {
duration: 1e3
}).finished.then(() => box.remove())
box.style.setProperty('color', color); box.style.setProperty('color', color);
box.addEventListener("animationend", ({box: target}) => box.parentElement.removeChild(box))
} }
document.querySelectorAll('colour-palette button').forEach(button => {
button.addEventListener('click', event => {
const prop = name => getComputedStyle(button)
.getPropertyValue(name)
.replace(/^ *| *$/g, "")
const colour = `hsl(${prop("--hue")}, ${prop("--saturation")}, ${prop("--lightness")})`
navigator.clipboard.writeText(colour).then(() => {
const box = button.getBoundingClientRect()
showMessage(`Copied to Clipboard:<br>${colour}`, colour, box.x+box.width/2, box.y+box.height/2);
});
});
});
const register = (type, name, initial=undefined) => CSS.registerProperty({ const register = (type, name, initial=undefined) => CSS.registerProperty({
name: `--${name}`, name: `--${name}`,
syntax: `<${type}>`, syntax: `<${type}>`,
@ -295,6 +240,7 @@
register("percentage", "lightness", "50%") register("percentage", "lightness", "50%")
const backgroundColourButton = document.getElementById("background-color") const backgroundColourButton = document.getElementById("background-color")
backgroundColourButton.addEventListener("input", event => { backgroundColourButton.addEventListener("input", event => {
const rgb = backgroundColourButton.value const rgb = backgroundColourButton.value
document.body.style.background = rgb document.body.style.background = rgb
@ -317,6 +263,32 @@
.map(colour => colour.match(/\d+/g)) .map(colour => colour.match(/\d+/g))
.map(match => `${match[0]} ${match[1]} ${match[2]}`) .map(match => `${match[0]} ${match[1]} ${match[2]}`)
} }
connectedCallback() {
this.innerHTML = `
<button style="--lightness: 05%"></button>
<button style="--lightness: 15%"></button>
<button style="--lightness: 30%"></button>
<button style="--lightness: 40%"></button>
<button style="--lightness: 50%"></button>
<button style="--lightness: 60%"></button>
<button style="--lightness: 70%"></button>
<button style="--lightness: 80%"></button>
<button style="--lightness: 95%"></button>
`
this.querySelectorAll('button').forEach(button => {
button.addEventListener('click', event => {
const prop = name => getComputedStyle(button)
.getPropertyValue(name)
.replace(/^ *| *$/g, "")
const colour = `hsl(${prop("--hue")}, ${prop("--saturation")}, ${prop("--lightness")})`
navigator.clipboard.writeText(colour).then(() => {
const box = button.getBoundingClientRect()
showMessage(`Copied to Clipboard:<br>${colour}`, colour, box.x+box.width/2, box.y+box.height/2);
});
});
});
}
}) })