Skip to content

Commit

Permalink
[color-swatch] Add the colorInfo prop (#118)
Browse files Browse the repository at this point in the history
* Make the color info available programmatically

* Don't choke on unknown channels
  • Loading branch information
DmitrySharabin authored Oct 16, 2024
1 parent a375dbb commit 02e5e6f
Showing 1 changed file with 27 additions and 3 deletions.
30 changes: 27 additions & 3 deletions src/color-swatch/color-swatch.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,8 +115,8 @@ const Self = class ColorSwatch extends ColorElement {
this.style.setProperty("--color", colorString);
}

if (name === "info" || name === "color") {
if (!this.info.length) {
if (name === "colorInfo") {
if (!this.colorInfo) {
return;
}

Expand All @@ -129,7 +129,11 @@ const Self = class ColorSwatch extends ColorElement {
for (let coord of this.info) {
let [label, channel] = Object.entries(coord)[0];

let value = this.color.get(channel);
let value = this.colorInfo[channel];
if (value === undefined) {
continue;
}

value = typeof value === "number" ? Number(value.toPrecision(4)) : value;

info.push(`<div class="coord"><dt>${ label }</dt><dd>${ value }</dd></div>`);
Expand Down Expand Up @@ -189,6 +193,26 @@ const Self = class ColorSwatch extends ColorElement {
},
dependencies: ["color"],
},
colorInfo: {
get () {
if (!this.info.length || !this.color) {
return;
}

let ret = {};
for (let coord of this.info) {
let [label, channel] = Object.entries(coord)[0];
try {
ret[channel] = this.color.get(channel);
}
catch (e) {
console.error(e);
}
}

return ret;
},
},
};

static events = {
Expand Down

0 comments on commit 02e5e6f

Please sign in to comment.