feat: ✨ overhaul gallery component (styles, indicators, a11y)
This commit is contained in:
Sebin Nyshkim
parent
bbf08a98cd
commit
8d95b82b89
3 changed files with 208 additions and 73 deletions
|
|
@ -322,6 +322,30 @@
|
|||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'chevron-left'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'chevron-right'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 23 KiB |
|
|
@ -1,54 +1,111 @@
|
|||
<script>
|
||||
const galleryTrack = document.querySelector('.gallery .track');
|
||||
const galleryElements = document.querySelectorAll('.gallery .track > *');
|
||||
const galleryIndicator = document.querySelector('.gallery .indicator');
|
||||
const galleryPrevious = document.querySelector('.gallery button.prev');
|
||||
const galleryNext = document.querySelector('.gallery button.next');
|
||||
const gallery = document.querySelector('.gallery');
|
||||
const track = gallery.querySelector('.track');
|
||||
const images = gallery.querySelectorAll('.track > *');
|
||||
const nav = gallery.querySelector('.gallery-nav');
|
||||
const prevButton = gallery.querySelector('button.prev');
|
||||
const nextButton = gallery.querySelector('button.next');
|
||||
|
||||
const next = () => {
|
||||
galleryTrack.scrollBy({
|
||||
left: galleryElements[0].scrollWidth,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
const prev = () => {
|
||||
galleryTrack.scrollBy({
|
||||
left: galleryElements[0].scrollWidth * -1,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
const progress = ({ target: { scrollLeft, scrollWidth, offsetWidth } }) => {
|
||||
galleryIndicator.style.width = `${(scrollLeft / (scrollWidth - offsetWidth)) * 100}%`;
|
||||
};
|
||||
const TOLERANCE = 2;
|
||||
|
||||
const isAtStart = () => Math.floor(track.scrollLeft) <= TOLERANCE;
|
||||
const isAtEnd = () => {
|
||||
galleryTrack.scrollLeft <= 0
|
||||
? (galleryPrevious.disabled = true)
|
||||
: (galleryPrevious.disabled = false);
|
||||
galleryTrack.scrollLeft >= galleryTrack.scrollWidth - galleryTrack.offsetWidth
|
||||
? (galleryNext.disabled = true)
|
||||
: (galleryNext.disabled = false);
|
||||
const { scrollLeft, offsetWidth, scrollWidth } = track;
|
||||
return Math.abs(scrollLeft + offsetWidth - scrollWidth) <= TOLERANCE;
|
||||
};
|
||||
|
||||
galleryPrevious.addEventListener('click', prev);
|
||||
galleryNext.addEventListener('click', next);
|
||||
galleryTrack.addEventListener('scroll', progress);
|
||||
galleryTrack.addEventListener('scroll', isAtEnd);
|
||||
document.addEventListener('DOMContentLoaded', isAtEnd);
|
||||
const updateAriaCurrent = (element, index) => {
|
||||
currentIndex === index
|
||||
? element.setAttribute('aria-current', 'true')
|
||||
: element.removeAttribute('aria-current');
|
||||
};
|
||||
|
||||
const updateActiveStates = (index) => {
|
||||
images.forEach(updateAriaCurrent);
|
||||
nav.querySelectorAll('.indicator-btn').forEach(updateAriaCurrent);
|
||||
prevButton.disabled = isAtStart();
|
||||
nextButton.disabled = isAtEnd();
|
||||
};
|
||||
|
||||
let currentIndex = 0;
|
||||
|
||||
const scrollToIndex = (index) => {
|
||||
if (index < 0 || index >= images.length || index === currentIndex) return;
|
||||
|
||||
currentIndex = index;
|
||||
images[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
|
||||
|
||||
updateActiveStates(index);
|
||||
};
|
||||
|
||||
const prev = () => scrollToIndex(currentIndex - 1);
|
||||
const next = () => scrollToIndex(currentIndex + 1);
|
||||
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(() => {
|
||||
scrollToIndex(currentIndex);
|
||||
}, 100);
|
||||
});
|
||||
resizeObserver.observe(track);
|
||||
|
||||
const galleryObserver = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting && entry.intersectionRatio >= 0.75) {
|
||||
const index = [...images].indexOf(entry.target);
|
||||
if (index !== -1) {
|
||||
currentIndex = index;
|
||||
updateActiveStates(currentIndex);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
{ root: track, threshold: 0.75, rootMargin: '0px' }
|
||||
);
|
||||
|
||||
const initializeGallery = () => {
|
||||
images.forEach((el, i) => {
|
||||
const btn = document.createElement('button');
|
||||
|
||||
if (i === 0) btn.setAttribute('aria-current', 'true');
|
||||
btn.classList.add('indicator-btn');
|
||||
btn.dataset.index = i;
|
||||
btn.innerText = i + 1;
|
||||
btn.setAttribute('aria-label', `Go to image ${i + 1} of ${images.length}`);
|
||||
btn.addEventListener('click', () => scrollToIndex(Number(btn.dataset.index)));
|
||||
|
||||
if (i === 0) el.setAttribute('aria-current', 'true');
|
||||
el.setAttribute('aria-label', `Image ${i + 1} of ${images.length}`);
|
||||
el.setAttribute('tabindex', '0');
|
||||
el.setAttribute('role', 'group');
|
||||
|
||||
nav.appendChild(btn);
|
||||
});
|
||||
|
||||
updateActiveStates(0);
|
||||
};
|
||||
|
||||
images.forEach((el) => galleryObserver.observe(el));
|
||||
prevButton.addEventListener('click', prev);
|
||||
nextButton.addEventListener('click', next);
|
||||
document.addEventListener('DOMContentLoaded', () => initializeGallery());
|
||||
</script>
|
||||
|
||||
<div class="gallery">
|
||||
<button class="prev"></button>
|
||||
<button class="next"></button>
|
||||
<section class="gallery" aria-label="Image gallery">
|
||||
<button class="prev" aria-label="Previous Image">
|
||||
<icon icon="chevron-left" webc:nokeep></icon>
|
||||
</button>
|
||||
<button class="next" aria-label="Next Image">
|
||||
<icon icon="chevron-right" webc:nokeep></icon>
|
||||
</button>
|
||||
|
||||
<div class="track">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<div class="indicator"></div>
|
||||
</div>
|
||||
<nav class="gallery-nav" aria-label="Gallery"></nav>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.gallery {
|
||||
|
|
@ -61,56 +118,74 @@
|
|||
gap: 1em;
|
||||
|
||||
& .prev,
|
||||
& .next {
|
||||
& .next,
|
||||
& .indicator-btn {
|
||||
position: relative;
|
||||
|
||||
grid-row: track;
|
||||
|
||||
font-size: 1.25em;
|
||||
color: var(--clr-text);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
background-color: var(--clr-box-background);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-box-gradient-start) 0%,
|
||||
var(--clr-box-gradient-end) 50%
|
||||
);
|
||||
|
||||
border: var(--border-thin) solid var(--clr-text);
|
||||
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
||||
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
padding: 0.75em;
|
||||
padding: 0.875em;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
@media (min-width: 32em) {
|
||||
font-size: 1.25em;
|
||||
&:active::after {
|
||||
background: linear-gradient(
|
||||
to top left,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
align-content: center;
|
||||
inset: var(--border-thin);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
& .prev,
|
||||
& .next {
|
||||
grid-row: track;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
& svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 0.375em;
|
||||
}
|
||||
}
|
||||
|
||||
& .prev {
|
||||
grid-column: prev;
|
||||
left: 0.5em;
|
||||
|
||||
&::after {
|
||||
content: '«' / 'Previous';
|
||||
}
|
||||
}
|
||||
|
||||
& .next {
|
||||
grid-column: next;
|
||||
right: 0.5em;
|
||||
|
||||
&::after {
|
||||
content: '»' / 'Next';
|
||||
}
|
||||
}
|
||||
|
||||
& .track {
|
||||
|
|
@ -121,13 +196,14 @@
|
|||
grid-auto-columns: 100%;
|
||||
gap: 2em;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
|
||||
& > * {
|
||||
margin-block: 0.25em 0;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -136,26 +212,56 @@
|
|||
}
|
||||
}
|
||||
|
||||
& .ref-image img {
|
||||
width: 100%;
|
||||
height: 35em;
|
||||
object-fit: cover;
|
||||
& .ref-image {
|
||||
& :first-child {
|
||||
grid-row: image / caption;
|
||||
}
|
||||
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 80vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
& .caption {
|
||||
font-size: 0.875em;
|
||||
text-wrap: balance;
|
||||
|
||||
background: oklch(from var(--clr-box-background) l c h / 0.75);
|
||||
|
||||
padding-block: 0.5em;
|
||||
padding-inline: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
& .indicator {
|
||||
grid-row: track;
|
||||
& .gallery-nav {
|
||||
--indicator-size: 2.5em;
|
||||
|
||||
grid-row: progress;
|
||||
grid-column: prev / next;
|
||||
place-self: start;
|
||||
|
||||
height: 0.25em;
|
||||
width: 1em;
|
||||
min-width: 1em;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(1em, 100%), var(--indicator-size)));
|
||||
gap: 0.5em;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
background-color: var(--clr-gallery-indicator);
|
||||
& .indicator-btn {
|
||||
font-size: 1em;
|
||||
width: var(--indicator-size);
|
||||
height: var(--indicator-size);
|
||||
padding: 0;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
z-index: 1;
|
||||
|
||||
transition: width 0.4s ease-in-out 0.1s;
|
||||
& .indicator-btn[aria-current='true']::after {
|
||||
background: linear-gradient(
|
||||
to top left,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,13 +17,17 @@
|
|||
<style>
|
||||
.ref-image {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-template-rows: [image-start] 1fr [image-end caption-start] auto [caption-end];
|
||||
place-content: center;
|
||||
row-gap: 1rem;
|
||||
|
||||
margin-block: 0;
|
||||
margin-inline: auto;
|
||||
|
||||
& :first-child {
|
||||
grid-area: image;
|
||||
}
|
||||
|
||||
& img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -38,6 +42,7 @@
|
|||
}
|
||||
|
||||
& .caption {
|
||||
grid-area: caption;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue