mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-15 14:18:04 +08:00
Add the auto-generated node catalog to the website's user manual (#3662)
* Generate the MVP node catalog in the manual (with some placeholders) * Implement nearly the rest of everything * Move to the tools directory and make it generate nicer default values * Add category descriptions * Organize file structure and improve type naming * Improve book table of contents code * Add collapsing chapter navigation to the book template * Add to build workflow * Clean up site structure
This commit is contained in:
Keavon Chambers
524
website/static/js/component/carousel.js
Normal file
524
website/static/js/component/carousel.js
Normal file
@@ -0,0 +1,524 @@
|
||||
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);
|
||||
|
||||
/**
|
||||
* @typedef {{
|
||||
* carouselContainer: Element,
|
||||
* images: NodeListOf<Element>,
|
||||
* directionPrev: Element | null,
|
||||
* directionNext: Element | null,
|
||||
* dots: NodeListOf<Element>,
|
||||
* descriptions: NodeListOf<Element>,
|
||||
* dragLastClientX: number | undefined,
|
||||
* velocityDeltaWindow: Array<{ time: number, delta: number }>,
|
||||
* jostleNoLongerNeeded: boolean,
|
||||
* requestAnimationFrameActive: boolean,
|
||||
* videoSyncInterval: ReturnType<typeof setTimeout> | undefined,
|
||||
* }} Carousel
|
||||
*/
|
||||
|
||||
const /** @type {Carousel[]} */ carousels = [];
|
||||
|
||||
function initializeCarousel() {
|
||||
const carouselContainers = document.querySelectorAll("[data-carousel]");
|
||||
|
||||
carouselContainers.forEach((carouselContainer) => {
|
||||
const slideImages = carouselContainer.querySelectorAll("[data-carousel-slide] [data-carousel-image]");
|
||||
const tornLeft = carouselContainer.querySelector("[data-carousel-slide-torn-left]");
|
||||
const tornRight = carouselContainer.querySelector("[data-carousel-slide-torn-right]");
|
||||
[tornLeft, tornRight].forEach((insertInsideElement) => {
|
||||
if (!(insertInsideElement instanceof HTMLElement)) return;
|
||||
slideImages.forEach((image) => {
|
||||
const clonedImage = image.cloneNode(true);
|
||||
if (!(clonedImage instanceof HTMLImageElement) && !(clonedImage instanceof HTMLVideoElement)) return;
|
||||
if (clonedImage instanceof HTMLImageElement) clonedImage.alt = "";
|
||||
insertInsideElement.insertAdjacentElement("beforeend", clonedImage);
|
||||
});
|
||||
});
|
||||
|
||||
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 performJostleHint = carouselContainer.hasAttribute("data-carousel-jostle-hint");
|
||||
const dragLastClientX = undefined;
|
||||
const velocityDeltaWindow = Array.from({ length: FLING_VELOCITY_WINDOW_SIZE }, () => ({ time: 0, delta: 0 }));
|
||||
const jostleNoLongerNeeded = false;
|
||||
|
||||
const carousel = {
|
||||
carouselContainer,
|
||||
images,
|
||||
directionPrev,
|
||||
directionNext,
|
||||
dots,
|
||||
descriptions,
|
||||
dragLastClientX,
|
||||
velocityDeltaWindow,
|
||||
jostleNoLongerNeeded,
|
||||
requestAnimationFrameActive: false,
|
||||
videoSyncInterval: undefined,
|
||||
};
|
||||
carousels.push(carousel);
|
||||
|
||||
images.forEach((image) => {
|
||||
if (!(image instanceof HTMLElement)) return;
|
||||
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 = event.target instanceof Element ? Array.from(dots).indexOf(event.target) : -1;
|
||||
slideTo(carousel, index, true);
|
||||
}),
|
||||
);
|
||||
|
||||
// Jostle hint is a feature to briefly shift the carousel by a bit as a hint to users that it can be interacted with
|
||||
if (performJostleHint) {
|
||||
window.addEventListener("load", () => {
|
||||
if (!(directionPrev instanceof HTMLElement)) return;
|
||||
new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.intersectionRatio === 1 && currentTransform(carousel) === 0 && !carousel.jostleNoLongerNeeded) {
|
||||
const JOSTLE_TIME = 1000;
|
||||
const MAX_JOSTLE_DISTANCE = -10;
|
||||
|
||||
let /** @type {number} */ startTime;
|
||||
const buildUp = (/** @type {number} */ timeStep) => {
|
||||
if (carousel.jostleNoLongerNeeded) {
|
||||
carousel.carouselContainer.classList.remove("jostling");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!startTime) startTime = timeStep;
|
||||
const elapsedTime = timeStep - startTime;
|
||||
|
||||
const easeOutCirc = (/** @type {number} */ x) => Math.sqrt(1 - Math.pow(x - 1, 2));
|
||||
const movementFactor = easeOutCirc(Math.min(1, elapsedTime / JOSTLE_TIME));
|
||||
|
||||
setCurrentTransform(carousel, movementFactor * MAX_JOSTLE_DISTANCE, "%", false, true);
|
||||
|
||||
if (elapsedTime < JOSTLE_TIME) {
|
||||
requestAnimationFrame(buildUp);
|
||||
} else {
|
||||
carousel.carouselContainer.classList.remove("jostling");
|
||||
carousel.jostleNoLongerNeeded = true;
|
||||
slideTo(carousel, 0, true);
|
||||
}
|
||||
};
|
||||
carousel.carouselContainer.classList.add("jostling");
|
||||
requestAnimationFrame(buildUp);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 1 },
|
||||
).observe(directionPrev);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Carousel} carousel
|
||||
* @param {"prev" | "next"} direction
|
||||
* @param {boolean} smooth
|
||||
*/
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Carousel} carousel
|
||||
* @param {number} index
|
||||
* @param {boolean} 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");
|
||||
}
|
||||
|
||||
// Account for the first image being the faded out last image
|
||||
const offsetIndex = index + 1;
|
||||
const slideImages = Array.from(carousel.carouselContainer.querySelectorAll("[data-carousel-slide] [data-carousel-image]"));
|
||||
// Remove lazy loading from the adjacent images
|
||||
slideImages[clamp(offsetIndex - 2, 0, slideImages.length - 1)].removeAttribute("loading");
|
||||
slideImages[clamp(offsetIndex - 1, 0, slideImages.length - 1)].removeAttribute("loading");
|
||||
slideImages[clamp(offsetIndex, 0, slideImages.length - 1)].removeAttribute("loading");
|
||||
slideImages[clamp(offsetIndex + 1, 0, slideImages.length - 1)].removeAttribute("loading");
|
||||
slideImages[clamp(offsetIndex + 2, 0, slideImages.length - 1)].removeAttribute("loading");
|
||||
|
||||
setCurrentTransform(carousel, index * -100, "%", smooth);
|
||||
|
||||
// Manage video preloading and playback
|
||||
manageVideoPlayback(carousel, index);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all video elements for a given slide index (main + torn edge copies)
|
||||
* @param {Carousel} carousel
|
||||
* @param {number} index
|
||||
*/
|
||||
function getVideosForSlide(carousel, index) {
|
||||
// Account for the first image being the faded-out last image
|
||||
const offsetIndex = index + 1;
|
||||
const slideImages = Array.from(carousel.carouselContainer.querySelectorAll("[data-carousel-slide] [data-carousel-image]"));
|
||||
const tornLeftImages = Array.from(carousel.carouselContainer.querySelectorAll("[data-carousel-slide-torn-left] [data-carousel-image]"));
|
||||
const tornRightImages = Array.from(carousel.carouselContainer.querySelectorAll("[data-carousel-slide-torn-right] [data-carousel-image]"));
|
||||
|
||||
const mainElement = slideImages[offsetIndex];
|
||||
const tornLeftElement = tornLeftImages[offsetIndex];
|
||||
const tornRightElement = tornRightImages[offsetIndex];
|
||||
|
||||
return {
|
||||
main: mainElement instanceof HTMLVideoElement ? mainElement : null,
|
||||
tornLeft: tornLeftElement instanceof HTMLVideoElement ? tornLeftElement : null,
|
||||
tornRight: tornRightElement instanceof HTMLVideoElement ? tornRightElement : null,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the carousel is currently in transition (dragging or animating)
|
||||
* @param {Carousel} carousel
|
||||
*/
|
||||
function isCarouselInTransition(carousel) {
|
||||
// Check if user is dragging
|
||||
if (carousel.dragLastClientX !== undefined) return true;
|
||||
|
||||
// Check if carousel has the "dragging" class (set during drag)
|
||||
if (carousel.carouselContainer.classList.contains("dragging")) return true;
|
||||
|
||||
// Check if any slide has a transition in progress by looking at the computed style
|
||||
const firstImage = carousel.images[1];
|
||||
if (firstImage instanceof HTMLElement) {
|
||||
const style = window.getComputedStyle(firstImage);
|
||||
// If transform is transitioning, we're in motion
|
||||
if (style.transitionProperty.includes("transform") && style.transitionDuration !== "0s") {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Preload and manage playback of videos on current and adjacent slides
|
||||
* @param {Carousel} carousel
|
||||
* @param {number} currentIndex
|
||||
*/
|
||||
function manageVideoPlayback(carousel, currentIndex) {
|
||||
const totalSlides = carousel.dots.length;
|
||||
|
||||
// Clear any existing sync interval
|
||||
if (carousel.videoSyncInterval !== undefined) {
|
||||
clearTimeout(carousel.videoSyncInterval);
|
||||
carousel.videoSyncInterval = undefined;
|
||||
}
|
||||
|
||||
// Stop all videos that aren't on current or adjacent slides
|
||||
for (let i = 0; i < totalSlides; i++) {
|
||||
if (Math.abs(i - currentIndex) > 1) {
|
||||
const videos = getVideosForSlide(carousel, i);
|
||||
[videos.main, videos.tornLeft, videos.tornRight].forEach((video) => {
|
||||
if (video) {
|
||||
video.pause();
|
||||
video.currentTime = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Preload and potentially play videos on current and adjacent slides
|
||||
const indicesToPreload = [currentIndex - 1, currentIndex, currentIndex + 1].filter((index) => index >= 0 && index < totalSlides);
|
||||
|
||||
indicesToPreload.forEach((index) => {
|
||||
const videos = getVideosForSlide(carousel, index);
|
||||
|
||||
// Exit early if not a video slide
|
||||
if (!videos.main) return;
|
||||
|
||||
// Preload the video
|
||||
if (videos.main.readyState < 3) videos.main.load();
|
||||
|
||||
// If this is the current slide, play the main video when ready
|
||||
if (index === currentIndex) {
|
||||
const playWhenReady = () => {
|
||||
if (videos.main && videos.main.readyState >= 3) {
|
||||
// Start the main video
|
||||
videos.main.currentTime = 0;
|
||||
videos.main.play().catch(() => {});
|
||||
} else if (videos.main) {
|
||||
// Video not ready yet, check again
|
||||
videos.main.addEventListener("canplaythrough", playWhenReady, { once: true });
|
||||
}
|
||||
};
|
||||
|
||||
playWhenReady();
|
||||
|
||||
// Monitor for transitions and sync torn videos when in motion
|
||||
updateVideoSyncForTransitions(carousel, videos);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Set up monitoring to play/pause torn edge videos based on transition state
|
||||
* @param {Carousel} carousel
|
||||
* @param {{ main: HTMLVideoElement | null, tornLeft: HTMLVideoElement | null, tornRight: HTMLVideoElement | null }} videos
|
||||
*/
|
||||
function updateVideoSyncForTransitions(carousel, videos) {
|
||||
if (!videos.main) return;
|
||||
|
||||
const syncTornVideos = () => {
|
||||
const inTransition = isCarouselInTransition(carousel);
|
||||
|
||||
// During transition: sync and play all copies
|
||||
if (inTransition && videos.main) {
|
||||
const mainTime = videos.main.currentTime;
|
||||
[videos.tornLeft, videos.tornRight].forEach((video) => {
|
||||
if (!video) return;
|
||||
|
||||
if (video.paused) {
|
||||
video.currentTime = mainTime;
|
||||
video.play().catch(() => {
|
||||
// Ignore autoplay errors
|
||||
});
|
||||
} else {
|
||||
// Keep synced
|
||||
const drift = Math.abs(video.currentTime - mainTime);
|
||||
if (drift > 0.1) {
|
||||
video.currentTime = mainTime;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// Not in transition: pause torn edge videos to save performance
|
||||
else {
|
||||
if (videos.tornLeft && !videos.tornLeft.paused) videos.tornLeft.pause();
|
||||
if (videos.tornRight && !videos.tornRight.paused) videos.tornRight.pause();
|
||||
}
|
||||
|
||||
// Continue checking while in transition, or check again soon in case transition starts
|
||||
carousel.videoSyncInterval = setTimeout(syncTornVideos, 100);
|
||||
};
|
||||
|
||||
syncTornVideos();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Carousel} carousel
|
||||
*/
|
||||
function currentTransform(carousel) {
|
||||
const currentTransformMatrix = window.getComputedStyle(carousel.images[1]).transform;
|
||||
// Grab the X value from the format that looks like either of: `matrix(1, 0, 0, 1, -1332.13, 0)` or `none`
|
||||
const xValue = Number(currentTransformMatrix.split(",")[4] || "0");
|
||||
|
||||
return xValue + carousel.images[1].getBoundingClientRect().width;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Carousel} carousel
|
||||
* @param {number} x
|
||||
* @param {string} unit
|
||||
* @param {boolean} smooth
|
||||
* @param {boolean} doNotTerminateJostle
|
||||
*/
|
||||
function setCurrentTransform(carousel, x, unit, smooth, doNotTerminateJostle = false) {
|
||||
const xInitial = currentTransform(carousel);
|
||||
let xValue = x;
|
||||
if (unit === "%") xValue = x - 100;
|
||||
if (unit === "px") xValue = x - carousel.images[1].getBoundingClientRect().width;
|
||||
|
||||
Array.from(carousel.images).forEach((image) => {
|
||||
if (!(image instanceof HTMLElement)) return;
|
||||
image.style.transitionTimingFunction = smooth ? "ease-in-out" : "cubic-bezier(0, 0, 0.2, 1)";
|
||||
image.style.transform = `translateX(${xValue}${unit})`;
|
||||
});
|
||||
|
||||
// If the user caused the carousel to move, we can assume they know how to use it and don't need the jostle hint anymore
|
||||
if (!doNotTerminateJostle && x - xInitial < 0.0001) carousel.jostleNoLongerNeeded = true;
|
||||
|
||||
const distance = unit === "%" ? x : (x / carousel.images[1].getBoundingClientRect().width) * 100;
|
||||
const overSlidingLeft = distance > 0;
|
||||
const overSlidingRight = distance < (carousel.dots.length - 1) * -100;
|
||||
|
||||
if ((overSlidingLeft || overSlidingRight) && !carousel.requestAnimationFrameActive) updateOverSlide(carousel);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Carousel} carousel
|
||||
*/
|
||||
function updateOverSlide(carousel) {
|
||||
const paddingLeft = parseInt(getComputedStyle(carousel.images[1]).paddingLeft);
|
||||
const paddingRight = parseInt(getComputedStyle(carousel.images[carousel.images.length - 2]).paddingRight);
|
||||
const slidLeftDistance = carousel.images[1].getBoundingClientRect().left + paddingLeft - (carousel.images[1].parentElement?.getBoundingClientRect().left || 0);
|
||||
const slidRightDistance = -(carousel.images[carousel.images.length - 2].getBoundingClientRect().right - paddingRight - (carousel.images[1].parentElement?.getBoundingClientRect().right || 0));
|
||||
const imageWidth = carousel.images[1].getBoundingClientRect().width;
|
||||
const overSlideFactor = Math.min(1, Math.max(0, Math.max(slidLeftDistance, slidRightDistance) / imageWidth));
|
||||
|
||||
const images = carousel.images[0].closest("[data-carousel]")?.querySelectorAll("[data-carousel-image]:first-child, [data-carousel-image]:last-child");
|
||||
if (!images) return;
|
||||
|
||||
// Call again the next frame if we're still sliding past the edge
|
||||
if (overSlideFactor > 0) {
|
||||
images.forEach((image) => {
|
||||
if (!(image instanceof HTMLElement)) return;
|
||||
image.style.setProperty("--over-slide-factor", `${overSlideFactor}`);
|
||||
});
|
||||
|
||||
carousel.requestAnimationFrameActive = true;
|
||||
requestAnimationFrame(() => updateOverSlide(carousel));
|
||||
} else {
|
||||
images.forEach((image) => {
|
||||
if (!(image instanceof HTMLElement)) return;
|
||||
image.style.removeProperty("--over-slide-factor");
|
||||
});
|
||||
|
||||
carousel.requestAnimationFrameActive = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Carousel} carousel
|
||||
*/
|
||||
function currentClosestImageIndex(carousel) {
|
||||
const currentTransformX = -currentTransform(carousel);
|
||||
|
||||
const imageWidth = carousel.images[1].getBoundingClientRect().width;
|
||||
return Math.round(currentTransformX / imageWidth);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Carousel} carousel
|
||||
*/
|
||||
function currentActiveDotIndex(carousel) {
|
||||
const activeDot = carousel.carouselContainer.querySelector("[data-carousel-dot].active");
|
||||
return activeDot ? Array.from(carousel.dots).indexOf(activeDot) : -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PointerEvent} event
|
||||
*/
|
||||
function dragBegin(event) {
|
||||
if (!(event.target instanceof HTMLElement)) return;
|
||||
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");
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {boolean} dropWithoutVelocity
|
||||
*/
|
||||
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
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PointerEvent} event
|
||||
*/
|
||||
function dragMove(event) {
|
||||
if (!(event.target instanceof HTMLElement)) return;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} value
|
||||
* @param {number} min
|
||||
* @param {number} max
|
||||
*/
|
||||
function clamp(value, min, max) {
|
||||
const m = Math; // This is a workaround for a bug in Zola's minifier
|
||||
return m.min(m.max(value, min), max);
|
||||
}
|
||||
59
website/static/js/component/image-comparison.js
Normal file
59
website/static/js/component/image-comparison.js
Normal file
@@ -0,0 +1,59 @@
|
||||
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) => {
|
||||
if (!(element instanceof HTMLElement)) return;
|
||||
|
||||
const moveHandler = (/** @type {PointerEvent} **/ 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 = (/** @type {PointerEvent} **/ 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() - Number(element.dataset.recenterStartTime)) / (RECENTER_ANIMATION_DURATION * 1000);
|
||||
if (completionFactor > 1) {
|
||||
element.dataset.lastInteraction = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const factor = smootherstep(completionFactor);
|
||||
const newLocation = lerp(Number(element.dataset.recenterStartValue), 50, factor);
|
||||
element.style.setProperty("--comparison-percent", `${newLocation}%`);
|
||||
|
||||
requestAnimationFrame(recenterAnimationStep);
|
||||
};
|
||||
|
||||
const lerp = (/** @type {number} **/ a, /** @type {number} **/ b, /** @type {number} **/ t) => (1 - t) * a + t * b;
|
||||
const smootherstep = (/** @type {number} **/ 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());
|
||||
});
|
||||
}
|
||||
24
website/static/js/component/video-autoplay.js
Normal file
24
website/static/js/component/video-autoplay.js
Normal file
@@ -0,0 +1,24 @@
|
||||
const VISIBILITY_COVERAGE_FRACTION = 0.25;
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
const players = document.querySelectorAll("[data-auto-play]");
|
||||
players.forEach((player) => {
|
||||
if (!(player instanceof HTMLVideoElement)) return;
|
||||
|
||||
let loaded = false;
|
||||
|
||||
new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (!loaded && entry.intersectionRatio > VISIBILITY_COVERAGE_FRACTION) {
|
||||
player.removeAttribute("preload");
|
||||
player.setAttribute("autoplay", "");
|
||||
|
||||
loaded = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: VISIBILITY_COVERAGE_FRACTION },
|
||||
).observe(player);
|
||||
});
|
||||
});
|
||||
24
website/static/js/component/youtube-embed.js
Normal file
24
website/static/js/component/youtube-embed.js
Normal file
@@ -0,0 +1,24 @@
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll("[data-youtube-embed]").forEach((placeholder) => {
|
||||
if (!(placeholder instanceof HTMLElement)) return;
|
||||
placeholder.addEventListener("click", () => {
|
||||
const videoId = placeholder.getAttribute("data-youtube-embed") || "";
|
||||
const timestamp = placeholder.getAttribute("data-youtube-timestamp") || "";
|
||||
placeholder.outerHTML = `
|
||||
<iframe \\
|
||||
width="1280" \\
|
||||
height="720" \\
|
||||
src="https://www.youtube.com/embed/${videoId}?${timestamp ? `start=${timestamp}&` : ""}autoplay=1" \\
|
||||
frameborder="0" \\
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" \\
|
||||
allowfullscreen\\
|
||||
>\\
|
||||
</iframe>\\
|
||||
`
|
||||
.split("\n")
|
||||
.map((line) => line.trim())
|
||||
.join("")
|
||||
.replaceAll(`\\`, "");
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user