Fixed the edge case typing animation fail.
All checks were successful
Deploy / deploy (push) Successful in 17s
All checks were successful
Deploy / deploy (push) Successful in 17s
This commit is contained in:
elijah
parent
2746f73cff
commit
be069419ce
@ -1,21 +1,21 @@
|
||||
// animation speeds (ms)
|
||||
const TYPING_SPEED = 180;
|
||||
const ERASE_SPEED = 100;
|
||||
const STATUS_UPDATE_INTERVAL = 60000; // 1min
|
||||
const TIME_UPDATE_INTERVAL = 1; // 1ms (still terrible)
|
||||
// animation speeds cause why not
|
||||
const TYPING_SPEED = 60;
|
||||
const ERASE_SPEED = 80;
|
||||
const STATUS_UPDATE_INTERVAL = 60000; // 1min updates
|
||||
const TIME_UPDATE_INTERVAL = 1; // 1ms updates (yeah its bad)
|
||||
|
||||
// status thresholds
|
||||
// status warning stuff
|
||||
const LATENCY_WARNING_THRESHOLD = 500000;
|
||||
|
||||
// mapping for group names because i'm lazy
|
||||
// lazy group name mapping
|
||||
const GROUP_NAMES = {
|
||||
4: "INFRASTRUCTURE",
|
||||
5: "SERVICES",
|
||||
6: "API",
|
||||
};
|
||||
|
||||
// fancy text typing animation for nav labels
|
||||
// overcomplicated as fuck but whatever
|
||||
// does the fancy typing animation for nav labels
|
||||
// its way overcomplicated but whatever
|
||||
function writeoutnavlabel(label) {
|
||||
if (label.getAttribute("data-animating") === "true") return;
|
||||
|
||||
@ -44,8 +44,8 @@ function writeoutnavlabel(label) {
|
||||
label.setAttribute("data-animation-interval", animationInterval);
|
||||
}
|
||||
|
||||
// erase animation for nav labels
|
||||
// also terrible but consistent with the above
|
||||
// erases the nav labels
|
||||
// just as terrible as the typing but matches
|
||||
function eraselabel(label) {
|
||||
if (label.getAttribute("data-animating") === "true") {
|
||||
const existingInterval = label.getAttribute("data-animation-interval");
|
||||
@ -68,8 +68,8 @@ function eraselabel(label) {
|
||||
label.setAttribute("data-animation-interval", eraseInterval);
|
||||
}
|
||||
|
||||
// time display updater
|
||||
// still updates way too frequently but whatever
|
||||
// updates the time display
|
||||
// probably updates too much but eh
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
const timeString = now
|
||||
@ -87,7 +87,7 @@ function updateTime() {
|
||||
document.getElementById("current-time").textContent = timeString;
|
||||
}
|
||||
|
||||
// status helper functions
|
||||
// bunch of status helper functions for formatting and stuff
|
||||
function calculateAverageUptime(services) {
|
||||
if (!services || services.length === 0) return 0;
|
||||
const totalUptime = services.reduce(
|
||||
@ -115,8 +115,8 @@ function getGroupName(groupId) {
|
||||
return GROUP_NAMES[groupId] || `GROUP ${groupId}`;
|
||||
}
|
||||
|
||||
// creates the HTML for the status page
|
||||
// groups services by their group_id
|
||||
// builds all the html for status page
|
||||
// groups everything by group_id cause organization
|
||||
function createStatusHTML(services) {
|
||||
const groups = services.reduce((acc, service) => {
|
||||
const groupId = service.group_id;
|
||||
@ -154,7 +154,8 @@ function createStatusHTML(services) {
|
||||
.join("");
|
||||
}
|
||||
|
||||
// main status update function
|
||||
// main status updater
|
||||
// fetches and displays all service statuses
|
||||
function updateStatus() {
|
||||
const statusContainer = document.getElementById("status-container");
|
||||
const averageUptimeElement = document.getElementById("average-uptime");
|
||||
@ -176,9 +177,7 @@ function updateStatus() {
|
||||
.catch((error) => {
|
||||
statusContainer.innerHTML = `
|
||||
<div class="error-message">
|
||||
a(42, 90, 90, 0.3), 0 0 40px rgba(42, 90, 90, 0.2); } to { text-shadow: 0 0 40px rgba(42, 90, 90, 0.5), 0 0 80px rgba(42, 90, 90, 0.3); } }"
|
||||
);
|
||||
}); UNABLE TO FETCH STATUS DATA
|
||||
UNABLE TO FETCH STATUS DATA
|
||||
<div style="font-size: 0.8em; margin-top: 5px;">
|
||||
${error.message}
|
||||
</div>
|
||||
@ -188,13 +187,13 @@ function updateStatus() {
|
||||
});
|
||||
}
|
||||
|
||||
// project expansion handlers
|
||||
// handles expanding/collapsing project items
|
||||
// closes others when opening new one
|
||||
document.querySelectorAll(".project-item").forEach((item) => {
|
||||
item.addEventListener("click", function () {
|
||||
const content = this.querySelector(".project-content");
|
||||
const icon = this.querySelector(".expand-icon");
|
||||
|
||||
// close other expanded items
|
||||
document.querySelectorAll(".project-item").forEach((otherItem) => {
|
||||
if (otherItem !== item) {
|
||||
otherItem
|
||||
@ -209,7 +208,8 @@ document.querySelectorAll(".project-item").forEach((item) => {
|
||||
});
|
||||
});
|
||||
|
||||
// smooth scroll navigation
|
||||
// smooth scrolls to sections when clicking nav
|
||||
// better than jumping around
|
||||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||
anchor.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
@ -219,7 +219,8 @@ document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||
});
|
||||
});
|
||||
|
||||
// active nav icon updater
|
||||
// handles active nav icon updates on scroll
|
||||
// shows which section youre looking at
|
||||
window.addEventListener("scroll", () => {
|
||||
let current = "";
|
||||
document.querySelectorAll("section").forEach((section) => {
|
||||
@ -234,34 +235,26 @@ window.addEventListener("scroll", () => {
|
||||
const isCurrentSection = icon.getAttribute("href") === `#${current}`;
|
||||
const wasActive = icon.classList.contains("active");
|
||||
|
||||
if (isCurrentSection) {
|
||||
if (!wasActive) {
|
||||
if (isCurrentSection && !wasActive) {
|
||||
icon.classList.add("active");
|
||||
if (icon.isAnimating) {
|
||||
const text = label.getAttribute("data-text") || label.textContent;
|
||||
label.textContent = text;
|
||||
label.setAttribute("data-animating", "false");
|
||||
clearInterval(
|
||||
parseInt(label.getAttribute("data-animation-interval")),
|
||||
);
|
||||
}
|
||||
if (!icon.hoverAnimationDone) {
|
||||
label.style.opacity = "1";
|
||||
if (!icon.isAnimating && !icon.hoverAnimationDone) {
|
||||
writeoutnavlabel(label);
|
||||
}
|
||||
icon.hoverAnimationDone = true;
|
||||
}
|
||||
} else {
|
||||
if (wasActive) {
|
||||
eraselabel(label);
|
||||
} else if (!isCurrentSection && wasActive) {
|
||||
icon.classList.remove("active");
|
||||
icon.hoverAnimationDone = false;
|
||||
if (!icon.isAnimating) {
|
||||
eraselabel(label);
|
||||
icon.isAnimating = false;
|
||||
icon.hoverAnimationDone = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// nav icon hover animations
|
||||
// nav icon hover stuff
|
||||
// does the typing animation when hovering
|
||||
document.querySelectorAll(".nav-icon").forEach((icon) => {
|
||||
icon.hoverAnimationDone = false;
|
||||
icon.isAnimating = false;
|
||||
@ -285,35 +278,26 @@ document.querySelectorAll(".nav-icon").forEach((icon) => {
|
||||
|
||||
icon.addEventListener("click", () => {
|
||||
const label = icon.querySelector(".nav-label");
|
||||
if (icon.isAnimating) {
|
||||
icon.hoverAnimationDone = true;
|
||||
} else if (!icon.hoverAnimationDone) {
|
||||
writeoutnavlabel(label);
|
||||
icon.isAnimating = true;
|
||||
icon.hoverAnimationDone = true;
|
||||
}
|
||||
label.style.opacity = "1";
|
||||
});
|
||||
});
|
||||
|
||||
// initialization
|
||||
// sets everything up when page loads
|
||||
// starts all the intervals and stuff
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// start time updates
|
||||
updateTime();
|
||||
setInterval(updateTime, TIME_UPDATE_INTERVAL);
|
||||
|
||||
// start status updates
|
||||
updateStatus();
|
||||
setInterval(updateStatus, STATUS_UPDATE_INTERVAL);
|
||||
|
||||
// init active nav icon
|
||||
const activeNavIcon = document.querySelector(".nav-icon.active");
|
||||
if (activeNavIcon) {
|
||||
const label = activeNavIcon.querySelector(".nav-label");
|
||||
if (label) writeoutnavlabel(label);
|
||||
}
|
||||
|
||||
// fancy console log because why not
|
||||
// fancy console log for style points
|
||||
console.log(
|
||||
"%cELIA.NETWORK",
|
||||
"color: #2a5a5a; font-size: 24px; font-weight: bold; text-shadow: 2px 2px 4px rgba(42, 90, 90, 0.3);",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user