-
Notifications
You must be signed in to change notification settings - Fork 1
/
speakers.js
87 lines (81 loc) · 3.3 KB
/
speakers.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
// Array of speaker object to be used for speakers section
const speakersInfo = [
{
name: 'Lázaro Bruzón', img: './assets/bruzon.jfif', title: 'GM 2,610ELO', bio: 'GM Bruzón has been one of the strongest cuban chess players for more than a decade',
},
{
name: 'Ding Liren', img: './assets/ding.jfif', title: 'GM 2,799ELO', bio: 'GM Liren is the top player form China, currently #5 in the world',
},
{
name: 'Ian Nepomniachtchi', img: './assets/ian.jfif', title: 'GM 2,773LO', bio: 'GM Nepomniachtchi is former world champion challenger and currently #5 in the world',
},
{
name: 'Vasily Ivanchuk', img: './assets/ivanchuk.jfif', title: 'GM 2,678ELO', bio: 'GM Ivanchuk has been world class player for more than 20 years ',
},
{
name: 'Hou Yifan', img: './assets/hou.jfif', title: 'WGM 2,658 ELO', bio: 'WGM Hou from China is the world #1 woman. Mutiple world champion',
},
{
name: 'Alireza Firouzja', img: './assets/firo.jfif', title: 'GM 2,804ELO', bio: 'GM Firouzja is the top junior player and currently # 2 in the ELO rating',
},
];
// Create speaker cards and populates speaker section
function fillSpeakerSection(speakers) {
const dataUserTemplate = document.querySelector('.speaker-template');
const speakersContainer = document.querySelector('.speakers-container');
speakers.forEach((speaker) => {
// Safe to clone as it does not contain any id attribute
// speaker-card is the only child of the document fragment
const speakerCard = dataUserTemplate.content.cloneNode(true).children[0];
speakerCard.querySelector('.speaker-card img').setAttribute('src', speaker.img);
speakerCard.querySelector('.info .speaker').textContent = speaker.name;
speakerCard.querySelector('.info .title').textContent = speaker.title;
speakerCard.querySelector('.info .bio').textContent = speaker.bio;
speakersContainer.append(speakerCard);
});
}
// Show all speaker cards
function showMoreSpeakers() {
const cards = document.querySelectorAll('.speaker-card');
cards.forEach((card) => {
card.style.display = 'flex';
});
}
// Show only the first two cards
function showLessSpeakers() {
const cards = document.querySelectorAll('.speaker-card');
let counter = 1;
cards.forEach((card) => {
if (counter <= 2) card.style.display = 'flex';
else card.style.display = 'none';
counter += 1;
});
}
// Button more or less functionality
document.querySelector('.speakers .btn-more').addEventListener('click', () => {
const btn = document.querySelector('.speakers .btn-more');
if (btn.children[0].textContent === 'MORE') {
showMoreSpeakers();
btn.children[0].textContent = 'LESS';
btn.children[1].textContent = '^';
} else {
showLessSpeakers(btn);
btn.children[0].textContent = 'MORE';
btn.children[1].textContent = 'v';
}
});
// Needed when the user resize the browser and there are speaker cards hidden
window.addEventListener('resize', (e) => {
if (e.currentTarget.innerWidth > 768) {
const cards = document.querySelectorAll('.speaker-card');
cards.forEach((card) => {
card.style.display = 'flex';
});
} else {
const btn = document.querySelector('.speakers .btn-more');
showLessSpeakers();
btn.children[0].textContent = 'MORE';
btn.children[1].textContent = '>';
}
});
fillSpeakerSection(speakersInfo);