@ -1,5 +1,11 @@
const UI = {
CLASSNAMES : {
TOURNEY : {
LINK : 'tourney-link' ,
IMAGE : 'tourney-image' ,
COUNTRY : 'tourney-country' ,
YEAR : 'tourney-year' ,
} ,
EVENT : {
ITEM : 'event-item' ,
YEAR : 'event-year' ,
@ -7,12 +13,14 @@ const UI = {
} ,
SORT : {
ICON : 'sort-icon' ,
ITEM : 'sort-item' ,
TEXT : 'sort-text' ,
TINY : 'sort-tiny' ,
} ,
ROUND : {
ICON : 'round-icon' ,
ITEM : 'round-item' ,
TEXT : 'round-text' ,
TINY : 'round-tiny' ,
@ -62,6 +70,39 @@ const UI = {
} ) ;
} ,
updateTourneyPane : ( eventKey ) => {
const tourneyList = {
'1930' : "Uruguay" ,
'1934' : "Italy" ,
'1938' : "France" ,
'1954' : "Switzerland" ,
'1958' : "Sweden" ,
'1962' : "Chile" ,
'1966' : "England" ,
'1970' : "Mexico" ,
'1974' : "West Germany" ,
'1978' : "Argentina" ,
'1982' : "Spain" ,
'1986' : "Mexico" ,
'1990' : "Italy" ,
'1994' : "USA" ,
'1998' : "France" ,
'2002' : "Japan / South Korea" ,
'2006' : "Germany" ,
'2010' : "Johannesburg" ,
'2014' : "Brazil" ,
} ;
const ek = ( tourneyList [ eventKey ] === undefined ? null : eventKey ) ;
const tourneyPane = document . querySelector ( '.tourney' ) ;
tourneyPane . querySelector ( ` . ${ UI . CLASSNAMES . TOURNEY . IMAGE } ` ) . src = ` res/ ${ ek } .jpg ` ;
tourneyPane . querySelector ( ` . ${ UI . CLASSNAMES . TOURNEY . LINK } ` ) . href = ` https://en.wikipedia.org/wiki/ ${ ek } _FIFA_World_Cup ` ;
tourneyPane . querySelector ( ` . ${ UI . CLASSNAMES . TOURNEY . COUNTRY } ` ) . innerHTML = tourneyList [ ek ] ;
tourneyPane . querySelector ( ` . ${ UI . CLASSNAMES . TOURNEY . YEAR } ` ) . innerHTML = ek ;
} ,
updateEventsPane : ( eventKey ) => {
const eventItems = document . querySelectorAll ( ` . ${ UI . CLASSNAMES . EVENT . ITEM } ` ) ;
UI . clearActive ( eventItems ) ;
@ -107,27 +148,51 @@ const UI = {
} ) ;
} ,
buildTourneyPane : ( ) => {
const link = document . createElement ( 'a' ) ;
const img = document . createElement ( 'img' ) ;
const country = document . createElement ( 'div' ) ;
const year = document . createElement ( 'year' ) ;
link . className = UI . CLASSNAMES . TOURNEY . LINK ;
link . target = '_blank' ;
img . className = UI . CLASSNAMES . TOURNEY . IMAGE ;
country . className = UI . CLASSNAMES . TOURNEY . COUNTRY ;
year . className = UI . CLASSNAMES . TOURNEY . YEAR ;
const tourneyPane = document . querySelector ( '.tourney' ) ;
link . appendChild ( img ) ;
tourneyPane . appendChild ( link ) ;
tourneyPane . appendChild ( year ) ;
tourneyPane . appendChild ( country ) ;
} ,
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" } ,
{ year : 1930 , icon : "uy" } ,
{ year : 1934 , icon : "it" } ,
{ year : 1938 , icon : "fr" } ,
{ year : 1954 , icon : "ch" } ,
{ year : 1958 , icon : "se" } ,
{ year : 1962 , icon : "cl" } ,
{ year : 1966 , icon : "gb" } ,
{ year : 1970 , icon : "mx" } ,
{ year : 1974 , icon : "de" } ,
{ year : 1978 , icon : "ar" } ,
{ year : 1982 , icon : "es" } ,
{ year : 1986 , icon : "mx" } ,
{ year : 1990 , icon : "it" } ,
{ year : 1994 , icon : "us" } ,
{ year : 1998 , icon : "fr" } ,
{ year : 2002 , icon : "jp" } ,
{ year : 2006 , icon : "de" } ,
{ year : 2010 , icon : "za" } ,
{ year : 2014 , icon : "br" } ,
] ;
const eventsDiv = document . querySelector ( '.events' ) ;
@ -173,6 +238,7 @@ const UI = {
}
sortList . forEach ( sort => {
const icon = document . createElement ( 'img' ) ;
const item = document . createElement ( 'div' ) ;
const text = document . createElement ( 'div' ) ;
const tiny = document . createElement ( 'div' ) ;
@ -188,8 +254,13 @@ const UI = {
tiny . className = UI . CLASSNAMES . SORT . TINY ;
tiny . innerHTML = 'sort' ;
icon . className = UI . CLASSNAMES . SORT . ICON ;
icon . src = 'res/sort.svg' ;
item . appendChild ( icon ) ;
item . appendChild ( text ) ;
item . appendChild ( tiny ) ;
sortDiv . appendChild ( item ) ;
} ) ;
} ,
@ -211,22 +282,29 @@ const UI = {
}
roundsList . forEach ( round => {
const icon = document . createElement ( 'img' ) ;
const item = document . createElement ( 'div' ) ;
const text = document . createElement ( 'div' ) ;
const tiny = document . createElement ( 'div' ) ;
item . className = UI . CLASSNAMES . ROUND . ITEM ;
item . addEventListener ( 'click' , onClick ) ;
item . setAttribute ( UI . DATA . ROUND , round . value ) ;
item . setAttribute ( UI . DATA . ROOT , true ) ;
const tiny = document . createElement ( 'div' ) ;
tiny . className = UI . CLASSNAMES . ROUND . TINY ;
tiny . innerHTML = 'hide' ;
const text = document . createElement ( 'div' ) ;
text . className = UI . CLASSNAMES . ROUND . TEXT ;
text . innerHTML = round . text ;
icon . className = UI . CLASSNAMES . ROUND . ICON ;
icon . src = 'res/check.svg' ;
item . appendChild ( icon ) ;
item . appendChild ( text ) ;
item . appendChild ( tiny ) ;
roundsDiv . appendChild ( item ) ;
} ) ;
} ,
