Skip to content

[color-swatch] Add the colorInfo prop #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DmitrySharabin merged 6 commits into from
Oct 16, 2024
Merged

[color-swatch] Add the colorInfo prop #118

Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ef45ee9
[color-swatch] Add the `colorInfo` prop
DmitrySharabin Oct 11, 2024
f10756f
[color-swatch] Use channels as `colorInfo` keys + add `infoLabels` fo…
DmitrySharabin Oct 11, 2024
3b12ccc
Remove `infoLabels`
DmitrySharabin Oct 15, 2024
c3da455
[color-swatch] Return raw channel value
DmitrySharabin Oct 15, 2024
47c2f06
[color-swatch] Use the actual `colorInfo` property
DmitrySharabin Oct 15, 2024
a92705c
[color-swatch] Don't choke on unknown channels
DmitrySharabin Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 33 additions & 13 deletions src/color-swatch/color-swatch.js
View file
Open in desktop
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 @@ -125,17 +125,8 @@ const Self = class ColorSwatch extends ColorElement {
this._el.colorWrapper.after(this._el.info);
}

let info = [];
for (let coord of this.info) {
let [label, channel] = Object.entries(coord)[0];

let value = this.color.get(channel);
value = typeof value === "number" ? Number(value.toPrecision(4)) : value;

info.push(`<div class="coord"><dt>${ label }</dt><dd>${ value }</dd></div>`);
}

this._el.info.innerHTML = info.join("\n");
let html = Object.entries(this.colorInfo).map(([key, value]) => `<div class="coord"><dt>${ this.infoLabels[key] }</dt><dd>${ value }</dd></div>`);
this._el.info.innerHTML = html.join("\n");
}
}

Expand Down Expand Up @@ -189,6 +180,35 @@ const Self = class ColorSwatch extends ColorElement {
},
dependencies: ["color"],
},
infoLabels: {
Copy link
Copy Markdown
Member

@LeaVerou LeaVerou Oct 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need a separate infoLabels prop?

Copy link
Copy Markdown
Member Author

@DmitrySharabin DmitrySharabin Oct 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Initially, I was thinking of optimizing the code so that we don't have to use Object.entries every time we need to get a channel and its label. It turned out that this was not a good idea: actually, we needed to do this in one place, so there was no need to add an extra prop. I removed it. Thank you for the question; it helped me see the flaw.

get () {
let labels = {};
for (let data of this.info) {
let [label, channel] = Object.entries(data)[0];
labels[channel] = label;
}

return labels;
},
},
colorInfo: {
get () {
if (!this.info.length || !this.color) {
return;
}

let ret = {};
for (let coord of this.info) {
let [label, channel] = Object.entries(coord)[0];

let value = this.color.get(channel);
value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
ret[channel] = value;
}

return ret;
},
},
};

static events = {
Expand Down