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

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);
}