mirror of
https://github.com/lipis/flag-icons.git
synced 2024-11-25 13:29:24 +01:00
69 lines
2.1 KiB
JavaScript
69 lines
2.1 KiB
JavaScript
const loadJSON = (path, callback) => {
|
|
var xobj = new XMLHttpRequest();
|
|
xobj.overrideMimeType("application/json");
|
|
xobj.open("GET", path, true);
|
|
xobj.onreadystatechange = function () {
|
|
if (xobj.readyState == 4 && xobj.status == "200") {
|
|
callback(xobj.responseText);
|
|
}
|
|
};
|
|
xobj.send(null);
|
|
};
|
|
|
|
const addFlag = (country, rowDiv) => {
|
|
const colDiv = document.createElement("div");
|
|
colDiv.classList.add("col-xl-2");
|
|
colDiv.classList.add("col-lg-3");
|
|
colDiv.classList.add("col-md-4");
|
|
colDiv.classList.add("col-6");
|
|
colDiv.id = country.code;
|
|
const flagDiv = document.createElement("div");
|
|
flagDiv.classList.add("flag");
|
|
|
|
// Code
|
|
const codeSpan = document.createElement("span");
|
|
codeSpan.classList.add("flag-code");
|
|
const code = document.createTextNode(country.code);
|
|
codeSpan.appendChild(code);
|
|
// Divider
|
|
const dividerSpan = document.createElement("span");
|
|
const divider = document.createTextNode(" ");
|
|
dividerSpan.appendChild(divider);
|
|
//Country
|
|
const countryDiv = document.createElement("div");
|
|
countryDiv.classList.add("flag-country");
|
|
countryDiv.classList.add("no-wrap");
|
|
countryDiv.title = country.name;
|
|
const countrySpan = document.createElement("span");
|
|
const countryName = document.createTextNode(country.name);
|
|
countrySpan.appendChild(countryName);
|
|
countryDiv.appendChild(codeSpan);
|
|
countryDiv.appendChild(dividerSpan);
|
|
countryDiv.appendChild(countrySpan);
|
|
const flagImg = document.createElement("img");
|
|
flagImg.classList.add("flag-img");
|
|
flagImg.src = country.flag_4x3;
|
|
flagImg.alt = `Flag of ${country.name}`;
|
|
|
|
colDiv.appendChild(flagDiv);
|
|
flagDiv.appendChild(countryDiv);
|
|
flagDiv.appendChild(flagImg);
|
|
rowDiv.appendChild(colDiv);
|
|
};
|
|
|
|
window.onload = function () {
|
|
const isoFlagsRow = document.getElementById("iso-flags");
|
|
const nonIsoFlagsRow = document.getElementById("non-iso-flags");
|
|
loadJSON("country.json", (response) => {
|
|
const countries = JSON.parse(response);
|
|
for (country of countries) {
|
|
console.log(country);
|
|
if (country.iso) {
|
|
addFlag(country, isoFlagsRow);
|
|
} else {
|
|
addFlag(country, nonIsoFlagsRow);
|
|
}
|
|
}
|
|
});
|
|
};
|