ben.burlingham
/
d3-worldcup
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI updates started. Tourney pane constructed.

Browse Source
master
Ben Burlingham 9 years ago
parent cc87428e44
commit 489e5fbc92
13 changed files with 431 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      css/diagram.scss
  2. 7
      css/events.scss
  3. 1
      css/index.scss
  4. 35
      css/rounds.scss
  5. 40
      css/sort.scss
  6. 85
      css/style.css
  7. 17
      css/tourney.scss
  8. 15
      index.html
  9. 104
      js/bundle.js
  10. 2
      js/index.js
  11. 120
      js/ui.js
  12. 49
      res/check.svg
  13. 57
      res/sort.svg

1
css/diagram.scss
Unescape View File

@ -1,5 +1,4 @@
.diagram { .diagram {
background: rgba(150, 100, 200, 0.1);
font-size: 10px; font-size: 10px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;

7
css/events.scss
Unescape View File

@ -21,6 +21,7 @@ $eventItemW: 40px;
overflow: hidden; overflow: hidden;
padding: $eventItemP; padding: $eventItemP;
position: relative; position: relative;
text-align: center;
vertical-align: baseline; vertical-align: baseline;
width: $eventItemW + 2 * $eventItemP; width: $eventItemW + 2 * $eventItemP;
} }
@ -32,9 +33,10 @@ $eventItemW: 40px;
height: 30px; height: 30px;
left: $eventItemP; left: $eventItemP;
line-height: 30px; line-height: 30px;
opacity: 1;
position: absolute; position: absolute;
top: $eventItemP; top: $eventItemP;
transition: top 0.1s linear; transition: opacity 0.15s ease-in;
width: $eventItemW; width: $eventItemW;
z-index: 1; z-index: 1;
} }
@ -49,6 +51,7 @@ $eventItemW: 40px;
// opacity: 0.8; // opacity: 0.8;
.event-year { .event-year {
top: -$eventItemH; // top: -$eventItemH;
opacity: 0;
} }
} }

1
css/index.scss
Unescape View File

@ -2,6 +2,5 @@
height: 700px; height: 700px;
margin: 10px auto; margin: 10px auto;
position: relative; position: relative;
text-align: center;
width: 1100px; width: 1100px;
} }

35
css/rounds.scss
Unescape View File

