fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-24 04:08:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Modernize and fix website build tooling deps and utilize JS type checking (#3348)

Browse Source 
* Modernize and fix website build tooling deps and utilize JS type checking

* Upgrade to the latest Node.js
This commit is contained in:
Keavon Chambers
2025-11-06 16:30:35 -08:00
committed by GitHub
parent 96d73a8570
commit 6b315c3b68
18 changed files with 2036 additions and 981 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/static/js/carousel.js
+116 -46
View File
@@ -6,7 +6,22 @@ window.addEventListener("pointerup", () => dragEnd(false));
window.addEventListener("scroll", () => dragEnd(true));
window.addEventListener("pointermove", dragMove);
const carousels = [];
/**
* @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
* }} Carousel
*/
const /** @type {Carousel[]} */ carousels = [];
function initializeCarousel() {
const carouselContainers = document.querySelectorAll("[data-carousel]");
@@ -16,9 +31,11 @@ function initializeCarousel() {
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.alt = "";
if (!(clonedImage instanceof HTMLImageElement)) return;
clonedImage.alt = "";
insertInsideElement.insertAdjacentElement("beforeend", clonedImage);
});
});
@@ -48,60 +65,69 @@ function initializeCarousel() {
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));
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);
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", () => {
new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio === 1 && currentTransform(carousel) === 0 && !carousel.jostleNoLongerNeeded) {
const JOSTLE_TIME = 1000;
const MAX_JOSTLE_DISTANCE = -10;
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 startTime;
const buildUp = (timeStep) => {
if (carousel.jostleNoLongerNeeded) {
carousel.carouselContainer.classList.remove("jostling");
return;
}
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;
if (!startTime) startTime = timeStep;
const elapsedTime = timeStep - startTime;
const easeOutCirc = (x) => Math.sqrt(1 - Math.pow(x - 1, 2));
const movementFactor = easeOutCirc(Math.min(1, elapsedTime / JOSTLE_TIME));
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);
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);
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;
@@ -113,9 +139,14 @@ function slideDirection(carousel, direction, smooth, clamped = false) {
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");
activeDot?.classList.remove("active");
carousel.dots[index].classList.add("active");
const activeDescription = carousel.carouselContainer.querySelector("[data-carousel-description].active");
@@ -137,6 +168,9 @@ function slideTo(carousel, index, smooth) {
setCurrentTransform(carousel, index * -100, "%", smooth);
}
/**
* @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`
@@ -145,6 +179,13 @@ function currentTransform(carousel) {
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;
@@ -152,6 +193,7 @@ function setCurrentTransform(carousel, x, unit, smooth, doNotTerminateJostle = f
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})`;
});
@@ -159,33 +201,39 @@ function setCurrentTransform(carousel, x, unit, smooth, doNotTerminateJostle = f
// 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 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;
const slidRightDistance = -(carousel.images[carousel.images.length - 2].getBoundingClientRect().right - paddingRight - carousel.images[1].parentElement.getBoundingClientRect().right);
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 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");
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) => {
image.style.setProperty("--over-slide-factor", overSlideFactor);
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");
});
@@ -193,6 +241,9 @@ function updateOverSlide(carousel) {
}
}
/**
* @param {Carousel} carousel
*/
function currentClosestImageIndex(carousel) {
const currentTransformX = -currentTransform(carousel);
@@ -200,12 +251,19 @@ function currentClosestImageIndex(carousel) {
return Math.round(currentTransformX / imageWidth);
}
/**
* @param {Carousel} carousel
*/
function currentActiveDotIndex(carousel) {
const activeDot = carousel.carouselContainer.querySelector("[data-carousel-dot].active");
return Array.from(carousel.dots).indexOf(activeDot);
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;
@@ -215,9 +273,12 @@ function dragBegin(event) {
carousel.dragLastClientX = event.clientX;
setCurrentTransform(carousel, currentTransform(carousel), "px", false);
carouselContainer.classList.add("dragging");
carouselContainer?.classList.add("dragging");
}
/**
* @param {boolean} dropWithoutVelocity
*/
function dragEnd(dropWithoutVelocity) {
const carousel = carousels.find((carousel) => carousel.dragLastClientX !== undefined);
if (!carousel) return;
@@ -254,7 +315,6 @@ function dragEnd(dropWithoutVelocity) {
// 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;
@@ -267,7 +327,12 @@ function dragEnd(dropWithoutVelocity) {
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;
@@ -292,6 +357,11 @@ function dragMove(event) {
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);