mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-04 13:30:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Website responsive resizing improvements

Browse source
This commit is contained in:
Keavon Chambers 2022-02-19 02:15:28 -08:00
parent 3f79df7314
commit 248e2ab0d1
14 changed files with 275 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

16
website/static/js/carousel.js
View file

@ -1,14 +1,17 @@
const FLING_VELOCITY_THRESHOLD = 10;
const FLING_VELOCITY_WINDOW_SIZE = 20;
let carouselImages;
let carouselDirectionPrev;
let carouselDirectionNext;
let carouselDots;
let carouselDescriptions;
let carouselDragLastClientX;
let velocityDeltaWindow = Array.from({ length: 20 }, () => ({ time: 0, delta: 0 }));
let velocityDeltaWindow = Array.from({ length: FLING_VELOCITY_WINDOW_SIZE }, () => ({ time: 0, delta: 0 }));
window.addEventListener("DOMContentLoaded", initializeCarousel);
window.addEventListener("pointerup", dragEnd);
window.addEventListener("scroll", dragEnd);
window.addEventListener("pointerup", () => dragEnd(false));
window.addEventListener("scroll", () => dragEnd(true));
window.addEventListener("pointermove", dragMove);
function initializeCarousel() {
@ -87,7 +90,7 @@ function dragBegin(event) {
document.querySelector("#screenshots").classList.add("dragging");
}
function dragEnd() {
function dragEnd(dropWithoutVelocity) {
if (!carouselImages) return;
carouselDragLastClientX = undefined;
@ -108,7 +111,7 @@ function dragEnd() {
const activeDotIndex = currentActiveDotIndex();
// If the speed is fast enough, slide to the next or previous image in that direction
if (Math.abs(recentVelocity) > 10) {
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
@ -128,6 +131,7 @@ function dragEnd() {
}
// 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(clamp(closestImageIndex, 0, carouselDots.length - 1), true);
}
@ -138,7 +142,7 @@ function dragMove(event) {
const LEFT_MOUSE_BUTTON = 1;
if (!(event.buttons & LEFT_MOUSE_BUTTON)) {
dragEnd();
dragEnd(false);
return;
}

68
website/static/js/navbar.js
View file

@ -15,40 +15,6 @@ let activeRippleIndex;
window.addEventListener("DOMContentLoaded", initializeRipples);
window.addEventListener("resize", () => animate(true));
function setRipples(mediaQueryScaleFactor) {
const rippleSvgRect = rippleSvg.getBoundingClientRect();
const rippleSvgLeft = rippleSvgRect.left;
const rippleSvgWidth = rippleSvgRect.width;
let path = `M 0,${fullRippleHeight + 3} `;
ripples.forEach((ripple) => {
if (!ripple.animationStartTime || !ripple.animationEndTime) return;
const t = Math.min((Date.now() - ripple.animationStartTime) / (ripple.animationEndTime - ripple.animationStartTime), 1);
const height = fullRippleHeight * (ripple.goingUp ? ease(t) : 1 - ease(t));
const buttonRect = ripple.element.getBoundingClientRect();
const buttonCenter = buttonRect.width / 2;
const rippleCenter = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
const rippleOffset = rippleCenter - buttonCenter;
const rippleStartX = buttonRect.left - rippleSvgLeft - rippleOffset;
const rippleRadius = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
const handleRadius = rippleRadius * HANDLE_STRETCH;
path += `L ${rippleStartX},${fullRippleHeight + 3} `;
path += `c ${handleRadius},0 ${rippleRadius - handleRadius},-${height} ${rippleRadius},-${height} `;
path += `s ${rippleRadius - handleRadius},${height} ${rippleRadius},${height} `;
});
path += `l ${rippleSvgWidth},0`;
ripplePath.setAttribute("d", path);
}
function initializeRipples() {
ripplesInitialized = true;
@ -110,6 +76,40 @@ function animate(forceRefresh) {
}
}
function setRipples(mediaQueryScaleFactor) {
const rippleSvgRect = rippleSvg.getBoundingClientRect();
const rippleSvgLeft = rippleSvgRect.left;
const rippleSvgWidth = rippleSvgRect.width;
let path = `M 0,${fullRippleHeight + 3} `;
ripples.forEach((ripple) => {
if (!ripple.animationStartTime || !ripple.animationEndTime) return;
const t = Math.min((Date.now() - ripple.animationStartTime) / (ripple.animationEndTime - ripple.animationStartTime), 1);
const height = fullRippleHeight * (ripple.goingUp ? ease(t) : 1 - ease(t));
const buttonRect = ripple.element.getBoundingClientRect();
const buttonCenter = buttonRect.width / 2;
const rippleCenter = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
const rippleOffset = rippleCenter - buttonCenter;
const rippleStartX = buttonRect.left - rippleSvgLeft - rippleOffset;
const rippleRadius = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
const handleRadius = rippleRadius * HANDLE_STRETCH;
path += `L ${rippleStartX},${fullRippleHeight + 3} `;
path += `c ${handleRadius},0 ${rippleRadius - handleRadius},-${height} ${rippleRadius},-${height} `;
path += `s ${rippleRadius - handleRadius},${height} ${rippleRadius},${height} `;
});
path += `l ${rippleSvgWidth},0`;
ripplePath.setAttribute("d", path);
}
function ease(x) {
return 1 - (1 - x) * (1 - x);
}