@hoangyell/gallery 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +85 -0
  3. package/package.json +48 -0
  4. package/src/Gallery.astro +715 -0
  5. package/src/env.d.ts +7 -0
  6. package/src/index.ts +1 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Hoang Yell
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,85 @@
1
+ # @hoangyell/gallery
2
+
3
+ [Astro](https://astro.build/) image gallery component with lightbox, pyramid multi-row layout, and accessible controls.
4
+
5
+ ## Features
6
+
7
+ - **Pyramid layout** — distribute images across rows with `rows` prop
8
+ - **Lightbox** — click to open, keyboard arrows, swipe, ESC to close
9
+ - **Corner rounding** — only the four outer corners of each group are rounded
10
+ - **Hover zoom** — image scales inside its cell without changing layout
11
+ - **Accessible** — focus management, ARIA labels, safe-area controls, reduced-motion support
12
+ - **Zero config** — plain CSS, no Tailwind required in the host project
13
+
14
+ ## Installation
15
+
16
+ ```sh
17
+ pnpm add @hoangyell/gallery
18
+ ```
19
+
20
+ ## Usage
21
+
22
+ ```astro
23
+ ---
24
+ import { Gallery } from "@hoangyell/gallery";
25
+
26
+ const photos = [
27
+ "/img/one.jpg",
28
+ "/img/two.jpg",
29
+ "/img/three.jpg",
30
+ ];
31
+ ---
32
+
33
+ <Gallery items={photos} rows={2} />
34
+ ```
35
+
36
+ ### In MDX
37
+
38
+ ```mdx
39
+ import { Gallery } from "@hoangyell/gallery";
40
+
41
+ <Gallery
42
+ items={[
43
+ "https://example.com/a.webp",
44
+ "https://example.com/b.webp",
45
+ { src: "https://example.com/c.webp", alt: "Temple gate", fit: "cover" },
46
+ ]}
47
+ rows={3}
48
+ />
49
+ ```
50
+
51
+ ## Props
52
+
53
+ | Prop | Type | Default | Description |
54
+ |---|---|---|---|
55
+ | `items` | `(string \| { src, alt?, fit? })[]` | `[]` | Image URLs or objects |
56
+ | `alts` | `string[]` | — | Alt text paired with string URLs |
57
+ | `rows` | `number` | auto (~3 per row) | Number of visual rows |
58
+ | `orientation` | `"landscape" \| "portrait"` | `"landscape"` | Item aspect ratio hint |
59
+ | `scale` | `number` | `1` | Gallery width scale (0–1) |
60
+ | `fit` | `ObjectFit` | `"cover"` | Default CSS object-fit |
61
+ | `class` | `string` | — | Extra wrapper class |
62
+
63
+ ## Customization
64
+
65
+ Override CSS custom properties on `.hy-gallery`:
66
+
67
+ ```css
68
+ .hy-gallery {
69
+ --hy-gallery-gap: 6px;
70
+ --hy-gallery-radius: 12px;
71
+ --hy-gallery-accent: #e11d48;
72
+ }
73
+ ```
74
+
75
+ | Variable | Default | Purpose |
76
+ |---|---|---|
77
+ | `--hy-gallery-gap` | `4px` | Grid gap between cells |
78
+ | `--hy-gallery-radius` | `1rem` | Outer corner radius |
79
+ | `--hy-gallery-bg` | `#f8fafc` | Item placeholder background |
80
+ | `--hy-gallery-overlay-bg` | `rgba(255,255,255,0.7)` | Lightbox backdrop |
81
+ | `--hy-gallery-accent` | `#2563eb` | Focus ring and hover accent |
82
+
83
+ ## License
84
+
85
+ [MIT](../../LICENSE)
package/package.json ADDED
@@ -0,0 +1,48 @@
1
+ {
2
+ "name": "@hoangyell/gallery",
3
+ "version": "1.0.0",
4
+ "description": "Astro image gallery with lightbox, pyramid multi-row layout, and accessible controls.",
5
+ "license": "MIT",
6
+ "type": "module",
7
+ "sideEffects": false,
8
+ "files": [
9
+ "src",
10
+ "README.md",
11
+ "LICENSE"
12
+ ],
13
+ "exports": {
14
+ ".": "./src/index.ts"
15
+ },
16
+ "keywords": [
17
+ "astro",
18
+ "gallery",
19
+ "lightbox",
20
+ "image-gallery",
21
+ "astro-component",
22
+ "mdx",
23
+ "photo-gallery"
24
+ ],
25
+ "author": "Hoang Yell <hoangyell@gmail.com> (https://hoangyell.com)",
26
+ "homepage": "https://github.com/HoangYell/hoangyell-gallery#readme",
27
+ "repository": {
28
+ "type": "git",
29
+ "url": "https://github.com/HoangYell/hoangyell-gallery.git",
30
+ "directory": "packages/astro"
31
+ },
32
+ "bugs": {
33
+ "url": "https://github.com/HoangYell/hoangyell-gallery/issues"
34
+ },
35
+ "publishConfig": {
36
+ "access": "public"
37
+ },
38
+ "peerDependencies": {
39
+ "astro": ">=5.0.0"
40
+ },
41
+ "devDependencies": {
42
+ "astro": "^6.0.8",
43
+ "typescript": "^5.9.3"
44
+ },
45
+ "scripts": {
46
+ "typecheck": "tsc --noEmit"
47
+ }
48
+ }
package/src/Gallery.astro ADDED
@@ -0,0 +1,715 @@
1
+ ---
2
+ /**
3
+ * @hoangyell/gallery — <Gallery /> component
4
+ *
5
+ * Image gallery with pyramid multi-row layout and accessible lightbox.
6
+ * Tap/click to open, arrow keys / swipe to navigate, ESC to close.
7
+ */
8
+
9
+ export type ObjectFit = "cover" | "contain" | "fill" | "none" | "scale-down";
10
+
11
+ export interface GalleryItemInput {
12
+ src: string;
13
+ alt?: string;
14
+ fit?: ObjectFit;
15
+ }
16
+
17
+ export interface Props {
18
+ /** Image URLs or { src, alt, fit } objects. */
19
+ items?: (string | GalleryItemInput)[];
20
+ /** Alt text array paired with string[] items. */
21
+ alts?: string[];
22
+ /** Extra CSS class on the wrapper. */
23
+ class?: string;
24
+ /** Number of visual rows (pyramid distribution). Auto if omitted. */
25
+ rows?: number;
26
+ /** Aspect ratio hint for items. */
27
+ orientation?: "landscape" | "portrait";
28
+ /** Scale factor to reduce gallery width (1 = full). */
29
+ scale?: number;
30
+ /** Global object-fit for all items unless overridden per-item. */
31
+ fit?: ObjectFit;
32
+ }
33
+
34
+ const {
35
+ class: className = "",
36
+ rows,
37
+ orientation = "landscape",
38
+ scale = 1,
39
+ fit = "cover",
40
+ } = Astro.props;
41
+
42
+ const rawItems = Array.isArray(Astro.props.items) ? Astro.props.items : [];
43
+ const rawAlts = Array.isArray(Astro.props.alts) ? Astro.props.alts : [];
44
+
45
+ type GalleryItem = { src: string; alt: string; fit: string };
46
+
47
+ function altFromUrl(url: string): string {
48
+ try {
49
+ const filename = url.split("/").pop()?.split("?")[0] || "";
50
+ return filename.replace(/\.[^.]+$/, "").replace(/[-_]/g, " ");
51
+ } catch {
52
+ return "";
53
+ }
54
+ }
55
+
56
+ const galleryItems: GalleryItem[] = rawItems
57
+ .map((item, i) => {
58
+ if (typeof item === "string") {
59
+ return {
60
+ src: item,
61
+ alt: rawAlts[i] || altFromUrl(item),
62
+ fit: String(fit),
63
+ };
64
+ }
65
+ const itemFit = item?.fit || fit;
66
+ return {
67
+ src: item?.src || "",
68
+ alt: item?.alt || rawAlts[i] || altFromUrl(item?.src || ""),
69
+ fit: String(itemFit),
70
+ };
71
+ })
72
+ .filter((item) => item.src !== "");
73
+
74
+ const resolvedRows =
75
+ rows !== undefined ? Math.max(1, rows) : Math.ceil(galleryItems.length / 3);
76
+
77
+ let groupedItems: GalleryItem[][] = [];
78
+
79
+ if (resolvedRows <= 1 || galleryItems.length <= 1) {
80
+ groupedItems = [galleryItems];
81
+ } else {
82
+ const n = galleryItems.length;
83
+ const actualRows = Math.max(1, Math.min(resolvedRows, n));
84
+ const base = Math.floor(n / actualRows);
85
+ const remainder = n % actualRows;
86
+
87
+ let idx = 0;
88
+ for (let i = 0; i < actualRows; i++) {
89
+ const isBottomRow = i >= actualRows - remainder;
90
+ const rowSize = isBottomRow ? base + 1 : base;
91
+ groupedItems.push(galleryItems.slice(idx, idx + rowSize));
92
+ idx += rowSize;
93
+ }
94
+ }
95
+ ---
96
+
97
+ {
98
+ galleryItems.length > 0 && (
99
+ <div
100
+ class={`hy-gallery ${className}`}
101
+ data-hy-gallery
102
+ data-orientation={orientation}
103
+ style={scale !== 1 ? `width: ${scale * 100}%; margin: 2rem auto;` : undefined}
104
+ >
105
+ {groupedItems.map((group, rowIdx) => {
106
+ const isFirstRow = rowIdx === 0;
107
+ const isLastRow = rowIdx === groupedItems.length - 1;
108
+ return (
109
+ <div class="hy-gallery-row" style={`--row-cols: ${group.length};`}>
110
+ {group.map((item, colIdx) => {
111
+ const isFirstCol = colIdx === 0;
112
+ const isLastCol = colIdx === group.length - 1;
113
+ const cornerClasses = [
114
+ isFirstRow && isFirstCol && "is-tl",
115
+ isFirstRow && isLastCol && "is-tr",
116
+ isLastRow && isFirstCol && "is-bl",
117
+ isLastRow && isLastCol && "is-br",
118
+ ]
119
+ .filter(Boolean)
120
+ .join(" ");
121
+ return (
122
+ <button
123
+ type="button"
124
+ class={`hy-gallery-item ${cornerClasses}`}
125
+ data-zoom-src={item.src}
126
+ data-alt={item.alt}
127
+ aria-label={
128
+ item.alt ? `View full size: ${item.alt}` : "View full size image"
129
+ }
130
+ >
131
+ <img
132
+ src={item.src}
133
+ alt={item.alt}
134
+ loading="lazy"
135
+ decoding="async"
136
+ class="hy-gallery-img"
137
+ style={`object-fit: ${item.fit} !important;`}
138
+ />
139
+ </button>
140
+ );
141
+ })}
142
+ </div>
143
+ );
144
+ })}
145
+ </div>
146
+ )
147
+ }
148
+
149
+ <style>
150
+ /* ── Custom properties (override on .hy-gallery or :root) ── */
151
+ .hy-gallery {
152
+ --hy-gallery-gap: 4px;
153
+ --hy-gallery-radius: 1rem;
154
+ --hy-gallery-bg: #f8fafc;
155
+ --hy-gallery-overlay-bg: rgba(255, 255, 255, 0.7);
156
+ --hy-gallery-accent: #2563eb;
157
+ --hy-gallery-border: #e2e8f0;
158
+ --hy-gallery-text: #334155;
159
+ --hy-gallery-control-bg: rgba(255, 255, 255, 0.95);
160
+ }
161
+
162
+ @media (prefers-color-scheme: dark) {
163
+ .hy-gallery {
164
+ --hy-gallery-bg: #0f172a;
165
+ --hy-gallery-overlay-bg: rgba(2, 6, 23, 0.8);
166
+ --hy-gallery-accent: #60a5fa;
167
+ --hy-gallery-border: #334155;
168
+ --hy-gallery-text: #e2e8f0;
169
+ --hy-gallery-control-bg: rgba(30, 41, 59, 0.95);
170
+ }
171
+ }
172
+
173
+ .hy-gallery {
174
+ display: flex;
175
+ flex-direction: column;
176
+ gap: var(--hy-gallery-gap);
177
+ margin-block: 2rem;
178
+ margin-inline: -1rem;
179
+ }
180
+
181
+ @media (min-width: 640px) {
182
+ .hy-gallery {
183
+ margin-inline: 0;
184
+ }
185
+ }
186
+
187
+ .hy-gallery-row {
188
+ display: grid;
189
+ gap: var(--hy-gallery-gap);
190
+ grid-template-columns: repeat(var(--row-cols, 1), minmax(0, 1fr));
191
+ }
192
+
193
+ .hy-gallery-item {
194
+ display: block;
195
+ width: 100%;
196
+ position: relative;
197
+ overflow: hidden;
198
+ background: var(--hy-gallery-bg);
199
+ cursor: zoom-in;
200
+ border: none;
201
+ padding: 0;
202
+ aspect-ratio: 4 / 3;
203
+ contain: paint;
204
+ isolation: isolate;
205
+ transition: box-shadow 0.3s ease;
206
+ }
207
+
208
+ .hy-gallery-item.is-tl {
209
+ border-top-left-radius: var(--hy-gallery-radius);
210
+ }
211
+ .hy-gallery-item.is-tr {
212
+ border-top-right-radius: var(--hy-gallery-radius);
213
+ }
214
+ .hy-gallery-item.is-bl {
215
+ border-bottom-left-radius: var(--hy-gallery-radius);
216
+ }
217
+ .hy-gallery-item.is-br {
218
+ border-bottom-right-radius: var(--hy-gallery-radius);
219
+ }
220
+
221
+ @media (max-width: 639px) {
222
+ .hy-gallery-item.is-tl,
223
+ .hy-gallery-item.is-tr,
224
+ .hy-gallery-item.is-bl,
225
+ .hy-gallery-item.is-br {
226
+ border-radius: 0;
227
+ }
228
+ }
229
+
230
+ .hy-gallery[data-orientation="portrait"] .hy-gallery-item {
231
+ aspect-ratio: 3 / 4;
232
+ }
233
+
234
+ @media (max-width: 639px) {
235
+ .hy-gallery-item {
236
+ aspect-ratio: 1 / 1;
237
+ }
238
+ .hy-gallery[data-orientation="portrait"] .hy-gallery-item {
239
+ aspect-ratio: 4 / 5;
240
+ }
241
+ }
242
+
243
+ .hy-gallery-img {
244
+ position: absolute;
245
+ inset: 0;
246
+ width: 100%;
247
+ height: 100%;
248
+ margin: 0;
249
+ padding: 0;
250
+ object-fit: cover;
251
+ object-position: center;
252
+ aspect-ratio: auto;
253
+ max-width: none;
254
+ max-height: none;
255
+ transform-origin: center;
256
+ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
257
+ }
258
+
259
+ .hy-gallery-item:hover .hy-gallery-img,
260
+ .hy-gallery-item:focus-visible .hy-gallery-img {
261
+ will-change: transform;
262
+ transform: scale(1.06);
263
+ }
264
+
265
+ @media (prefers-reduced-motion: reduce) {
266
+ .hy-gallery-img {
267
+ transition: none !important;
268
+ }
269
+ .hy-gallery-item:hover .hy-gallery-img,
270
+ .hy-gallery-item:focus-visible .hy-gallery-img {
271
+ transform: none !important;
272
+ }
273
+ }
274
+
275
+ .hy-gallery-item:focus {
276
+ outline: none;
277
+ }
278
+
279
+ .hy-gallery-item:focus-visible {
280
+ outline: 2px solid var(--hy-gallery-accent);
281
+ outline-offset: -2px;
282
+ z-index: 1;
283
+ }
284
+
285
+ /* ── Lightbox overlay ── */
286
+ :global(.hy-gallery-overlay) {
287
+ position: fixed;
288
+ inset: 0;
289
+ z-index: 99999;
290
+ display: flex;
291
+ align-items: center;
292
+ justify-content: center;
293
+ background: var(--hy-gallery-overlay-bg);
294
+ backdrop-filter: blur(12px);
295
+ opacity: 0;
296
+ transition: opacity 0.3s ease;
297
+ cursor: zoom-out;
298
+ }
299
+
300
+ :global(.hy-gallery-overlay.is-active) {
301
+ opacity: 1;
302
+ }
303
+
304
+ :global(.hy-gallery-overlay-content) {
305
+ position: relative;
306
+ width: 90vw;
307
+ height: 90vh;
308
+ display: flex;
309
+ align-items: center;
310
+ justify-content: center;
311
+ }
312
+
313
+ :global(.hy-gallery-overlay-img) {
314
+ max-width: 100%;
315
+ max-height: 100%;
316
+ object-fit: contain;
317
+ border-radius: 0.5rem;
318
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
319
+ border: 1px solid var(--hy-gallery-border);
320
+ cursor: default;
321
+ user-select: none;
322
+ transform: scale(0.92);
323
+ transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
324
+ will-change: transform, opacity;
325
+ }
326
+
327
+ :global(.hy-gallery-overlay.is-active .hy-gallery-overlay-img) {
328
+ transform: scale(1);
329
+ }
330
+
331
+ :global(.hy-gallery-slide-anim) {
332
+ animation: hy-gallery-slide-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
333
+ }
334
+
335
+ @keyframes hy-gallery-slide-in {
336
+ from {
337
+ opacity: 0;
338
+ transform: scale(0.96);
339
+ }
340
+ to {
341
+ opacity: 1;
342
+ transform: scale(1);
343
+ }
344
+ }
345
+
346
+ :global(.hy-gallery-counter) {
347
+ position: absolute;
348
+ top: max(env(safe-area-inset-top, 0px), 16px);
349
+ left: max(env(safe-area-inset-left, 0px), 16px);
350
+ width: 2.5rem;
351
+ height: 2.5rem;
352
+ display: flex;
353
+ align-items: center;
354
+ justify-content: center;
355
+ border-radius: 9999px;
356
+ background: var(--hy-gallery-control-bg);
357
+ border: 1px solid var(--hy-gallery-border);
358
+ font-family: system-ui, sans-serif;
359
+ font-size: 0.6875rem;
360
+ font-weight: 700;
361
+ letter-spacing: 0.05em;
362
+ color: var(--hy-gallery-text);
363
+ pointer-events: none;
364
+ user-select: none;
365
+ z-index: 10;
366
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
367
+ backdrop-filter: blur(4px);
368
+ }
369
+
370
+ :global(.hy-gallery-close) {
371
+ position: absolute;
372
+ top: max(env(safe-area-inset-top, 0px), 16px);
373
+ right: max(env(safe-area-inset-right, 0px), 16px);
374
+ width: 2.5rem;
375
+ height: 2.5rem;
376
+ display: flex;
377
+ align-items: center;
378
+ justify-content: center;
379
+ border: 1px solid var(--hy-gallery-border);
380
+ border-radius: 9999px;
381
+ background: var(--hy-gallery-control-bg);
382
+ color: var(--hy-gallery-text);
383
+ cursor: pointer;
384
+ transition: transform 0.2s ease;
385
+ z-index: 10;
386
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
387
+ backdrop-filter: blur(4px);
388
+ }
389
+
390
+ :global(.hy-gallery-nav) {
391
+ position: absolute;
392
+ top: 50%;
393
+ transform: translateY(-50%);
394
+ width: 2.75rem;
395
+ height: 2.75rem;
396
+ display: flex;
397
+ align-items: center;
398
+ justify-content: center;
399
+ border: 1px solid var(--hy-gallery-border);
400
+ border-radius: 9999px;
401
+ background: var(--hy-gallery-control-bg);
402
+ color: var(--hy-gallery-text);
403
+ cursor: pointer;
404
+ transition: transform 0.2s ease;
405
+ z-index: 10;
406
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
407
+ backdrop-filter: blur(4px);
408
+ }
409
+
410
+ :global(.hy-gallery-nav-prev) {
411
+ left: max(env(safe-area-inset-left, 0px), 16px);
412
+ }
413
+
414
+ :global(.hy-gallery-nav-next) {
415
+ right: max(env(safe-area-inset-right, 0px), 16px);
416
+ }
417
+
418
+ :global(.hy-gallery-close:hover),
419
+ :global(.hy-gallery-nav:hover),
420
+ :global(.hy-gallery-close:focus-visible),
421
+ :global(.hy-gallery-nav:focus-visible) {
422
+ transform: scale(1.1);
423
+ color: var(--hy-gallery-accent);
424
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
425
+ }
426
+
427
+ :global(.hy-gallery-nav:hover),
428
+ :global(.hy-gallery-nav:focus-visible) {
429
+ transform: translateY(-50%) scale(1.1);
430
+ }
431
+
432
+ @media (max-width: 639px) {
433
+ :global(.hy-gallery-nav) {
434
+ width: 2.5rem;
435
+ height: 2.5rem;
436
+ }
437
+ :global(.hy-gallery-nav-prev) {
438
+ left: max(env(safe-area-inset-left, 0px), 8px);
439
+ }
440
+ :global(.hy-gallery-nav-next) {
441
+ right: max(env(safe-area-inset-right, 0px), 8px);
442
+ }
443
+ }
444
+ </style>
445
+
446
+ <script>
447
+ class GalleryLightbox {
448
+ gallery: HTMLElement;
449
+ items: HTMLButtonElement[];
450
+ overlay: HTMLElement | null;
451
+ imgEl: HTMLImageElement | null;
452
+ counterEl: HTMLElement | null;
453
+ prevBtn: HTMLButtonElement | null;
454
+ nextBtn: HTMLButtonElement | null;
455
+ currentIndex: number;
456
+ touchStartX: number;
457
+ touchStartY: number;
458
+
459
+ constructor(el: HTMLElement) {
460
+ this.gallery = el;
461
+ this.items = Array.from(
462
+ el.querySelectorAll<HTMLButtonElement>(".hy-gallery-item"),
463
+ );
464
+ this.overlay = null;
465
+ this.imgEl = null;
466
+ this.counterEl = null;
467
+ this.prevBtn = null;
468
+ this.nextBtn = null;
469
+ this.currentIndex = -1;
470
+ this.touchStartX = 0;
471
+ this.touchStartY = 0;
472
+
473
+ this.bind();
474
+ document.addEventListener("astro:before-swap", this.forceClose);
475
+ }
476
+
477
+ bind = () => {
478
+ this.gallery.addEventListener("click", (e) => {
479
+ const btn = (e.target as HTMLElement).closest<HTMLButtonElement>(
480
+ ".hy-gallery-item",
481
+ );
482
+ if (!btn) return;
483
+ const index = this.items.indexOf(btn);
484
+ if (index > -1) this.open(index);
485
+ });
486
+ };
487
+
488
+ forceClose = () => {
489
+ if (this.overlay) {
490
+ this.overlay.remove();
491
+ this.overlay = null;
492
+ this.imgEl = null;
493
+ this.counterEl = null;
494
+
495
+ document.removeEventListener("keydown", this.handleKey);
496
+ document.removeEventListener("gesturestart", this.preventZoom);
497
+ document.body.style.overflow = "";
498
+ const main = document.querySelector("main");
499
+ if (main) main.removeAttribute("inert");
500
+ }
501
+ document.removeEventListener("astro:before-swap", this.forceClose);
502
+ };
503
+
504
+ open = (index: number) => {
505
+ this.currentIndex = index;
506
+ const src = this.items[index].dataset.zoomSrc || "";
507
+ const alt = this.items[index].dataset.alt || "";
508
+
509
+ this.buildOverlay();
510
+ if (!this.imgEl || !this.overlay) return;
511
+
512
+ this.imgEl.src = src;
513
+ this.imgEl.alt = alt;
514
+ this.updateCounter();
515
+ this.updateNavButtons();
516
+ this.preload(index + 1);
517
+
518
+ document.body.appendChild(this.overlay);
519
+ document.body.style.overflow = "hidden";
520
+ const main = document.querySelector("main");
521
+ if (main) main.setAttribute("inert", "");
522
+ this.overlay.focus();
523
+
524
+ document.addEventListener("gesturestart", this.preventZoom, {
525
+ passive: false,
526
+ });
527
+
528
+ requestAnimationFrame(() => {
529
+ this.overlay?.classList.add("is-active");
530
+ });
531
+ };
532
+
533
+ buildOverlay = () => {
534
+ if (this.overlay) return;
535
+
536
+ this.overlay = document.createElement("div");
537
+ this.overlay.className = "hy-gallery-overlay";
538
+ this.overlay.tabIndex = -1;
539
+ this.overlay.setAttribute("role", "dialog");
540
+ this.overlay.setAttribute("aria-modal", "true");
541
+ this.overlay.setAttribute("aria-label", "Image viewer");
542
+
543
+ const closeBtn = document.createElement("button");
544
+ closeBtn.className = "hy-gallery-close";
545
+ closeBtn.setAttribute("aria-label", "Close");
546
+ closeBtn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
547
+ closeBtn.addEventListener("click", this.close);
548
+
549
+ this.prevBtn = document.createElement("button");
550
+ this.prevBtn.className = "hy-gallery-nav hy-gallery-nav-prev";
551
+ this.prevBtn.setAttribute("aria-label", "Previous image");
552
+ this.prevBtn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>`;
553
+ this.prevBtn.addEventListener("click", (e) => {
554
+ e.stopPropagation();
555
+ this.navigate(-1);
556
+ });
557
+
558
+ this.nextBtn = document.createElement("button");
559
+ this.nextBtn.className = "hy-gallery-nav hy-gallery-nav-next";
560
+ this.nextBtn.setAttribute("aria-label", "Next image");
561
+ this.nextBtn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>`;
562
+ this.nextBtn.addEventListener("click", (e) => {
563
+ e.stopPropagation();
564
+ this.navigate(1);
565
+ });
566
+
567
+ const content = document.createElement("div");
568
+ content.className = "hy-gallery-overlay-content";
569
+
570
+ this.imgEl = document.createElement("img");
571
+ this.imgEl.className = "hy-gallery-overlay-img";
572
+ this.imgEl.setAttribute("decoding", "sync");
573
+
574
+ this.counterEl = document.createElement("div");
575
+ this.counterEl.className = "hy-gallery-counter";
576
+ this.counterEl.setAttribute("aria-hidden", "true");
577
+
578
+ content.appendChild(this.imgEl);
579
+ this.overlay.append(closeBtn, this.prevBtn, this.nextBtn, content, this.counterEl);
580
+
581
+ if (this.items.length <= 1) {
582
+ this.prevBtn.style.display = "none";
583
+ this.nextBtn.style.display = "none";
584
+ this.counterEl.style.display = "none";
585
+ }
586
+
587
+ this.overlay.addEventListener("click", this.handleOverlayClick);
588
+ this.overlay.addEventListener("touchstart", this.handleTouchStart, {
589
+ passive: true,
590
+ });
591
+ this.overlay.addEventListener("touchend", this.handleTouchEnd, {
592
+ passive: true,
593
+ });
594
+ document.addEventListener("keydown", this.handleKey);
595
+ };
596
+
597
+ close = () => {
598
+ if (!this.overlay) return;
599
+
600
+ this.overlay.classList.remove("is-active");
601
+
602
+ setTimeout(() => {
603
+ this.overlay?.parentNode?.removeChild(this.overlay);
604
+ this.overlay = null;
605
+ this.imgEl = null;
606
+ this.counterEl = null;
607
+
608
+ document.body.style.overflow = "";
609
+ const main = document.querySelector("main");
610
+ if (main) main.removeAttribute("inert");
611
+
612
+ document.removeEventListener("keydown", this.handleKey);
613
+ document.removeEventListener("gesturestart", this.preventZoom);
614
+
615
+ if (this.currentIndex >= 0 && this.currentIndex < this.items.length) {
616
+ this.items[this.currentIndex].focus();
617
+ }
618
+ }, 300);
619
+ };
620
+
621
+ navigate = (dir: number) => {
622
+ const next = this.currentIndex + dir;
623
+ if (next < 0 || next >= this.items.length) return;
624
+
625
+ this.currentIndex = next;
626
+ const content = this.overlay?.querySelector(".hy-gallery-overlay-content");
627
+ if (!content || !this.imgEl) return;
628
+
629
+ const oldImg = this.imgEl;
630
+ this.imgEl = document.createElement("img");
631
+ this.imgEl.className = "hy-gallery-overlay-img hy-gallery-slide-anim";
632
+ this.imgEl.setAttribute("decoding", "sync");
633
+
634
+ const src = this.items[next].dataset.zoomSrc || "";
635
+ const alt = this.items[next].dataset.alt || "";
636
+
637
+ this.imgEl.src = src;
638
+ this.imgEl.alt = alt;
639
+
640
+ content.replaceChild(this.imgEl, oldImg);
641
+
642
+ this.updateCounter();
643
+ this.updateNavButtons();
644
+ this.preload(next + dir);
645
+ };
646
+
647
+ preload = (index: number) => {
648
+ if (index >= 0 && index < this.items.length) {
649
+ const nextSrc = this.items[index].dataset.zoomSrc;
650
+ if (nextSrc) new Image().src = nextSrc;
651
+ }
652
+ };
653
+
654
+ updateNavButtons = () => {
655
+ if (!this.prevBtn || !this.nextBtn) return;
656
+ this.prevBtn.style.visibility = this.currentIndex <= 0 ? "hidden" : "";
657
+ this.nextBtn.style.visibility =
658
+ this.currentIndex >= this.items.length - 1 ? "hidden" : "";
659
+ };
660
+
661
+ updateCounter = () => {
662
+ if (this.counterEl) {
663
+ this.counterEl.textContent = `${this.currentIndex + 1}/${this.items.length}`;
664
+ }
665
+ };
666
+
667
+ handleOverlayClick = (e: MouseEvent) => {
668
+ const target = e.target as HTMLElement;
669
+ if (
670
+ target.classList.contains("hy-gallery-overlay") ||
671
+ target.classList.contains("hy-gallery-overlay-content")
672
+ ) {
673
+ this.close();
674
+ }
675
+ };
676
+
677
+ handleKey = (e: KeyboardEvent) => {
678
+ if (e.key === "Escape") this.close();
679
+ else if (e.key === "ArrowLeft") this.navigate(-1);
680
+ else if (e.key === "ArrowRight") this.navigate(1);
681
+ };
682
+
683
+ handleTouchStart = (e: TouchEvent) => {
684
+ this.touchStartX = e.changedTouches[0].screenX;
685
+ this.touchStartY = e.changedTouches[0].screenY;
686
+ };
687
+
688
+ handleTouchEnd = (e: TouchEvent) => {
689
+ const diffX = e.changedTouches[0].screenX - this.touchStartX;
690
+ const diffY = e.changedTouches[0].screenY - this.touchStartY;
691
+ if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
692
+ if (diffX > 0) this.navigate(-1);
693
+ else this.navigate(1);
694
+ }
695
+ };
696
+
697
+ preventZoom = (e: Event) => {
698
+ if (e.type === "gesturestart") {
699
+ e.preventDefault();
700
+ }
701
+ };
702
+ }
703
+
704
+ function initGalleries() {
705
+ document.querySelectorAll("[data-hy-gallery]").forEach((el) => {
706
+ if (!el.hasAttribute("data-hy-gallery-bound")) {
707
+ el.setAttribute("data-hy-gallery-bound", "");
708
+ new GalleryLightbox(el as HTMLElement);
709
+ }
710
+ });
711
+ }
712
+
713
+ initGalleries();
714
+ document.addEventListener("astro:page-load", initGalleries);
715
+ </script>
package/src/env.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /// <reference types="astro/client" />
2
+
3
+ declare module "*.astro" {
4
+ import type { AstroComponentFactory } from "astro/runtime/server/index.js";
5
+ const Component: AstroComponentFactory;
6
+ export default Component;
7
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as Gallery } from "./Gallery.astro";