My personal site hosted @ https://indexx.dev
indexx.dev
1export function initializeProjects() {
2 const tooltips = document.querySelectorAll(
3 '[data-bs-toggle="tooltip"]',
4 ) as NodeListOf<Element>;
5 [...tooltips].forEach((element) => {
6 //@ts-ignore
7 new bootstrap.Tooltip(element);
8 element.addEventListener(
9 "click",
10 () => (element as HTMLElement).blur(),
11 );
12 });
13
14 const page = document.getElementById("page")!;
15 const projectsButton = document.getElementById("projects-button")!;
16 projectsButton.addEventListener("click", function () {
17 projectsButton.blur();
18 page.classList.toggle("side");
19 if (!page.classList.contains("side")) {
20 fade("projects-pane", 1, 0, 0.5);
21 } else {
22 fade("projects-pane", 0, 1, 0.5);
23 }
24 });
25}
26
27function fade(
28 id: string,
29 initialOpacity: number,
30 finalOpacity: number,
31 totalTime: number,
32) {
33 const element = document.getElementById(id);
34 if (!element) {
35 throw new Error("why");
36 }
37 if (initialOpacity == 0) {
38 element.style.visibility = "visible";
39 element.style.pointerEvents = "auto";
40 } else {
41 element.style.pointerEvents = "none";
42 setTimeout(() => {
43 element.style.visibility = "hidden";
44 }, totalTime);
45 }
46
47 const currentTick = new Date().getTime();
48 const elapsed = currentTick - totalTime;
49 const newOpacity = initialOpacity +
50 ((finalOpacity - initialOpacity) * elapsed) / totalTime;
51 if (
52 Math.abs(newOpacity - initialOpacity) >
53 Math.abs(finalOpacity - initialOpacity)
54 ) {
55 element.style.opacity = finalOpacity.toString();
56 return;
57 }
58
59 element.style.opacity = newOpacity.toString();
60}