nichoth.com
forked from
grain.social/grain-pwa
WIP PWA for Grain
feat: improve carousel dots with sliding window for many images
- Show all dots for galleries with 5 or fewer images
- Use sliding window of 5 dots for larger galleries
- Dots shrink based on distance from current (small, tiny)
- Active dot is white for visibility
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
chadtmiller.com
+42
-5
+42
-5
src/components/molecules/grain-carousel-dots.js
+42
-5
src/components/molecules/grain-carousel-dots.js
···
10
10
:host {
11
11
display: flex;
12
12
justify-content: center;
13
+
align-items: center;
13
14
gap: 4px;
14
15
padding: var(--space-sm) 0;
15
16
}
···
23
24
}
24
25
.dot.active {
25
26
opacity: 1;
26
-
background: var(--color-accent);
27
+
background: white;
28
+
}
29
+
.dot.small {
30
+
width: 4px;
31
+
height: 4px;
32
+
opacity: 0.3;
33
+
}
34
+
.dot.tiny {
35
+
width: 3px;
36
+
height: 3px;
37
+
opacity: 0.2;
27
38
}
28
39
`;
29
40
···
33
44
this.current = 0;
34
45
}
35
46
47
+
#getDotClass(index) {
48
+
const distance = Math.abs(index - this.current);
49
+
if (index === this.current) return 'dot active';
50
+
if (distance === 1) return 'dot';
51
+
if (distance === 2) return 'dot small';
52
+
return 'dot tiny';
53
+
}
54
+
36
55
render() {
37
56
if (this.total <= 1) return null;
38
57
39
-
const dots = Array.from({ length: Math.min(this.total, 5) }, (_, i) => i);
58
+
// For 5 or fewer, show all dots
59
+
if (this.total <= 5) {
60
+
return html`
61
+
${Array.from({ length: this.total }, (_, i) => html`
62
+
<div class="${this.#getDotClass(i)}"></div>
63
+
`)}
64
+
`;
65
+
}
66
+
67
+
// For more than 5, use sliding window of 5 dots centered on current
68
+
const maxVisible = 5;
69
+
let start = Math.max(0, this.current - 2);
70
+
let end = start + maxVisible;
71
+
72
+
if (end > this.total) {
73
+
end = this.total;
74
+
start = end - maxVisible;
75
+
}
40
76
41
77
return html`
42
-
${dots.map(i => html`
43
-
<div class="dot ${i === this.current ? 'active' : ''}"></div>
44
-
`)}
78
+
${Array.from({ length: end - start }, (_, i) => {
79
+
const index = start + i;
80
+
return html`<div class="${this.#getDotClass(index)}"></div>`;
81
+
})}
45
82
`;
46
83
}
47
84
}