refactor: 🚚 rename gallery to slider
It will do more than just slide images
This commit is contained in:
parent
f5f7cf5d94
commit
b85675eb45
1 changed files with 0 additions and 0 deletions
264
src/components/slider.webc
Normal file
264
src/components/slider.webc
Normal file
|
|
@ -0,0 +1,264 @@
|
|||
<script>
|
||||
const gallery = document.querySelector('.gallery');
|
||||
const track = gallery.querySelector('.track');
|
||||
const images = Array.from(gallery.querySelectorAll('.track > *'));
|
||||
const nav = gallery.querySelector('.gallery-nav');
|
||||
const prevButton = gallery.querySelector('button.prev');
|
||||
const nextButton = gallery.querySelector('button.next');
|
||||
|
||||
const TOLERANCE = 2;
|
||||
|
||||
const debounce = (fn, delay = 300) => {
|
||||
let timer;
|
||||
return function (...args) {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => fn.apply(fn, args), delay);
|
||||
};
|
||||
};
|
||||
|
||||
const isAtStart = () => Math.floor(track.scrollLeft) <= TOLERANCE;
|
||||
const isAtEnd = () =>
|
||||
Math.abs(track.scrollLeft + track.offsetWidth - track.scrollWidth) <= TOLERANCE;
|
||||
|
||||
const updateAriaCurrent = (element, index) => {
|
||||
currentIndex === index
|
||||
? element.setAttribute('aria-current', 'true')
|
||||
: element.removeAttribute('aria-current');
|
||||
};
|
||||
|
||||
const updateActiveStates = () => {
|
||||
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();
|
||||
};
|
||||
|
||||
const prev = () => scrollToIndex(currentIndex - 1);
|
||||
const next = () => scrollToIndex(currentIndex + 1);
|
||||
|
||||
const resizeObserver = new ResizeObserver(() => debounce(scrollToIndex(currentIndex)));
|
||||
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();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
{ 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();
|
||||
};
|
||||
|
||||
images.forEach((el) => galleryObserver.observe(el));
|
||||
prevButton.addEventListener('click', prev);
|
||||
nextButton.addEventListener('click', next);
|
||||
track.addEventListener('scroll', debounce(updateActiveStates, 100));
|
||||
document.addEventListener('DOMContentLoaded', initializeGallery);
|
||||
</script>
|
||||
|
||||
<section aria-label="Image gallery" webc:root="override">
|
||||
<button class="prev" aria-label="Previous Image">
|
||||
<icon icon="fa6-solid:chevron-left"></icon>
|
||||
</button>
|
||||
<button class="next" aria-label="Next Image">
|
||||
<icon icon="fa6-solid:chevron-right"></icon>
|
||||
</button>
|
||||
|
||||
<div class="track">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<nav class="gallery-nav" aria-label="Gallery"></nav>
|
||||
</section>
|
||||
|
||||
<style webc:scoped="gallery">
|
||||
:host {
|
||||
display: grid;
|
||||
grid-auto-columns: auto 1fr auto;
|
||||
grid-template-areas:
|
||||
'prev track next'
|
||||
'. progress .';
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
:host :where(.prev, .next, .indicator-btn) {
|
||||
--gradient-dir: to bottom right;
|
||||
--gradient-start: var(--clr-box-gradient-start);
|
||||
--gradient-end: var(--clr-box-gradient-end);
|
||||
|
||||
position: relative;
|
||||
|
||||
font-size: 1.25em;
|
||||
color: var(--clr-text);
|
||||
cursor: pointer;
|
||||
|
||||
background: linear-gradient(
|
||||
var(--gradient-dir),
|
||||
var(--gradient-start) 0%,
|
||||
var(--gradient-end) 50%
|
||||
);
|
||||
|
||||
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
||||
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
padding: 0.875em;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:host :where(.prev, .next, .indicator-btn):active::after {
|
||||
--gradient-dir: to top left;
|
||||
}
|
||||
|
||||
:host :where(.prev, .next, .indicator-btn)::after {
|
||||
--gradient-dir: to bottom right;
|
||||
--gradient-start: var(--clr-quick-info-gradient-start);
|
||||
--gradient-end: var(--clr-quick-info-gradient-end);
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: var(--border-thin);
|
||||
background: linear-gradient(
|
||||
var(--gradient-dir),
|
||||
var(--gradient-start) 0%,
|
||||
var(--gradient-end) 50%
|
||||
);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
:host :where(.prev, .next) {
|
||||
grid-row: track;
|
||||
}
|
||||
|
||||
:host :where(.prev, .next):disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
:host :where(.prev, .next) svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 0.375em;
|
||||
}
|
||||
|
||||
:host .prev {
|
||||
grid-column: prev;
|
||||
left: 0.5em;
|
||||
}
|
||||
|
||||
:host .next {
|
||||
grid-column: next;
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
:host .track {
|
||||
grid-row: track;
|
||||
grid-column: prev / next;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 100%;
|
||||
gap: 2em;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
:host .track > * {
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
:host .track::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host .ref-image :first-child {
|
||||
grid-row: image / caption;
|
||||
}
|
||||
|
||||
:host .ref-image img {
|
||||
width: 100%;
|
||||
height: 80vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
:host .ref-image .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;
|
||||
}
|
||||
|
||||
:host .gallery-nav {
|
||||
--indicator-size: 2.5em;
|
||||
|
||||
grid-row: progress;
|
||||
grid-column: prev / next;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
:host .indicator-btn {
|
||||
font-size: 1em;
|
||||
width: var(--indicator-size);
|
||||
height: var(--indicator-size);
|
||||
padding: 0;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
:host .indicator-btn[aria-current='true']::after {
|
||||
--gradient-dir: to top left;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue