blob: ac632992d0480ad4608734b4cc00d9abc7f89329 (
plain)
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
|
import projects from './config/projects';
import { isSmallVw, isStyleJsExists } from './utilities/helpers';
/**
* 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();
}
/**
* 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();
}
init();
|
