Skip to content

Commit 055af05

Browse files
Some code tweaks
- Rename: remove button → delete button - Show the delete color button on interaction - Don't use slots in selectors - Remove redundant comments
1 parent 0936f32 commit 055af05

File tree

2 files changed

+15
-10
lines changed

2 files changed

+15
-10
lines changed

src/color-scale/color-scale.css

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ color-swatch {
1212
margin: 0;
1313
flex: 1;
1414

15+
&:not(:hover, :focus-within) {
16+
.delete-button {
17+
opacity: 0;
18+
transition-duration: 0ms;
19+
}
20+
}
21+
1522
.color-name, input.color {
1623
--_border-color: var(--border-color, color-mix(in oklab, currentcolor 70%, oklab(none none none / 0%)));
1724

@@ -26,7 +33,7 @@ color-swatch {
2633
}
2734
}
2835

29-
.remove-button {
36+
.delete-button {
3037
all: unset;
3138
position: absolute;
3239
inset-inline-end: .1em;
@@ -49,7 +56,7 @@ color-swatch {
4956

5057
cursor: pointer;
5158

52-
transition: transform .2s;
59+
transition: transform .2s, opacity .2s;
5360

5461
&:is(:hover, :focus) {
5562
transform: scale(1.1);

src/color-scale/color-scale.js

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,10 @@ const Self = class ColorScale extends ColorElement {
6161
this.updateColor(source);
6262
}
6363
else if (event.type === "input") {
64-
// Update color name
6564
this.updateColorName(source.closest("color-swatch"), source.value);
6665
}
67-
else if (event.type === "click" && source.matches("button.remove-button")) {
68-
// Remove color
69-
this.removeColor(source.closest("color-swatch"));
66+
else if (event.type === "click" && source.matches("button.delete-button")) {
67+
this.deleteColor(source.closest("color-swatch"));
7068
}
7169

7270
this.dispatchEvent(new event.constructor(event.type, {...event}));
@@ -143,7 +141,7 @@ const Self = class ColorScale extends ColorElement {
143141
this.render();
144142

145143
// Preserve the cursor position — set it to the end of the input
146-
let input = swatch.querySelector("input:not([slot]");
144+
let input = swatch.querySelector("input.color.editable");
147145
let end = input.value.length;
148146
input.setSelectionRange(end, end);
149147
input.focus();
@@ -168,13 +166,13 @@ const Self = class ColorScale extends ColorElement {
168166
this.colors = Object.fromEntries(colors);
169167
}
170168

171-
removeColor (swatch) {
169+
deleteColor (swatch) {
172170
if (!swatch) {
173171
return;
174172
}
175173

176174
if (swatch.matches(".intermediate")) {
177-
console.warn("Cannot remove intermediate colors. They are calculated automatically and will be re-added when the color scale is re-rendered the next time.");
175+
console.warn("Cannot delete intermediate colors. They are calculated automatically and will be re-added when the color scale is re-rendered the next time.");
178176
return;
179177
}
180178

@@ -232,7 +230,7 @@ const Self = class ColorScale extends ColorElement {
232230
if (this.editable.color) {
233231
// FIXME: What if there is content in the slots?
234232
html += `<input class="color editable" value="${ color }" />`;
235-
html += `<button slot="swatch-content" class="remove-button" title="Remove color">❌</button>`;
233+
html += `<button slot="swatch-content" class="delete-button" title="Delete color">❌</button>`;
236234
}
237235

238236
swatch.innerHTML = html;

0 commit comments

Comments
 (0)