From ef45ee98807a1f1ef4d8e76a6167fabefb72a49c Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Fri, 11 Oct 2024 17:22:45 +0200 Subject: [PATCH 1/6] [color-swatch] Add the `colorInfo` prop Make the color info available programmatically. --- src/color-swatch/color-swatch.js | 35 ++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js index 4b9453c6..a15b6d09 100644 --- a/src/color-swatch/color-swatch.js +++ b/src/color-swatch/color-swatch.js @@ -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; } @@ -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(`
${ label }
${ value }
`); - } - - this._el.info.innerHTML = info.join("\n"); + let html = Object.entries(this.colorInfo).map(([label, value]) => `
${ label }
${ value }
`); + this._el.info.innerHTML = html.join("\n"); } } @@ -189,6 +180,24 @@ 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]; + + let value = this.color.get(channel); + value = typeof value === "number" ? Number(value.toPrecision(4)) : value; + ret[label] = value; + } + + return ret; + }, + }, }; static events = { From f10756f92f4b1864589013119d55ba03255f768b Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Fri, 11 Oct 2024 18:42:01 +0200 Subject: [PATCH 2/6] [color-swatch] Use channels as `colorInfo` keys + add `infoLabels` for code optimization --- src/color-swatch/color-swatch.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js index a15b6d09..c42caba0 100644 --- a/src/color-swatch/color-swatch.js +++ b/src/color-swatch/color-swatch.js @@ -125,7 +125,7 @@ const Self = class ColorSwatch extends ColorElement { this._el.colorWrapper.after(this._el.info); } - let html = Object.entries(this.colorInfo).map(([label, value]) => `
${ label }
${ value }
`); + let html = Object.entries(this.colorInfo).map(([key, value]) => `
${ this.infoLabels[key] }
${ value }
`); this._el.info.innerHTML = html.join("\n"); } } @@ -180,6 +180,17 @@ const Self = class ColorSwatch extends ColorElement { }, dependencies: ["color"], }, + infoLabels: { + 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) { @@ -192,7 +203,7 @@ const Self = class ColorSwatch extends ColorElement { let value = this.color.get(channel); value = typeof value === "number" ? Number(value.toPrecision(4)) : value; - ret[label] = value; + ret[channel] = value; } return ret; From 3b12ccca5dc1d1a46e4952f5eac87d18835d3c60 Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Tue, 15 Oct 2024 19:03:02 +0200 Subject: [PATCH 3/6] Remove `infoLabels` That was not a good idea: it's not that much reusable as it seemed to me from the first sight --- src/color-swatch/color-swatch.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js index c42caba0..de74f527 100644 --- a/src/color-swatch/color-swatch.js +++ b/src/color-swatch/color-swatch.js @@ -125,8 +125,17 @@ const Self = class ColorSwatch extends ColorElement { this._el.colorWrapper.after(this._el.info); } - let html = Object.entries(this.colorInfo).map(([key, value]) => `
${ this.infoLabels[key] }
${ value }
`); - this._el.info.innerHTML = html.join("\n"); + 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(`
${ label }
${ value }
`); + } + + this._el.info.innerHTML = info.join("\n"); } } @@ -180,17 +189,6 @@ const Self = class ColorSwatch extends ColorElement { }, dependencies: ["color"], }, - infoLabels: { - 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) { From c3da4555e785cfe2f7dcb20af7f6613757fb1e90 Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Tue, 15 Oct 2024 19:14:05 +0200 Subject: [PATCH 4/6] [color-swatch] Return raw channel value We should round the result when using it in the UI --- src/color-swatch/color-swatch.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js index de74f527..5ec8d066 100644 --- a/src/color-swatch/color-swatch.js +++ b/src/color-swatch/color-swatch.js @@ -199,9 +199,7 @@ 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); - value = typeof value === "number" ? Number(value.toPrecision(4)) : value; - ret[channel] = value; + ret[channel] = this.color.get(channel); } return ret; From 47c2f06d0ae0ab0e86858921b49789fe01ae56db Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Tue, 15 Oct 2024 19:23:42 +0200 Subject: [PATCH 5/6] [color-swatch] Use the actual `colorInfo` property --- src/color-swatch/color-swatch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js index 5ec8d066..69c6263b 100644 --- a/src/color-swatch/color-swatch.js +++ b/src/color-swatch/color-swatch.js @@ -129,7 +129,7 @@ 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]; value = typeof value === "number" ? Number(value.toPrecision(4)) : value; info.push(`
${ label }
${ value }
`); From a92705c6892332e127abb800835deaca73ce063c Mon Sep 17 00:00:00 2001 From: Dmitry Sharabin Date: Tue, 15 Oct 2024 19:26:47 +0200 Subject: [PATCH 6/6] [color-swatch] Don't choke on unknown channels --- src/color-swatch/color-swatch.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js index 69c6263b..edddb1cc 100644 --- a/src/color-swatch/color-swatch.js +++ b/src/color-swatch/color-swatch.js @@ -130,6 +130,10 @@ const Self = class ColorSwatch extends ColorElement { let [label, channel] = Object.entries(coord)[0]; let value = this.colorInfo[channel]; + if (value === undefined) { + continue; + } + value = typeof value === "number" ? Number(value.toPrecision(4)) : value; info.push(`
${ label }
${ value }
`); @@ -198,8 +202,12 @@ const Self = class ColorSwatch extends ColorElement { let ret = {}; for (let coord of this.info) { let [label, channel] = Object.entries(coord)[0]; - - ret[channel] = this.color.get(channel); + try { + ret[channel] = this.color.get(channel); + } + catch (e) { + console.error(e); + } } return ret;