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

Add CSS export to colour palette

Browse source
This commit is contained in:
Talia 2022-11-15 16:47:53 +01:00
parent 035311a3c7
commit 326d59f003
1 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
palettes/talia.html
View file

@ -42,7 +42,8 @@
</section> </section>
</section> </section>
<button id="export">Export as GIMP Palette</button> <button id="export-gimp">Export as GIMP Palette</button>
<button id="export-css">Export as CSS Variables</button>
<!-- ======================================== --> <!-- ======================================== -->
<!-- ===== STYLES AND APPLICATION LOGIC ===== --> <!-- ===== STYLES AND APPLICATION LOGIC ===== -->
@ -184,7 +185,7 @@
font-weight: bold; font-weight: bold;
} }
#export { button {
all: unset; all: unset;
font-size: 1.2em; font-size: 1.2em;
cursor: pointer; cursor: pointer;
@ -256,7 +257,7 @@
return Array.from(this.querySelectorAll("button")) return Array.from(this.querySelectorAll("button"))
.map(button => getComputedStyle(button).backgroundColor) .map(button => getComputedStyle(button).backgroundColor)
.map(colour => colour.match(/\d+/g)) .map(colour => colour.match(/\d+/g))
.map((match, index) => `${match[0]} ${match[1]} ${match[2]} ${this.name}-${index+1}`) .map((match, index) => [match[0], match[1], match[2], `${this.name}-${index+1}`])
} }
connectedCallback() { connectedCallback() {
@ -290,13 +291,27 @@
}) })
const exportButton = document.querySelector("#export") const exportGimpButton = document.querySelector("#export-gimp")
exportButton.addEventListener("click", event => { exportGimpButton.addEventListener("click", event => {
const colours = Array.from(document.querySelectorAll("colour-palette")).map(palette => palette.colours) const colours = Array.from(document.querySelectorAll("colour-palette")).map(palette => palette.colours)
const template = `GIMP Palette\nName: Palette\nColumns: ${colours.length}\n#\n${colours.map(c => c.join("\n")).join("\n#\n")}` const template = `GIMP Palette\nName: Palette\nColumns: ${colours.length}\n#\n${colours.map(c => c.map(c=>c.join(' ')).join("\n")).join("\n#\n")}`
const link = document.createElement("a") const link = document.createElement("a")
link.href = `data:text/plain;base64,${btoa(template)}` link.href = `data:text/plain;base64,${btoa(template)}`
link.download = "palette.gpl" link.download = "palette.gpl"
link.click() link.click()
}) })
const hexByte = byte => byte <= 16 ? `0${byte.toString(16)}` : byte.toString(16)
const exportCSSButton = document.querySelector("#export-css")
exportCSSButton.addEventListener("click", event => {
const colours = Array.from(document.querySelectorAll("colour-palette"))
.map(palette => palette.colours.map(colour => `--${colour[3]}: #${colour.slice(0,3).map(Number).map(hexByte).join('')};`))
const template = `/*Talia Palette*/\n:root {\n${colours.map(p => p.map(c => "\t" + c).join("\n")).join("\n\n")}\n}`
console.log(template)
const link = document.createElement("a")
link.href = `data:text/plain;base64,${btoa(template)}`
link.download = "palette.css"
link.click()
})
</script> </script>