-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.js
152 lines (135 loc) · 7.91 KB
/
app.js
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');
// Display Mobile Menu
const mobileMenu = () => {
// toggle adds class if it doesn't exist
// removes class if it does exist
// .is-active and .active need to be connected to
// #mobile-menu and .navbar__menu in CSS for this to work
menu.classList.toggle('is-active');
menuLinks.classList.toggle('display');
};
menu.addEventListener('click', mobileMenu);
const hoverAnimation = (selectedClass, color = "#EF233C") => {
// get all the elements with the given class that should have the highlight effect
document.querySelectorAll(selectedClass).forEach(element => {
// replaces the element's content with spans of each letter
// '.' finds a single character, except newline or line terminator
// $& gets the letter that matched '/./'
// need the 'g' in '/./g' to replace all letters in the element
element.innerHTML = element.textContent.replace(/./g, "<span>$&</span>");
element.textContent.replace()
// add the event listeners for when the element is hovered over and not hovered over
// need to use 'event =>' because event needs to be defined for the currentTarget function
element.addEventListener("mouseenter", event => animate(event));
element.addEventListener("mouseleave", event => clear(event));
});
// need these functions to be local so that they can use the color variable
// changes the color of each letter and adds a delay to each letter
function animate(event){
event.currentTarget.querySelectorAll("span").forEach((element, i) =>
element.style.cssText = `
transition: 0.2s ease-in ${(30*i)}ms;
color: ${(color)};
`);
}
// clears the hover effects by removing the color style
function clear(event){
event.currentTarget.querySelectorAll("span").forEach((element, i) =>
element.style.cssText = `
transition: 0.2s ease-in ${(30*i)}ms;
color: ${("")};
`);
}
};
hoverAnimation(".home", "#EF233C");
hoverAnimation(".navbar__links", "#EF233C");
const modal = document.querySelector(".project_modal");
const proj_title = document.querySelector(".project_title");
const proj_desc = document.querySelector(".project_description");
const proj_link = document.querySelector(".project_link");
const dim1 = document.querySelector(".dimmer1");
const dim2 = document.querySelector(".dimmer2");
const dim3 = document.querySelector(".dimmer3");
const dim4 = document.querySelector(".dimmer4");
const projectModalEffect = (selectedClass) => {
document.querySelectorAll(selectedClass).forEach((element,projectNum) => {
element.addEventListener('click', () => {
resetDimmers();
if(projectNum === 0){
dim1.style.display = "block";
proj_title.innerHTML = "[ The Great Canadian Masterpiece ]";
proj_desc.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non arcu porta, semper massa eu, feugiat mauris. Fusce rutrum urna nec est euismod euismod. Nulla viverra eu felis eget mollis. Etiam consectetur in tellus in dapibus. Aenean ut fringilla urna. Pellentesque eget orci in eros viverra imperdiet ac sit amet tellus. Nulla nec diam pulvinar, pulvinar orci in, lobortis ligula. In molestie, dolor vel porta rutrum, tortor risus venenatis lectus, sit amet consectetur quam justo a sem. Integer eget eleifend metus. Pellentesque suscipit purus quis nunc tincidunt iaculis. Mauris bibendum dolor sit amet ";
proj_link.innerHTML = "[ Github Link ]";
proj_link.href = "https://github.com/ayshon/calgaryhacks2021";
modal.style.display = "block";
} else if(projectNum === 1) {
dim3.style.display = "block";
proj_title.innerHTML = "[ Personal Website ]";
proj_desc.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non arcu porta, semper massa eu, feugiat mauris. Fusce rutrum urna nec est euismod euismod. Nulla viverra eu felis eget mollis. Etiam consectetur in tellus in dapibus. Aenean ut fringilla urna. Pellentesque eget orci in eros viverra imperdiet ac sit amet tellus. Nulla nec diam pulvinar, pulvinar orci in, lobortis ligula. In molestie, dolor vel porta rutrum, tortor risus venenatis lectus, sit amet consectetur quam justo a sem. Integer eget eleifend metus. Pellentesque suscipit purus quis nunc tincidunt iaculis. Mauris bibendum dolor sit amet ";
proj_link.innerHTML = "[ Github Link ]";
proj_link.href = "https://github.com/ayshon/ayshon.github.io";
modal.style.display = "block";
} else if(projectNum === 2) {
dim2.style.display = "block";
proj_title.innerHTML = "[ Semejo Maps (GIS) ]";
proj_desc.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non arcu porta, semper massa eu, feugiat mauris. Fusce rutrum urna nec est euismod euismod. Nulla viverra eu felis eget mollis. Etiam consectetur in tellus in dapibus. Aenean ut fringilla urna. Pellentesque eget orci in eros viverra imperdiet ac sit amet tellus. Nulla nec diam pulvinar, pulvinar orci in, lobortis ligula. In molestie, dolor vel porta rutrum, tortor risus venenatis lectus, sit amet consectetur quam justo a sem. Integer eget eleifend metus. Pellentesque suscipit purus quis nunc tincidunt iaculis. Mauris bibendum dolor sit amet ";
proj_link.innerHTML = "[ Github Link ]";
proj_link.href = "https://github.com/ayshon/Semejo-Maps";
modal.style.display = "block";
} else if(projectNum === 3) {
dim4.style.display = "block";
proj_title.innerHTML = "[ Space Invaders on De1-SoC ]";
proj_desc.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non arcu porta, semper massa eu, feugiat mauris. Fusce rutrum urna nec est euismod euismod. Nulla viverra eu felis eget mollis. Etiam consectetur in tellus in dapibus. Aenean ut fringilla urna. Pellentesque eget orci in eros viverra imperdiet ac sit amet tellus. Nulla nec diam pulvinar, pulvinar orci in, lobortis ligula. In molestie, dolor vel porta rutrum, tortor risus venenatis lectus, sit amet consectetur quam justo a sem. Integer eget eleifend metus. Pellentesque suscipit purus quis nunc tincidunt iaculis. Mauris bibendum dolor sit amet ";
proj_link.innerHTML = "[ Github Link ]";
proj_link.href = "https://github.com/ayshon/space-invaders-c";
modal.style.display = "block";
}
});
});
};
const resetDimmers = () => {
dim1.style.display = "none";
dim2.style.display = "none";
dim3.style.display = "none";
dim4.style.display = "none";
}
projectModalEffect(".project_img");
const closeElement = document.querySelector(".close");
closeElement.addEventListener('click', () => {
resetDimmers();
modal.style.display = "none";
});
const sections = document.querySelectorAll('.section');
const navLinks = document.querySelectorAll('.nav_link');
function highlightNavLink() {
// console.log("page offset " + pageYOffset);
var currSection = '';
sections.forEach(section => {
// console.log("section " + section.offsetTop);
// console.log("section modify offset " + (section.offsetTop - section.clientHeight/1.5));
if(pageYOffset >= section.offsetTop - section.clientHeight/3){
currSection = section.getAttribute('id');
}
if (section.getAttribute('id') === "contact_page_section") {
if(pageYOffset >= section.offsetTop - section.clientHeight/1.5){
currSection = section.getAttribute('id');
console.log("here");
}
}
})
// console.log(currSection);
navLinks.forEach( link => {
// console.log(link.classList);
link.classList.remove('active');
if(link.classList.contains(currSection)){
link.classList.add('active');
}
})
const element = document.querySelector('.active');
// console.log(window.innerWidth);
if ((element && window.innerWidth < 780)) {
element.classList.remove('active');
}
}
window.addEventListener('scroll', highlightNavLink);