bio/script.js at master · kiskiller0/bio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
let images = ["user1.jpg", "user2.jpeg", "user3.png"];
let profile = document.querySelector(".profile img");

const toggles = Array.from(document.querySelectorAll(".toggle"));
const sections = Array.from(document.querySelectorAll(".mainsection"));

let previousToggle = toggles[0];
let previous2Toggle = toggles[0];

// const toggleToSection = {};

// let i = 0;
// for (let toggle of toggles) {
// 	console.log(toggle);
// 	toggleToSection[toggle] = sections[i];
// 	i++;
// 	console.log(toggleToSection[toggle]);
// }

// console.warn("====================================");

// for (let toggle of toggles) {
// 	console.log(toggle);
// 	console.log(toggleToSection[toggle]);
// }

let swipeDirection = "rightSwipe";

for (let toggle of toggles) {
	toggle.addEventListener("click", (e) => {
		if (toggle == previousToggle) {
			return;
		}

		//swipeDirection
		sections[toggles.indexOf(previous2Toggle)].classList.remove(swipeDirection);

		swipeDirection = "leftSwipe";
		switch (true) {
			case toggles.indexOf(toggle) < toggles.indexOf(previousToggle):
				swipeDirection = "rightSwipe";
		}

		//
		// added most recently, change profile image:
		profile.src = "public/" + images[toggles.indexOf(toggle)];
		// animate picture swap:
		profile.animate(
			[
				{
					opacity: 0,

					transform: `rotate(${
						swipeDirection == "rightSwipe" ? "" : "-"
					}45deg) scale(.6)`,
				},
				{ opacity: 100 },
			],
			300
		);
		//
		//removing old classes:
		previousToggle.classList.remove("selected");
		sections[toggles.indexOf(previousToggle)].classList.remove("shown");
		sections[toggles.indexOf(previousToggle)].classList.add(swipeDirection);

		// console.log(toggle);
		// console.log("is set to shown");

		sections[toggles.indexOf(toggle)].classList.add("shown");

		toggle.classList.add("selected");
		previous2Toggle = previousToggle;
		previousToggle = toggle;
	});
}

// animating links reveal:

const links = document.querySelectorAll(".link");
const blob = document.querySelector(".blob");

let reveal = true; // they must be hidden by default

blob.addEventListener("click", (e) => {
	if (reveal) {
		for (let link of links) link.classList.add("revealed");
	} else {
		for (let link of links) {
			link.classList.remove("revealed");
		}
	}

	reveal = !reveal;
});

// collapsible bio paragraphs:
let arrows = document.querySelectorAll(".arrow");
let currentArrow = arrows[0];

for (let arrow of arrows) {
	arrow.addEventListener("click", (e) => {
		if (currentArrow == arrow) {
			if (currentArrow.classList.contains("selected")) {
				currentArrow.classList.remove("selected");
			} else {
				currentArrow.classList.add("selected");
			}
			return;
		}

		currentArrow.classList.remove("selected");
		currentArrow = arrow;
		currentArrow.classList.add("selected");
	});
}