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
|
import projects from './config/projects';
import { isSmallVw, isStyleJsExists } from './utilities/helpers';
/**
* Hide the header and footer.
* @param {HTMLElement} header - The header element.
* @param {HTMLElement} footer - The footer element.
*/
function hideHeaderFooter(header, footer) {
header.classList.remove('slide-in--left');
footer.classList.remove('slide-in--left');
header.classList.add('slide-out--left');
footer.classList.add('slide-out--left');
setTimeout(() => {
header.classList.add('hide');
footer.classList.add('hide');
}, 800);
}
/**
* Show the header and footer.
* @param {HTMLElement} header - The header element.
* @param {HTMLElement} footer - The footer element.
*/
function showHeaderFooter(header, footer) {
header.classList.remove('slide-out--left');
footer.classList.remove('slide-out--left');
header.classList.remove('hide');
footer.classList.remove('hide');
header.classList.add('slide-in--left');
footer.classList.add('slide-in--left');
}
/**
* Handle header and footer visibility.
* @returns {void}
*/
function toggleHeaderFooter() {
const header = document.querySelector('header');
const footer = document.querySelector('footer');
if (!isSmallVw()) {
showHeaderFooter(header, footer);
return;
}
if (header.classList.contains('hide')) {
showHeaderFooter(header, footer);
} else {
hideHeaderFooter(header, footer);
}
}
/**
* Add an event listener to show or hide header and footer.
*/
function listenMenuBtn() {
const menuBtn = document.querySelector('.btn--menu');
menuBtn.addEventListener('click', toggleHeaderFooter);
}
/**
* Display or hide the toolbar depending on the current viewport width.
*/
function toggleToolbar() {
const toolbar = document.querySelector('.toolbar');
if (isSmallVw()) {
toolbar.style.display = '';
} else {
toolbar.style.display = 'none';
}
}
/**
* Change the visibility of some DOM elements.
*/
function updateView() {
toggleToolbar();
toggleHeaderFooter();
}
/**
* Update view when the window size changes.
*/
function listenWindowSize() {
window.addEventListener('resize', updateView);
}
/**
* Create a list item for a project.
* @param {Integer} id - The project id.
* @param {String} name - The project name.
* @returns {HTMLElement} The list item.
*/
function getProjectsNavItem(id, name) {
const item = document.createElement('li');
const link = document.createElement('a');
link.classList.add('nav__link', 'nav__link--app');
link.href = id;
link.id = id;
link.textContent = name;
item.classList.add('nav__item');
item.appendChild(link);
return item;
}
/**
* Print the list of available projects.
*/
function printProjectsNav() {
const ul = document.querySelector('.nav .nav__list');
projects.forEach((project) => {
const item = getProjectsNavItem(project.id, project.name);
ul.appendChild(item);
});
}
/**
* Add style.js script for development purposes.
*/
function loadWebpackStyles() {
if (isStyleJsExists()) {
const head = document.querySelector('head');
const script = document.createElement('script');
script.src = 'assets/js/style.js';
head.appendChild(script);
}
}
/**
* Initialize the website with the projects list.
*/
function init() {
loadWebpackStyles();
printProjectsNav();
updateView();
listenWindowSize();
listenMenuBtn();
}
init();
|
