chris/beachPartyBalloons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: color picker selection keyed on name instead of hex

Browse Source 
Classic Rose Gold and Chrome Rose Gold share the same hex (#B76E79),
so clicking one would deselect the other. Switched all selection
checks (toggle, remove, highlight) to use color.name which is unique.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chris 2026-04-17 14:08:57 -04:00
parent 6865d2d437
commit 01c908e919
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
main-site/color/script.js
View File

@ -130,7 +130,7 @@ function createColorSwatch(color) {
const swatch = document.createElement('div'); const swatch = document.createElement('div');
swatch.classList.add('color-swatch'); swatch.classList.add('color-swatch');
swatch.dataset.color = color.hex; swatch.dataset.color = color.name;
swatch.style.color = color.hex; swatch.style.color = color.hex;
swatch.setAttribute('role', 'button'); swatch.setAttribute('role', 'button');
swatch.setAttribute('tabindex', '0'); swatch.setAttribute('tabindex', '0');
@ -171,9 +171,9 @@ function createColorSwatch(color) {
colorName.textContent = color.name; colorName.textContent = color.name;
swatch.addEventListener('click', () => { swatch.addEventListener('click', () => {
const isSelected = selectedPalette.some(c => c.hex === color.hex); const isSelected = selectedPalette.some(c => c.name === color.name);
if (isSelected) { if (isSelected) {
selectedPalette = selectedPalette.filter(c => c.hex !== color.hex); selectedPalette = selectedPalette.filter(c => c.name !== color.name);
} else { } else {
selectedPalette.push(color); selectedPalette.push(color);
} }
@ -432,7 +432,7 @@ function renderSelectedPalette() {
swatchWrapper.appendChild(colorName); swatchWrapper.appendChild(colorName);
swatch.addEventListener('click', () => { swatch.addEventListener('click', () => {
selectedPalette = selectedPalette.filter(c => c.hex !== color.hex); selectedPalette = selectedPalette.filter(c => c.name !== color.name);
renderSelectedPalette(); renderSelectedPalette();
updateSwatchHighlights(); updateSwatchHighlights();
}); });
@ -460,7 +460,7 @@ function updateSwatchHighlights() {
const color = swatch.dataset.color; const color = swatch.dataset.color;
const background = swatch.querySelector('.color-background'); const background = swatch.querySelector('.color-background');
const nameEl = swatch.parentElement.querySelector('.color-name'); const nameEl = swatch.parentElement.querySelector('.color-name');
const isSelected = selectedPalette.some(c => c.hex === color); const isSelected = selectedPalette.some(c => c.name === color);
if (isSelected) { if (isSelected) {
background.classList.add('chosen'); background.classList.add('chosen');