-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
105 lines (94 loc) · 3.02 KB
/
index.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
(function(){
"use strict";
window.addEventListener("load", init);
function init() {
id('burger-icon').addEventListener("click", hamburgerMenu);
responsiveLinks();
connectProjects();
qs('.fa-arrow-left').addEventListener("click", closeProject);
}
function hamburgerMenu() {
let menu = id('responsive-links');
if (menu.className === 'hidden') {
menu.className = '';
} else {
menu.className = 'hidden';
}
}
function responsiveLinks() {
let links = qsa('#responsive-links a');
for (let i=0; i<links.length; i++) {
links[i].addEventListener("click", hamburgerMenu);
}
}
function connectProjects() {
id('proximity').addEventListener("click", () => {
stageProject();
id('proximity-page').className = '';
});
id('seasonality').addEventListener("click", () => {
stageProject();
id('seasonality-page').className = '';
});
id('emergency').addEventListener("click", () => {
stageProject();
id('emergency-page').className = '';
});
id('affordability').addEventListener("click", () => {
stageProject();
id('affordability-page').className = '';
});
}
function stageProject() {
window.scrollTo(0,0);
let mainSections = qsa('main > section:not(:last-child)');
for (let i=0; i<mainSections.length; i++) {
mainSections[i].className = 'hidden';
}
let projectSections = qsa('#project-page section');
for (let i=0; i<projectSections.length; i++) {
projectSections[i].className = 'hidden';
}
id('project-page').className = 'block';
}
function closeProject() {
let mainSections = qsa('main > section:not(:last-child)');
for (let i=0; i<mainSections.length; i++) {
mainSections[i].className = '';
}
id('project-page').className = 'hidden';
}
// ==== HELPER FUNCTIONS ====
/**
* gets the element that matches the id
* @param {string} ID - id of target element
* @returns target element
*/
function id (ID) {
return document.getElementById(ID);
}
/**
* gets a single element that matches the CSS selector
* @param {string} QS - query selector for target element
* @returns first element that matches the query selector
*/
function qs (QS) {
return document.querySelector(QS);
}
/**
* gets a list of elements that match a given CSS selector
* @param {string} QSA - CSS selector to query
* @returns all elements that match the query
*/
function qsa (QSA) {
return document.querySelectorAll(QSA);
}
})();
function hamburgerMenu() {
var x = document.getElementById("myLinks");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}