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

Various website fixes

Browse source
This commit is contained in:
Keavon Chambers 2022-03-17 02:12:23 -07:00
parent 36d67393b9
commit f6726c1427
15 changed files with 47 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,13 +5,14 @@ const HANDLE_STRETCH = 0.4;
let ripplesInitialized;
let navButtons;
let navButtonFontSize;
let rippleSvg;
let ripplePath;
let fullRippleHeight;
let ripples;
let activeRippleIndex;
let globalCount = 0;
window.addEventListener("DOMContentLoaded", initializeRipples);
window.addEventListener("resize", () => animate(true));
@ -30,7 +31,7 @@ function initializeRipples() {
goingUp: false,
}));
activeRippleIndex = ripples.findIndex((ripple) => ripple.element.getAttribute("href") === window.location.pathname);
activeRippleIndex = ripples.findIndex((ripple) => ripple.element.getAttribute("href").replace(/\//g, "") === window.location.pathname.replace(/\//g, ""));
ripples.forEach((ripple) => {
@ -55,28 +56,32 @@ function initializeRipples() {
ripples[activeRippleIndex] = {
...ripples[activeRippleIndex],
animationStartTime: Date.now(),
animationEndTime: Date.now() + RIPPLE_ANIMATION_MILLISECONDS,
animationStartTime: 1,
animationEndTime: 1 + RIPPLE_ANIMATION_MILLISECONDS,
goingUp: true,
};
animate(false);
setRipples();
}
function animate(forceRefresh) {
if (!ripplesInitialized) return;
navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize) || NAV_BUTTON_INITIAL_FONT_SIZE;
const mediaQueryScaleFactor = navButtonFontSize / NAV_BUTTON_INITIAL_FONT_SIZE;
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++;
if (animateThisFrame || forceRefresh) {
setRipples(mediaQueryScaleFactor);
setRipples();
window.requestAnimationFrame(() => animate(false));
}
}
function setRipples(mediaQueryScaleFactor) {
function setRipples() {
const navButtonFontSize = Number.parseInt(window.getComputedStyle(navButtons[0]).fontSize) || NAV_BUTTON_INITIAL_FONT_SIZE;
const mediaQueryScaleFactor = navButtonFontSize / NAV_BUTTON_INITIAL_FONT_SIZE;
const rippleHeight = fullRippleHeight * (mediaQueryScaleFactor * 0.5 + 0.5);
const rippleSvgRect = rippleSvg.getBoundingClientRect();
const rippleSvgLeft = rippleSvgRect.left;