jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2026-01-11 08:16:29 +01:00
Code Packages Releases Activity

🐛 📺 v0.9.5-alpha (#44)

Browse Source 
* ⚡ 📺 package (version and publint)

* 🔤 docs typos

* 🐛 this address / fixes #43

* ⚡ tiny el optimalization

* 🔤 improve docs wording

* 🔤 case-studies/products.js (AbortSignal)

* 🔤 🐛 case-studies/image-gallery.js
This commit is contained in:
Jan Andrle
2025-03-21 14:43:25 +01:00
committed by GitHub
parent 4c450ae763
commit f2c85ec983
19 changed files with 180 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/components/examples/case-studies/image-gallery.js
View File

@@ -82,10 +82,10 @@ export function ImageGallery(images= imagesSample) {
closeLightbox();
break;
case 'ArrowLeft':
document.querySelector('.lightbox-prev-btn').click();
onPrevImage(e);
break;
case 'ArrowRight':
document.querySelector('.lightbox-next-btn').click();
onNextImage(e);
break;
}
}
@@ -126,12 +126,12 @@ export function ImageGallery(images= imagesSample) {
el("div", {
className: "gallery-item",
dataTag: image.alt.toLowerCase()
}).append(
}, onImageClick(image.id)).append(
el("img", {
src: image.src,
alt: image.alt,
loading: "lazy"
}, onImageClick(image.id)),
}),
el("div", { className: "gallery-item-caption" }).append(
el("h3", image.title),
el("p", image.alt)
@@ -146,41 +146,41 @@ export function ImageGallery(images= imagesSample) {
S.el(isLightboxOpen, open => !open
? el()
: el("div", { className: "lightbox-overlay" }, on("click", closeLightbox)).append(
el("div", {
className: "lightbox-content",
onClick: e => e.stopPropagation() // Prevent closing when clicking inside
}).append(
el("button", {
className: "lightbox-close-btn",
"aria-label": "Close lightbox"
}, on("click", closeLightbox)).append("×"),
el("div", {
className: "lightbox-content",
onClick: e => e.stopPropagation() // Prevent closing when clicking inside
}).append(
el("button", {
className: "lightbox-close-btn",
ariaLabel: "Close lightbox",
}, on("click", closeLightbox)).append("×"),
el("button", {
className: "lightbox-prev-btn",
"aria-label": "Previous image"
}, on("click", onPrevImage)).append("❮"),
el("button", {
className: "lightbox-prev-btn",
ariaLabel: "Previous image",
}, on("click", onPrevImage)).append("❮"),
el("button", {
className: "lightbox-next-btn",
"aria-label": "Next image"
}, on("click", onNextImage)).append("❯"),
el("button", {
className: "lightbox-next-btn",
ariaLabel: "Next image",
}, on("click", onNextImage)).append("❯"),
S.el(selectedImage, img => !img
? el()
: el("div", { className: "lightbox-image-container" }).append(
el("img", {
src: img.src,
alt: img.alt,
className: "lightbox-image"
}),
el("div", { className: "lightbox-caption" }).append(
el("h2", img.title),
el("p", img.alt)
)
)
S.el(selectedImage, img => !img
? el()
: el("div", { className: "lightbox-image-container" }).append(
el("img", {
src: img.src,
alt: img.alt,
className: "lightbox-image",
}),
el("div", { className: "lightbox-caption" }).append(
el("h2", img.title),
el("p", img.alt),
),
)
)
)
),
),
),
),
);
}