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

Add code style formatting to the website

Browse Source
This commit is contained in:
Keavon Chambers
2022-06-16 22:57:15 -07:00
parent 9f76315bdc
commit ea0dbd1290
10 changed files with 4477 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/static/carousel.js
+16 -13
View File
@@ -7,7 +7,7 @@ let carouselDirectionNext;
let carouselDots;
let carouselDescriptions;
let carouselDragLastClientX;
let velocityDeltaWindow = Array.from({ length: FLING_VELOCITY_WINDOW_SIZE }, () => ({ time: 0, delta: 0 }));
const velocityDeltaWindow = Array.from({ length: FLING_VELOCITY_WINDOW_SIZE }, () => ({ time: 0, delta: 0 }));
window.addEventListener("DOMContentLoaded", initializeCarousel);
window.addEventListener("pointerup", () => dragEnd(false));
@@ -25,15 +25,17 @@ function initializeCarousel() {
carouselDots = document.querySelectorAll(".carousel-controls .dot");
carouselDescriptions = document.querySelectorAll(".screenshot-description p");
carouselDirectionPrev.addEventListener("click", () => slideDirection("prev", false, true));
carouselDirectionNext.addEventListener("click", () => slideDirection("next", false, true));
Array.from(carouselDots).forEach((dot) => dot.addEventListener("click", (event) => {
const index = Array.from(carouselDots).indexOf(event.target);
slideTo(index, true);
}));
carouselDirectionPrev.addEventListener("click", () => slideDirection("prev", true, false));
carouselDirectionNext.addEventListener("click", () => slideDirection("next", true, false));
Array.from(carouselDots).forEach((dot) =>
dot.addEventListener("click", (event) => {
const index = Array.from(carouselDots).indexOf(event.target);
slideTo(index, true);
})
);
}
function slideDirection(direction, clamped = false, smooth) {
function slideDirection(direction, smooth, clamped = false) {
const directionIndexOffset = { prev: -1, next: 1 }[direction];
const offsetDotIndex = currentClosestImageIndex() + directionIndexOffset;
@@ -53,7 +55,7 @@ function slideTo(index, smooth) {
activeDescription.classList.remove("active");
carouselDescriptions[index].classList.add("active");
setCurrentTransform(index * -100, "%", smooth)
setCurrentTransform(index * -100, "%", smooth);
}
function currentTransform() {
@@ -98,11 +100,11 @@ function dragEnd(dropWithoutVelocity) {
document.querySelector("#screenshots").classList.remove("dragging");
const onlyRecentVelocityDeltaWindow = velocityDeltaWindow.filter((delta) => delta.time > Date.now() - 1000);
const timeRange = Date.now() - onlyRecentVelocityDeltaWindow[0]?.time;
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);
const recencyFactorScore = 1 - timeSinceNow / timeRange;
return acc + entry.delta * recencyFactorScore;
}, 0);
@@ -116,15 +118,16 @@ function dragEnd(dropWithoutVelocity) {
if (recentVelocity > 0) {
// Don't apply the velocity-based fling if we're already snapping to the next image
if (closestImageIndex >= activeDotIndex) {
slideDirection("prev", true, false);
slideDirection("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("next", true, false);
slideDirection("next", false, true);
return;
}
}
website/static/navbar.js
+5 -11
View File
@@ -11,8 +11,6 @@ let fullRippleHeight;
let ripples;
let activeRippleIndex;
let globalCount = 0;
window.addEventListener("DOMContentLoaded", initializeRipples);
window.addEventListener("resize", () => animate(true));
@@ -22,7 +20,7 @@ function initializeRipples() {
navButtons = document.querySelectorAll("header nav a");
rippleSvg = document.querySelector("header .ripple");
ripplePath = rippleSvg.querySelector("path");
fullRippleHeight = Number.parseInt(window.getComputedStyle(rippleSvg).height) - 4;
fullRippleHeight = Number.parseInt(window.getComputedStyle(rippleSvg).height, 10) - 4;
ripples = Array.from(navButtons).map((button) => ({
element: button,
@@ -33,7 +31,6 @@ function initializeRipples() {
activeRippleIndex = ripples.findIndex((ripple) => ripple.element.getAttribute("href").replace(/\//g, "") === window.location.pathname.replace(/\//g, ""));
ripples.forEach((ripple) => {
const updateTimings = (goingUp) => {
const start = ripple.animationStartTime;
@@ -66,11 +63,8 @@ function initializeRipples() {
function animate(forceRefresh) {
if (!ripplesInitialized) return;
const animateThisFrame = ripples.some((ripple) => ripple.animationStartTime && ripple.animationEndTime && Date.now() <= ripple.animationEndTime);
// console.log(globalCount, new Date().getSeconds(), Date.now(), animateThisFrame, {...ripples[0]});
globalCount++;
const animateThisFrame = ripples.some((ripple) => ripple.animationStartTime && ripple.animationEndTime && Date.now() <= ripple.animationEndTime);
if (animateThisFrame || forceRefresh) {
setRipples();
@@ -79,7 +73,7 @@ function animate(forceRefresh) {
}
function setRipples() {
const navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize) || NAV_BUTTON_INITIAL_FONT_SIZE;
const navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize, 10) || NAV_BUTTON_INITIAL_FONT_SIZE;
const mediaQueryScaleFactor = navButtonFontSize / NAV_BUTTON_INITIAL_FONT_SIZE;
const rippleHeight = fullRippleHeight * (mediaQueryScaleFactor * 0.5 + 0.5);
@@ -98,12 +92,12 @@ function setRipples() {
const buttonRect = ripple.element.getBoundingClientRect();
const buttonCenter = buttonRect.width / 2;
const rippleCenter = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
const rippleCenter = (RIPPLE_WIDTH / 2) * mediaQueryScaleFactor;
const rippleOffset = rippleCenter - buttonCenter;
const rippleStartX = buttonRect.left - rippleSvgLeft - rippleOffset;
const rippleRadius = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
const rippleRadius = (RIPPLE_WIDTH / 2) * mediaQueryScaleFactor;
const handleRadius = rippleRadius * HANDLE_STRETCH;
path += `L ${rippleStartX},${rippleHeight + 3} `;