@ -1,20 +1,24 @@
$roundH: 40px;
$roundW: 200px;
$tinyW: 50px;
$textW: 120px;
$iconM: 5px;
$iconW: $roundW - $tinyW - $textW - (2 * $iconM) - 2;
.rounds { .rounds {
background: rgba(240, 120, 10, 0.1);
bottom: 0; bottom: 0;
color: #000;
position: absolute; position: absolute;
right: 0; right: 0;
text-align: right; width: $roundW;
width: 200px;
z-index: 1; z-index: 1;
} }
.round-item { .round-item {
border: 1px solid #d5d5d5;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 0;
line-height: 34px; line-height: $roundH;
opacity: 0.2; opacity: 0.2;
padding: 0 10px;
} }
.round-item.active { .round-item.active {
@ -27,13 +31,24 @@
.round-text { .round-text {
display: inline-block; display: inline-block;
font-size: 13px;
width: $textW;
} }
.round-tiny { .round-tiny {
display: inline-block; display: inline-block;
font-size: 9px; font-size: 9px;
margin-left: 20px; line-height: $roundH;
text-align: right; text-align: center;
text-transform: uppercase; text-transform: uppercase;
width: 30px; vertical-align: top;
width: $tinyW;
}
.round-icon {
display: inline-block;
height: $iconW;
margin: ($roundH - $iconW) / 2 $iconM;
vertical-align: top;
width: $iconW;
} }

40
css/sort.scss
Unescape View File

@ -1,19 +1,25 @@
$sortH: 40px;
$sortW: 200px;
$tinyW: 50px;
$textW: 120px;
$iconM: 5px;
$iconW: $sortW - $tinyW - $textW - (2 * $iconM) - 2;
.sort { .sort {
background: rgba(10, 120, 240, 0.1);
position: absolute; position: absolute;
right: 0; right: 0;
text-align: right;
top: 0; top: 0;
width: 200px; width: $sortW;
z-index: 1; z-index: 1;
} }
.sort-item { .sort-item {
border: 1px solid brickred; border: 1px solid #d5d5d5;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 0;
line-height: 34px; line-height: $sortH;
padding: 0 10px; margin-bottom: 5px;
width: $sortW;
} }
.sort-item:hover { .sort-item:hover {
@ -26,13 +32,27 @@
.sort-text { .sort-text {
display: inline-block; display: inline-block;
font-size: 13px;
padding-left: 10px;
text-align: left;
vertical-align: top;
width: $textW;
} }
.sort-tiny { .sort-tiny {
display: inline-block; display: inline-block;
font-size: 9px; font-size: 9px;
margin-left: 20px; line-height: $sortH;
text-align: right; text-align: center;
text-transform: uppercase; text-transform: uppercase;
width: 30px; vertical-align: top;
width: $tinyW;
}
.sort-icon {
display: inline-block;
height: $iconW;
margin: ($sortH - $iconW) / 2 $iconM;
vertical-align: top;
width: $iconW;
} }

85
css/style.css
Unescape View File

@ -9,7 +9,6 @@ body {
height: 700px; height: 700px;
margin: 10px auto; margin: 10px auto;
position: relative; position: relative;
text-align: center;
width: 1100px; } width: 1100px; }
.events { .events {
bottom: 0; bottom: 0;
@ -26,6 +25,7 @@ body {
overflow: hidden; overflow: hidden;
padding: 4px; padding: 4px;
position: relative; position: relative;
text-align: center;
vertical-align: baseline; vertical-align: baseline;
width: 48px; } width: 48px; }
@ -36,9 +36,10 @@ body {
height: 30px; height: 30px;
left: 4px; left: 4px;
line-height: 30px; line-height: 30px;
opacity: 1;
position: absolute; position: absolute;
top: 4px; top: 4px;
transition: top 0.1s linear; transition: opacity 0.15s ease-in;
width: 40px; width: 40px;
z-index: 1; } z-index: 1; }
@ -47,26 +48,29 @@ body {
z-index: 0; } z-index: 0; }
.event-item:hover .event-year { .event-item:hover .event-year {
top: -30px; } opacity: 0; }
.tourney { .tourney {
background: rgba(10, 240, 120, 0.1);
left: 0; left: 0;
position: absolute; position: absolute;
top: 0; } top: 0; }
.tourney-flag { .tourney-link {
border: 1px solid #ddd; display: block;
font-size: 150px; } margin-bottom: 20px; }
.tourney-image {
width: 200px; }
.tourney-country { .tourney-country {
color: #777;
font-size: 20px; font-size: 20px;
font-style: italic; } line-height: 40px; }
.tourney-year { .tourney-year {
color: #777;
font-size: 40px; font-size: 40px;
font-style: italic; } line-height: 40px; }
.diagram { .diagram {
background: rgba(150, 100, 200, 0.1);
font-size: 10px; font-size: 10px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
@ -86,20 +90,19 @@ body {
fill-opacity: 1; fill-opacity: 1;
stroke-opacity: 1; } stroke-opacity: 1; }
.sort { .sort {
background: rgba(10, 120, 240, 0.1);
position: absolute; position: absolute;
right: 0; right: 0;
text-align: right;
top: 0; top: 0;
width: 200px; width: 200px;
z-index: 1; } z-index: 1; }
.sort-item { .sort-item {
border: 1px solid brickred; border: 1px solid #d5d5d5;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 0;
line-height: 34px; line-height: 40px;
padding: 0 10px; } margin-bottom: 5px;
width: 200px; }
.sort-item:hover { .sort-item:hover {
background: yellow; } background: yellow; }
@ -108,31 +111,41 @@ body {
background: red; } background: red; }
.sort-text { .sort-text {
display: inline-block; } display: inline-block;
font-size: 13px;
padding-left: 10px;
text-align: left;
vertical-align: top;
width: 120px; }
.sort-tiny { .sort-tiny {
display: inline-block; display: inline-block;
font-size: 9px; font-size: 9px;
margin-left: 20px; line-height: 40px;
text-align: right; text-align: center;
text-transform: uppercase; text-transform: uppercase;
width: 30px; } vertical-align: top;
width: 50px; }
.sort-icon {
display: inline-block;
height: 18px;
margin: 11px 5px;
vertical-align: top;
width: 18px; }
.rounds { .rounds {
background: rgba(240, 120, 10, 0.1);
bottom: 0; bottom: 0;
color: #000;
position: absolute; position: absolute;
right: 0; right: 0;
text-align: right;
width: 200px; width: 200px;
z-index: 1; } z-index: 1; }
.round-item { .round-item {
border: 1px solid #d5d5d5;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 0;
line-height: 34px; line-height: 40px;
opacity: 0.2; opacity: 0.2; }
padding: 0 10px; }
.round-item.active { .round-item.active {
opacity: 1; } opacity: 1; }
@ -141,12 +154,22 @@ body {
background: yellow; } background: yellow; }
.round-text { .round-text {
display: inline-block; } display: inline-block;
font-size: 13px;
width: 120px; }
.round-tiny { .round-tiny {
display: inline-block; display: inline-block;
font-size: 9px; font-size: 9px;
margin-left: 20px; line-height: 40px;
text-align: right; text-align: center;
text-transform: uppercase; text-transform: uppercase;
width: 30px; } vertical-align: top;
width: 50px; }
.round-icon {
display: inline-block;
height: 18px;
margin: 11px 5px;
vertical-align: top;
width: 18px; }

17
css/tourney.scss
Unescape View File

@ -1,21 +1,26 @@
.tourney { .tourney {
background: rgba(10, 240, 120, 0.1);
left: 0; left: 0;
position: absolute; position: absolute;
top: 0; top: 0;
} }
.tourney-flag { .tourney-link {
border: 1px solid #ddd; display: block;
font-size: 150px; margin-bottom: 20px;
}
.tourney-image {
width: 200px;
} }
.tourney-country { .tourney-country {
color: #777;
font-size: 20px; font-size: 20px;
font-style: italic; line-height: 40px;
} }
.tourney-year { .tourney-year {
color: #777;
font-size: 40px; font-size: 40px;
font-style: italic; line-height: 40px;
} }

15
index.html
Unescape View File

@ -11,12 +11,7 @@
<body> <body>
<div class="visualization"> <div class="visualization">
<div class="tourney"> <div class="tourney"></div>
<!-- <div class="tourney-flag flag-icon flag-icon-jp"></div> -->
<a href="https://en.wikipedia.org/wiki/2002_FIFA_World_Cup" target='blank'><img src="res/2002.jpg" alt="" style="width: 200px;" /></a>
<div class="tourney-country">Japan / South Korea</div>
<div class="tourney-year">2002</div>
</div>
<div class="events"></div> <div class="events"></div>
<div class="sort"></div> <div class="sort"></div>
<div class="rounds"></div> <div class="rounds"></div>
@ -48,7 +43,13 @@
update ribbon hover update ribbon hover
// STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME // STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
better layout: embiggen current event flag
color scheme pane
toggle sort icon
toggle round icon
image edit posters
fix SVG icons to be smaller and inline
better colors better colors
remove dependencies from Diagram remove dependencies from Diagram

104
js/bundle.js
Unescape View File

@ -65,12 +65,12 @@
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
__webpack_require__(5); __webpack_require__(5);
__webpack_require__(12); __webpack_require__(6);
__webpack_require__(7); __webpack_require__(7);
__webpack_require__(13);
__webpack_require__(8); __webpack_require__(8);
__webpack_require__(9); __webpack_require__(9);
__webpack_require__(10); __webpack_require__(10);
__webpack_require__(11);
var main = { var main = {
changeEvent: function changeEvent(e) { changeEvent: function changeEvent(e) {
@ -119,6 +119,7 @@
generateUI: function generateUI() { generateUI: function generateUI() {
var state = main.getState(); var state = main.getState();
_ui2.default.buildTourneyPane();
_ui2.default.buildEventsPane(main.changeEvent); _ui2.default.buildEventsPane(main.changeEvent);
_ui2.default.buildSortPane(main.changeSort); _ui2.default.buildSortPane(main.changeSort);
_ui2.default.buildRoundsPane(main.changeRound); _ui2.default.buildRoundsPane(main.changeRound);
@ -131,6 +132,7 @@
_diagram2.default.clear(); _diagram2.default.clear();
_diagram2.default.build(main.json, state.eventKey, state.sort, _ui2.default.SORT_TYPES, matrix); _diagram2.default.build(main.json, state.eventKey, state.sort, _ui2.default.SORT_TYPES, matrix);
_ui2.default.updateTourneyPane(state.eventKey);
_ui2.default.updateEventsPane(state.eventKey); _ui2.default.updateEventsPane(state.eventKey);
_ui2.default.updateSortPane(state.sort); _ui2.default.updateSortPane(state.sort);
_ui2.default.updateRoundsPane(state.rounds.split(','), main.json.rounds); _ui2.default.updateRoundsPane(state.rounds.split(','), main.json.rounds);
@ -567,6 +569,12 @@
}); });
var UI = { var UI = {
CLASSNAMES: { CLASSNAMES: {
TOURNEY: {
LINK: 'tourney-link',
IMAGE: 'tourney-image',
COUNTRY: 'tourney-country',
YEAR: 'tourney-year'
},
EVENT: { EVENT: {
ITEM: 'event-item', ITEM: 'event-item',
YEAR: 'event-year', YEAR: 'event-year',
@ -574,12 +582,14 @@
}, },
SORT: { SORT: {
ICON: 'sort-icon',
ITEM: 'sort-item', ITEM: 'sort-item',
TEXT: 'sort-text', TEXT: 'sort-text',
TINY: 'sort-tiny' TINY: 'sort-tiny'
}, },
ROUND: { ROUND: {
ICON: 'round-icon',
ITEM: 'round-item', ITEM: 'round-item',
TEXT: 'round-text', TEXT: 'round-text',
TINY: 'round-tiny' TINY: 'round-tiny'
@ -629,6 +639,39 @@
}); });
}, },
updateTourneyPane: function updateTourneyPane(eventKey) {
var 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"
};
var ek = tourneyList[eventKey] === undefined ? null : eventKey;
var 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: function updateEventsPane(eventKey) { updateEventsPane: function updateEventsPane(eventKey) {
var eventItems = document.querySelectorAll('.' + UI.CLASSNAMES.EVENT.ITEM); var eventItems = document.querySelectorAll('.' + UI.CLASSNAMES.EVENT.ITEM);
UI.clearActive(eventItems); UI.clearActive(eventItems);
@ -672,8 +715,32 @@
}); });
}, },
buildTourneyPane: function buildTourneyPane() {
var link = document.createElement('a');
var img = document.createElement('img');
var country = document.createElement('div');
var 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;
var tourneyPane = document.querySelector('.tourney');
link.appendChild(img);
tourneyPane.appendChild(link);
tourneyPane.appendChild(year);
tourneyPane.appendChild(country);
},
buildEventsPane: function buildEventsPane(onClick) { buildEventsPane: function buildEventsPane(onClick) {
var 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" }]; var eventsList = [{ 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" }];
var eventsDiv = document.querySelector('.events'); var eventsDiv = document.querySelector('.events');
@ -713,6 +780,7 @@
} }
sortList.forEach(function (sort) { sortList.forEach(function (sort) {
var icon = document.createElement('img');
var item = document.createElement('div'); var item = document.createElement('div');
var text = document.createElement('div'); var text = document.createElement('div');
var tiny = document.createElement('div'); var tiny = document.createElement('div');
@ -728,8 +796,13 @@
tiny.className = UI.CLASSNAMES.SORT.TINY; tiny.className = UI.CLASSNAMES.SORT.TINY;
tiny.innerHTML = 'sort'; tiny.innerHTML = 'sort';
icon.className = UI.CLASSNAMES.SORT.ICON;
icon.src = 'res/sort.svg';
item.appendChild(icon);
item.appendChild(text); item.appendChild(text);
item.appendChild(tiny); item.appendChild(tiny);
sortDiv.appendChild(item); sortDiv.appendChild(item);
}); });
}, },
@ -744,22 +817,29 @@
} }
roundsList.forEach(function (round) { roundsList.forEach(function (round) {
var icon = document.createElement('img');
var item = document.createElement('div'); var item = document.createElement('div');
var text = document.createElement('div');
var tiny = document.createElement('div');
item.className = UI.CLASSNAMES.ROUND.ITEM; item.className = UI.CLASSNAMES.ROUND.ITEM;
item.addEventListener('click', onClick); item.addEventListener('click', onClick);
item.setAttribute(UI.DATA.ROUND, round.value); item.setAttribute(UI.DATA.ROUND, round.value);
item.setAttribute(UI.DATA.ROOT, true); item.setAttribute(UI.DATA.ROOT, true);
var tiny = document.createElement('div');
tiny.className = UI.CLASSNAMES.ROUND.TINY; tiny.className = UI.CLASSNAMES.ROUND.TINY;
tiny.innerHTML = 'hide'; tiny.innerHTML = 'hide';
var text = document.createElement('div');
text.className = UI.CLASSNAMES.ROUND.TEXT; text.className = UI.CLASSNAMES.ROUND.TEXT;
text.innerHTML = 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(text);
item.appendChild(tiny); item.appendChild(tiny);
roundsDiv.appendChild(item); roundsDiv.appendChild(item);
}); });
}, },
@ -810,39 +890,37 @@
// removed by extract-text-webpack-plugin // removed by extract-text-webpack-plugin
/***/ }, /***/ },
/* 6 */, /* 6 */
/* 7 */
/***/ function(module, exports) { /***/ function(module, exports) {
// removed by extract-text-webpack-plugin // removed by extract-text-webpack-plugin
/***/ }, /***/ },
/* 8 */ /* 7 */
/***/ function(module, exports) { /***/ function(module, exports) {
// removed by extract-text-webpack-plugin // removed by extract-text-webpack-plugin
/***/ }, /***/ },
/* 9 */ /* 8 */
/***/ function(module, exports) { /***/ function(module, exports) {
// removed by extract-text-webpack-plugin // removed by extract-text-webpack-plugin
/***/ }, /***/ },
/* 10 */ /* 9 */
/***/ function(module, exports) { /***/ function(module, exports) {
// removed by extract-text-webpack-plugin // removed by extract-text-webpack-plugin
/***/ }, /***/ },
/* 11 */, /* 10 */
/* 12 */
/***/ function(module, exports) { /***/ function(module, exports) {
// removed by extract-text-webpack-plugin // removed by extract-text-webpack-plugin
/***/ }, /***/ },
/* 13 */ /* 11 */
/***/ function(module, exports) { /***/ function(module, exports) {
// removed by extract-text-webpack-plugin // removed by extract-text-webpack-plugin

2
js/index.js
Unescape View File

@ -58,6 +58,7 @@ const main = {
generateUI: () => { generateUI: () => {
const state = main.getState(); const state = main.getState();
UI.buildTourneyPane();
UI.buildEventsPane(main.changeEvent); UI.buildEventsPane(main.changeEvent);
UI.buildSortPane(main.changeSort); UI.buildSortPane(main.changeSort);
UI.buildRoundsPane(main.changeRound); UI.buildRoundsPane(main.changeRound);
@ -70,6 +71,7 @@ const main = {
Diagram.clear(); Diagram.clear();
Diagram.build(main.json, state.eventKey, state.sort, UI.SORT_TYPES, matrix); Diagram.build(main.json, state.eventKey, state.sort, UI.SORT_TYPES, matrix);
UI.updateTourneyPane(state.eventKey);
UI.updateEventsPane(state.eventKey); UI.updateEventsPane(state.eventKey);
UI.updateSortPane(state.sort); UI.updateSortPane(state.sort);
UI.updateRoundsPane(state.rounds.split(','), main.json.rounds); UI.updateRoundsPane(state.rounds.split(','), main.json.rounds);

120
js/ui.js
Unescape View File

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

49
res/check.svg
Unescape View File

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="32"
height="32"
viewBox="0 0 32 32.000001"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="check.svg"><metadata
id="metadata3448"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs3446" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1396"
inkscape:window-height="818"
id="namedview3444"
showgrid="false"
inkscape:zoom="3.5399957"
inkscape:cx="83.2031"
inkscape:cy="39.7515"
inkscape:window-x="9"
inkscape:window-y="6"
inkscape:window-maximized="0"
inkscape:current-layer="Capa_1" /><g
id="g3440"
transform="matrix(0.05625004,0,0,0.06299995,0.99999871,-0.79997617)"><path
d="m 450,58.333 -250,250 L 83.333,191.667 0,275 200,475 533.333,141.667 450,58.333 Z"
id="path3442"
inkscape:connector-curvature="0" /></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

57
res/sort.svg
Unescape View File

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="32"
height="32"
viewBox="0 0 32.000001 32.000001"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="sort.svg"><metadata
id="metadata3425"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
id="defs3423" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1439"
inkscape:window-height="848"
id="namedview3421"
showgrid="false"
inkscape:zoom="11.313708"
inkscape:cx="20.100295"
inkscape:cy="16.702877"
inkscape:window-x="2"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="g3415" /><g
id="g3415"
transform="matrix(0.05396372,0,0,0.05826317,-1.4326e-7,-1.2747386)"><g
id="g4315"
transform="matrix(1.1072187,0,0,0.99999937,-12.959153,-2.2752505)"><path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="rect4248"
d="m 547.27246,499.0629 -173.15325,28.27856 -30.6874,-161.194"
style="fill:#000000;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
inkscape:connector-curvature="0"
id="path4279"
d="M 437.90432,126.42218 A 259.43357,240.28901 0 0 0 72.406017,156.03942 259.43357,240.28901 0 0 0 104.38298,494.56631 l 47.64592,-52.59203 a 185.30968,171.635 0 0 1 -22.84069,-241.80491 185.30968,171.635 0 0 1 261.07022,-21.15519 185.30968,171.635 0 0 1 22.84069,241.80491 l 56.78217,44.12996 A 259.43357,240.28901 0 0 0 437.90432,126.42218 Z"
style="fill:#000000;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

Write Preview
Loading…
Cancel
Save