280 lines
10 KiB
JavaScript
280 lines
10 KiB
JavaScript
// ================================================================================================
|
|
// CAROUSEL
|
|
// ================================================================================================
|
|
|
|
const FLING_VELOCITY_THRESHOLD = 10;
|
|
const FLING_VELOCITY_WINDOW_SIZE = 20;
|
|
|
|
window.addEventListener("DOMContentLoaded", initializeCarousel);
|
|
window.addEventListener("pointerup", () => dragEnd(false));
|
|
window.addEventListener("scroll", () => dragEnd(true));
|
|
window.addEventListener("pointermove", dragMove);
|
|
|
|
const carousels = [];
|
|
|
|
function initializeCarousel() {
|
|
const carouselContainers = document.querySelectorAll("[data-carousel]");
|
|
|
|
carouselContainers.forEach((carouselContainer) => {
|
|
const images = carouselContainer.querySelectorAll("[data-carousel-image]");
|
|
const directionPrev = carouselContainer.querySelector("[data-carousel-prev]");
|
|
const directionNext = carouselContainer.querySelector("[data-carousel-next]");
|
|
const dots = carouselContainer.querySelectorAll("[data-carousel-dot]");
|
|
const descriptions = carouselContainer.querySelectorAll("[data-carousel-description]");
|
|
const dragLastClientX = undefined;
|
|
const velocityDeltaWindow = Array.from({ length: FLING_VELOCITY_WINDOW_SIZE }, () => ({ time: 0, delta: 0 }));
|
|
|
|
const carousel = {
|
|
carouselContainer,
|
|
images,
|
|
directionPrev,
|
|
directionNext,
|
|
dots,
|
|
descriptions,
|
|
dragLastClientX,
|
|
velocityDeltaWindow,
|
|
};
|
|
carousels.push(carousel);
|
|
|
|
images.forEach((image) => {
|
|
image.addEventListener("pointerdown", dragBegin);
|
|
});
|
|
directionPrev.addEventListener("click", () => slideDirection(carousel, "prev", true, false));
|
|
directionNext.addEventListener("click", () => slideDirection(carousel, "next", true, false));
|
|
Array.from(dots).forEach((dot) =>
|
|
dot.addEventListener("click", (event) => {
|
|
const index = Array.from(dots).indexOf(event.target);
|
|
slideTo(carousel, index, true);
|
|
})
|
|
);
|
|
});
|
|
}
|
|
|
|
function slideDirection(carousel, direction, smooth, clamped = false) {
|
|
const directionIndexOffset = { prev: -1, next: 1 }[direction];
|
|
const offsetDotIndex = currentClosestImageIndex(carousel) + directionIndexOffset;
|
|
|
|
const nextDotIndex = (offsetDotIndex + carousel.dots.length) % carousel.dots.length;
|
|
const unwrappedNextDotIndex = clamp(offsetDotIndex, 0, carousel.dots.length - 1);
|
|
|
|
if (clamped) slideTo(carousel, unwrappedNextDotIndex, smooth);
|
|
else slideTo(carousel, nextDotIndex, smooth);
|
|
}
|
|
|
|
function slideTo(carousel, index, smooth) {
|
|
const activeDot = carousel.carouselContainer.querySelector("[data-carousel-dot].active");
|
|
activeDot.classList.remove("active");
|
|
carousel.dots[index].classList.add("active");
|
|
|
|
const activeDescription = carousel.carouselContainer.querySelector("[data-carousel-description].active");
|
|
if (activeDescription) {
|
|
activeDescription.classList.remove("active");
|
|
carousel.descriptions[index].classList.add("active");
|
|
}
|
|
|
|
setCurrentTransform(carousel, index * -100, "%", smooth);
|
|
}
|
|
|
|
function currentTransform(carousel) {
|
|
const currentTransformMatrix = window.getComputedStyle(carousel.images[0]).transform;
|
|
// Grab the X value from the format that looks like: `matrix(1, 0, 0, 1, -1332.13, 0)` or `none`
|
|
return Number(currentTransformMatrix.split(",")[4] || "0");
|
|
}
|
|
|
|
function setCurrentTransform(carousel, x, unit, smooth) {
|
|
Array.from(carousel.images).forEach((image) => {
|
|
image.style.transitionTimingFunction = smooth ? "ease-in-out" : "cubic-bezier(0, 0, 0.2, 1)";
|
|
image.style.transform = `translateX(${x}${unit})`;
|
|
});
|
|
}
|
|
|
|
function currentClosestImageIndex(carousel) {
|
|
const currentTransformX = -currentTransform(carousel);
|
|
|
|
const imageWidth = carousel.images[0].getBoundingClientRect().width;
|
|
return Math.round(currentTransformX / imageWidth);
|
|
}
|
|
|
|
function currentActiveDotIndex(carousel) {
|
|
const activeDot = carousel.carouselContainer.querySelector("[data-carousel-dot].active");
|
|
return Array.from(carousel.dots).indexOf(activeDot);
|
|
}
|
|
|
|
function dragBegin(event) {
|
|
const carouselContainer = event.target.closest("[data-carousel]");
|
|
const carousel = carousels.find((carousel) => carousel.carouselContainer === carouselContainer);
|
|
if (!carousel) return;
|
|
|
|
event.preventDefault();
|
|
|
|
carousel.dragLastClientX = event.clientX;
|
|
|
|
setCurrentTransform(carousel, currentTransform(carousel), "px", false);
|
|
carouselContainer.classList.add("dragging");
|
|
}
|
|
|
|
function dragEnd(dropWithoutVelocity) {
|
|
const carousel = carousels.find((carousel) => carousel.dragLastClientX !== undefined);
|
|
if (!carousel) return;
|
|
|
|
if (!carousel.images) return;
|
|
|
|
carousel.dragLastClientX = undefined;
|
|
|
|
carousel.carouselContainer.classList.remove("dragging");
|
|
|
|
const onlyRecentVelocityDeltaWindow = carousel.velocityDeltaWindow.filter((delta) => delta.time > Date.now() - 1000);
|
|
const timeRange = Date.now() - (onlyRecentVelocityDeltaWindow[0]?.time ?? NaN);
|
|
// Weighted (higher by recency) sum of velocity deltas from previous window of frames
|
|
const recentVelocity = onlyRecentVelocityDeltaWindow.reduce((acc, entry) => {
|
|
const timeSinceNow = Date.now() - entry.time;
|
|
const recencyFactorScore = 1 - timeSinceNow / timeRange;
|
|
|
|
return acc + entry.delta * recencyFactorScore;
|
|
}, 0);
|
|
|
|
const closestImageIndex = currentClosestImageIndex(carousel);
|
|
const activeDotIndex = currentActiveDotIndex(carousel);
|
|
|
|
// If the speed is fast enough, slide to the next or previous image in that direction
|
|
if (Math.abs(recentVelocity) > FLING_VELOCITY_THRESHOLD && !dropWithoutVelocity) {
|
|
// Positive velocity should go to the previous image
|
|
if (recentVelocity > 0) {
|
|
// Don't apply the velocity-based fling if we're already snapping to the next image
|
|
if (closestImageIndex >= activeDotIndex) {
|
|
slideDirection(carousel, "prev", false, true);
|
|
return;
|
|
}
|
|
}
|
|
// Negative velocity should go to the next image
|
|
else {
|
|
// Don't apply the velocity-based fling if we're already snapping to the next image
|
|
// eslint-disable-next-line no-lonely-if
|
|
if (closestImageIndex <= activeDotIndex) {
|
|
slideDirection(carousel, "next", false, true);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
// If we didn't slide in a direction due to clear velocity, just snap to the closest image
|
|
// This can be reached either by not entering the if statement above, or by its inner if statements not returning early and exiting back to this scope
|
|
slideTo(carousel, clamp(closestImageIndex, 0, carousel.dots.length - 1), true);
|
|
}
|
|
|
|
function dragMove(event) {
|
|
const carouselContainer = event.target.closest("[data-carousel]");
|
|
const carousel = carousels.find((carousel) => carousel.carouselContainer === carouselContainer);
|
|
if (!carousel) return;
|
|
|
|
if (carousel.dragLastClientX === undefined) return;
|
|
|
|
event.preventDefault();
|
|
|
|
const LEFT_MOUSE_BUTTON = 1;
|
|
if (!(event.buttons & LEFT_MOUSE_BUTTON)) {
|
|
dragEnd(false);
|
|
return;
|
|
}
|
|
|
|
const deltaX = event.clientX - carousel.dragLastClientX;
|
|
carousel.velocityDeltaWindow.shift();
|
|
carousel.velocityDeltaWindow.push({ time: Date.now(), delta: deltaX });
|
|
|
|
const newTransformX = currentTransform(carousel) + deltaX;
|
|
setCurrentTransform(carousel, newTransformX, "px", false);
|
|
|
|
carousel.dragLastClientX = event.clientX;
|
|
}
|
|
|
|
function clamp(value, min, max) {
|
|
return Math.min(Math.max(value, min), max);
|
|
}
|
|
|
|
// ================================================================================================
|
|
// IMAGE COMPARISON
|
|
// ================================================================================================
|
|
|
|
const RECENTER_DELAY = 1;
|
|
const RECENTER_ANIMATION_DURATION = 0.25;
|
|
|
|
window.addEventListener("DOMContentLoaded", initializeImageComparison);
|
|
|
|
function initializeImageComparison() {
|
|
Array.from(document.querySelectorAll("[data-image-comparison]")).forEach((element) => {
|
|
const moveHandler = (event) => {
|
|
const factor = (event.clientX - element.getBoundingClientRect().left) / element.getBoundingClientRect().width;
|
|
const capped = Math.max(0, Math.min(1, factor));
|
|
|
|
if (!(element instanceof HTMLElement)) return;
|
|
element.style.setProperty("--comparison-percent", `${capped * 100}%`);
|
|
element.dataset.lastInteraction = "";
|
|
};
|
|
|
|
const leaveHandler = (event) => {
|
|
moveHandler(event);
|
|
|
|
const randomCode = Math.random().toString().substring(2);
|
|
element.dataset.lastInteraction = randomCode;
|
|
|
|
setTimeout(() => {
|
|
if (element.dataset.lastInteraction === randomCode) {
|
|
element.dataset.recenterStartTime = Date.now();
|
|
element.dataset.recenterStartValue = parseFloat(element.style.getPropertyValue("--comparison-percent"));
|
|
|
|
recenterAnimationStep();
|
|
}
|
|
}, RECENTER_DELAY * 1000);
|
|
};
|
|
|
|
const recenterAnimationStep = () => {
|
|
if (element.dataset.lastInteraction === "") return;
|
|
|
|
const completionFactor = (Date.now() - element.dataset.recenterStartTime) / (RECENTER_ANIMATION_DURATION * 1000);
|
|
if (completionFactor > 1) {
|
|
element.dataset.lastInteraction = "";
|
|
return;
|
|
}
|
|
|
|
const factor = smootherstep(completionFactor);
|
|
const newLocation = lerp(element.dataset.recenterStartValue, 50, factor);
|
|
element.style.setProperty("--comparison-percent", `${newLocation}%`);
|
|
|
|
requestAnimationFrame(recenterAnimationStep);
|
|
};
|
|
|
|
const lerp = (a, b, t) => (1 - t) * a + t * b;
|
|
const smootherstep = (x) => x * x * x * (x * (x * 6 - 15) + 10);
|
|
|
|
element.addEventListener("pointermove", moveHandler);
|
|
element.addEventListener("pointerenter", moveHandler);
|
|
element.addEventListener("pointerleave", leaveHandler);
|
|
element.addEventListener("dragstart", (event) => event.preventDefault());
|
|
});
|
|
}
|
|
|
|
// ================================================================================================
|
|
// AUTO-PLAYING VIDEO
|
|
// ================================================================================================
|
|
window.addEventListener("DOMContentLoaded", initializeVideoAutoPlay);
|
|
|
|
function initializeVideoAutoPlay() {
|
|
const VISIBILITY_COVERAGE_FRACTION = 0.25;
|
|
|
|
let loaded = false;
|
|
|
|
const player = document.querySelector("[data-auto-play]");
|
|
if (!(player instanceof HTMLVideoElement)) return;
|
|
|
|
new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (!loaded && entry.intersectionRatio > VISIBILITY_COVERAGE_FRACTION) {
|
|
player.play();
|
|
|
|
loaded = true;
|
|
};
|
|
});
|
|
}, { threshold: VISIBILITY_COVERAGE_FRACTION })
|
|
.observe(player);
|
|
}
|