fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-27 17:48: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/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} `;