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
|
(() => {
const $fetch = document.getElementById("countries"),
$fragment = document.createDocumentFragment();
async function getData($url, $method) {
try {
const res = await fetch( $url, {
method: $method,
});
let data = await res.json();
if (!res.ok) throw { status: res.status, statusText: res.statusText };
return data;
} catch (err) {
console.log(err);
let message = err.statusText || "Unexpected error";
let data = `Error ${err.status}: ${message}`;
return data;
}
};
// Run getData
getData('https://restcountries.com/v3.1/all', 'GET').then( (data) => {
data.forEach((el) => {
const $country = document.createElement("article");
$country.classList.add("item-box");
$country.innerHTML = `<div class="item-country">
<a class="thumbnail-box" title="${el.name.common}">
<div class="thumbnail">
<img class="thumbnail-img" alt=" " src="${el.flags.png}">
</div>
</a>
<h4 class="title"><a href="#simpleModal_${el.name.common}" data-target="simpleModal_${el.name.common}" data-toggle="modal" title="${el.capital}">${el.capital}</a></h4>
<address title="${el.name.common}"><b><a href="#simpleModal_${el.name.common}" data-target="simpleModal_${el.name.common}" data-toggle="modal">${el.name.common}</a></b></address>
<div class="stats horizontal-stats">
<span>Population</span>
<div>${el.population}</div>
</div>
<!-- Modal -->
<div id="simpleModal_${el.name.common}" class="modal">
<div class="modal-window">
<div class="close-modal" data-dismiss="modal">×</div>
<table id="jslicense-labels1" class="table">
<caption>General information for Country - ${el.name.common}</caption>
<thead>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Region</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Country">${el.name.common}</td>
<td data-label="Capital">${el.capital}</td>
<td data-label="Region">${el.region}</td>
</tr>
</tbody>
</table>
<button data-dismiss="modal" class="btn-close">Close</button>
</div>
</div>
</div>`;
$fragment.appendChild($country);
});
$fetch.appendChild($fragment);
});
// Modal
document.addEventListener('click', function (e) {
e = e || window.event;
let target = e.target || e.srcElement;
if (target.dataset.target && target.dataset.target !== '') {
let modalId = target.dataset.target;
document.getElementById(modalId).classList.add('open');
e.preventDefault();
}
// }
if (target.dataset.iframe && target.dataset.iframe !== '' && target.dataset.src && target.dataset.src !== '') {
document.getElementById(target.dataset.iframe).src = target.dataset.src;
}
if (target.dataset.dimensions && target.dataset.dimensions !== "") {
// alert(target.dataset.dimensions);
document.querySelector('#' + target.dataset.target + ' .modal-window').setAttribute('style', target.dataset.dimensions);
if (target.dataset.iframe && target.dataset.iframe !== '' && target.dataset.src && target.dataset.src !== '') {
document.getElementById(target.dataset.iframe).setAttribute('style', target.dataset.dimensions);
}
document.querySelector('#' + target.dataset.target + ' .modal-window').setAttribute('style', target.dataset.dimensions);
}
if (target.dataset.reload && target.dataset.reload === '1') {
document.querySelector('.close-modal').dataset.reload = 1;
}
// Close modal window with 'data-dismiss' attribute or when the backdrop is clicked
if ((target.hasAttribute('data-dismiss') && target.getAttribute('data-dismiss') == 'modal') || target.classList.contains('modal')) {
if (target.dataset.reload && target.dataset.reload === '1') {
parent.location.reload(true);
let modal = document.querySelector('[class="modal open"]');
modal.classList.remove('open');
e.preventDefault();
} else {
let modal = document.querySelector('[class="modal open"]');
modal.classList.remove('open');
e.preventDefault();
}
}
}, false);
document.body.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
if (document.querySelector('.close-modal')) {
document.querySelector('.close-modal').click();
}
}
});
})();
|
