You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
3.1 KiB
84 lines
3.1 KiB
const UI = {
|
|
CLASSNAMES: {
|
|
ITEM: 'event-item',
|
|
YEAR: 'event-year',
|
|
FLAG: 'event-flag',
|
|
LOCATION: 'event-location',
|
|
},
|
|
|
|
DATA: {
|
|
EVENT: 'data-event-key',
|
|
ROUND: 'data-round-key',
|
|
SORT: 'data-sort-key',
|
|
},
|
|
|
|
updateEventsPane: (eventKey) => {
|
|
const events = document.querySelectorAll(`.${UI.CLASSNAMES.ITEM}`);
|
|
|
|
events.forEach(node => {
|
|
const classes = node.className.split(' ');
|
|
classes.splice(1, classes.indexOf('active'));
|
|
node.className = classes.join(' ');
|
|
});
|
|
|
|
const activeEventNode = document.querySelector(`[${UI.DATA.EVENT}="${eventKey}"`);
|
|
activeEventNode.className += ' active';
|
|
},
|
|
|
|
buildEventsPane: (onClick) => {
|
|
const eventsList = [
|
|
{ year: 1930, location: "Uruguay", icon: "uy" },
|
|
{ year: 1934, location: "Italy", icon: "it" },
|
|
{ year: 1938, location: "France", icon: "fr" },
|
|
{ year: 1954, location: "Switzerland", icon: "ch" },
|
|
{ year: 1958, location: "Sweden", icon: "se" },
|
|
{ year: 1962, location: "Chile", icon: "cl" },
|
|
{ year: 1966, location: "England", icon: "gb" },
|
|
{ year: 1970, location: "Mexico", icon: "mx" },
|
|
{ year: 1974, location: "West Germany", icon: "de" },
|
|
{ year: 1978, location: "Argentina", icon: "ar" },
|
|
{ year: 1982, location: "Spain", icon: "es" },
|
|
{ year: 1986, location: "Mexico", icon: "mx" },
|
|
{ year: 1990, location: "Italy", icon: "it" },
|
|
{ year: 1994, location: "USA", icon: "us" },
|
|
{ year: 1998, location: "France", icon: "fr" },
|
|
{ year: 2002, location: "Japan / South Korea", icon: "jp" },
|
|
{ year: 2006, location: "Germany", icon: "de" },
|
|
{ year: 2010, location: "Johannesburg", icon: "za" },
|
|
{ year: 2014, location: "Brazil", icon: "br" },
|
|
];
|
|
|
|
const eventsDiv = document.querySelector('.events');
|
|
|
|
while (eventsDiv.hasChildNodes()) {
|
|
eventsDiv.firstChild.remove();
|
|
}
|
|
|
|
eventsList.forEach((evt) => {
|
|
const item = document.createElement('div');
|
|
const year = document.createElement('div');
|
|
const location = document.createElement('div');
|
|
const flag = document.createElement('div');
|
|
const flagIcon = document.createElement('div');
|
|
|
|
item.className = UI.CLASSNAMES.ITEM;
|
|
year.className = UI.CLASSNAMES.YEAR;
|
|
location.className = UI.CLASSNAMES.LOCATION;
|
|
flag.className = UI.CLASSNAMES.FLAG;
|
|
|
|
item.addEventListener('click', onClick);
|
|
item.setAttribute('data-event-key', evt.year);
|
|
|
|
year.innerHTML = evt.year;
|
|
location.innerHTML = evt.location;
|
|
flagIcon.className = `flag-icon flag-icon-${evt.icon}`;
|
|
|
|
flag.appendChild(flagIcon);
|
|
item.appendChild(flag);
|
|
item.appendChild(year);
|
|
item.appendChild(location);
|
|
|
|
eventsDiv.appendChild(item);
|
|
});
|
|
},
|
|
};
|
|
|