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

Round persistence complete.

Browse Source
master
Ben Burlingham 9 years ago
parent a1dec26fc5
commit c2cebbe5a3
4 changed files with 80 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      index.html
  2. 53
      js/main.js
  3. 90
      js/ui.js
  4. 5
      res/rounds.css

1
index.html
Unescape View File

@ -72,6 +72,7 @@ body {
<h5>TODO</h5>
fix setState to not remove everything
fix jumping when show/hide round
1974 two germanies?
embiggen current event flag
move styling out of index.html

53
js/main.js
Unescape View File

@ -10,44 +10,28 @@ const fetch = (url) => new Promise((resolve, reject) => {
});
const main = {
SORT_TYPES: {
GOALS: 'goals',
COUNTRY: 'country',
POPULATION: 'population',
},
ROUND_TYPES: {
PRELIM: 'prelims',
ROUNDOF16: 'round-of-16',
QUARTERFINAL: 'quarterfinals',
SEMIFINAL: 'semifinals',
CONSOLATION: 'consolation',
FINAL: 'finals',
},
changeEvent: (e) => {
const target = UI.findRoot(e.target);
main.setState({ eventKey: target.getAttribute(UI.DATA.EVENT) });
main.updateUI();
},
changeSort: (e) => {
const target = UI.findRoot(e.target);
main.setState({ sort: target.getAttribute(UI.DATA.SORT) });
main.updateUI();
},
changeRound: (e) => {
const state = main.getState();
const target = UI.findRoot(e.target);
const rounds = state.rounds ? state.rounds.split(',') : [];
const r = target.getAttribute(UI.DATA.ROUND)
const i = rounds.indexOf(r);
(i === -1) ? rounds.push(r) : rounds.splice(i, 1);
UI.toggleRoundRibbons(rounds, main.ROUND_TYPES, main.json.rounds);
UI.toggleRoundItem(target);
main.setState({ rounds });
},
const state = main.getState();
const roundsToShow = state.rounds ? state.rounds.split(',') : [];
const i = roundsToShow.indexOf(r);
(i === -1) ? roundsToShow.push(r) : roundsToShow.splice(i, 1);
changeSort: (e) => {
const target = UI.findRoot(e.target);
main.setState({ sort: target.getAttribute(UI.DATA.SORT) });
main.setState({ rounds: roundsToShow });
main.updateUI();
},
@ -73,19 +57,20 @@ const main = {
const state = main.getState();
UI.buildEventsPane(main.changeEvent);
UI.buildSortPane(main.changeSort, main.SORT_TYPES);
UI.buildRoundsPane(main.changeRound, main.ROUND_TYPES);
UI.buildSortPane(main.changeSort);
UI.buildRoundsPane(main.changeRound);
},
updateUI: () => {
const state = main.getState();
UI.updateEventsPane(state.eventKey);
UI.updateSortPane(state.sort);
const matrix = Matrices.buildMatrix(main.json, state.eventKey);
Diagram.clear();
Diagram.build(main.json, state.eventKey, state.sort, main.SORT_TYPES, matrix);
Diagram.build(main.json, state.eventKey, state.sort, UI.SORT_TYPES, matrix);
UI.updateEventsPane(state.eventKey);
UI.updateSortPane(state.sort);
UI.updateRoundsPane(state.rounds.split(','), main.json.rounds);
},
initJSON: (strData) => {
@ -118,7 +103,7 @@ const main = {
}
if (state.rounds === undefined) {
state.rounds = Object.values(main.ROUND_TYPES);
state.rounds = Object.values(UI.ROUND_TYPES);
}
main.setState(state);

90
js/ui.js
Unescape View File

@ -19,6 +19,21 @@ const UI = {
},
},
SORT_TYPES: {
GOALS: 'goals',
COUNTRY: 'country',
POPULATION: 'population',
},
ROUND_TYPES: {
PRELIM: 'prelims',
ROUNDOF16: 'round-of-16',
QUARTERFINAL: 'quarterfinals',
SEMIFINAL: 'semifinals',
CONSOLATION: 'consolation',
FINAL: 'finals',
},
DATA: {
ROOT: 'data-root',
EVENT: 'data-event-key',
@ -47,16 +62,33 @@ const UI = {
});
},
toggleRoundItem: (target) => {
const hide = target.querySelector(`.${UI.CLASSNAMES.ROUND.HIDE}`);
hide.innerHTML = (hide.innerHTML === UI.I18N.HIDE ? UI.I18N.SHOW : UI.I18N.HIDE);
updateEventsPane: (eventKey) => {
const eventItems = document.querySelectorAll(`.${UI.CLASSNAMES.EVENT.ITEM}`);
UI.clearActive(eventItems);
const activeEventNode = document.querySelector(`[${UI.DATA.EVENT}="${eventKey}"`);
activeEventNode.className += ' active';
},
toggleRoundRibbons: (roundsToShow, ROUND_TYPES, allRounds) => {
updateRoundsPane: (roundsToShow, allRounds) => {
const roundsItems = document.querySelectorAll(`.${UI.CLASSNAMES.ROUND.ITEM}`);
UI.clearActive(roundsItems);
roundsItems.forEach(item => {
const type = item.getAttribute(UI.DATA.ROUND);
const hide = item.querySelector(`.${UI.CLASSNAMES.ROUND.HIDE}`);
hide.innerHTML = (hide.innerHTML === UI.I18N.HIDE ? UI.I18N.SHOW : UI.I18N.HIDE);
if (roundsToShow.indexOf(type) > -1) {
item.className += ' active';
}
});
const ribbons = document.querySelectorAll('.ribbon');
ribbons.forEach(ribbon => {
const name = allRounds[ribbon.getAttribute("data-round-id")];
const type = UI.getRoundType(name, ROUND_TYPES);
const type = UI.getRoundType(name);
roundsToShow.indexOf(type) === -1
? ribbon.style.display = 'none'
@ -64,18 +96,6 @@ const UI = {
});
},
updateEventsPane: (eventKey) => {
const eventItems = document.querySelectorAll(`.${UI.CLASSNAMES.EVENT.ITEM}`);
UI.clearActive(eventItems);
const activeEventNode = document.querySelector(`[${UI.DATA.EVENT}="${eventKey}"`);
activeEventNode.className += ' active';
},
updateRoundsPane: (rounds) => {
const roundsDiv = document.querySelector('.rounds');
},
updateSortPane: (sort) => {
const sortItems = document.querySelectorAll('.sort-item');
UI.clearActive(sortItems);
@ -146,12 +166,12 @@ const UI = {
});
},
buildSortPane: (onClick, SORT_TYPES) => {
buildSortPane: (onClick) => {
const sortList = [
{ text: 'Order by continent', value: null },
{ text: 'Order by goals scored', value: SORT_TYPES.GOALS },
{ text: 'Order by country name', value: SORT_TYPES.COUNTRY },
{ text: 'Order by country population', value: SORT_TYPES.POPULATION },
{ text: 'Order by goals scored', value: UI.SORT_TYPES.GOALS },
{ text: 'Order by country name', value: UI.SORT_TYPES.COUNTRY },
{ text: 'Order by country population', value: UI.SORT_TYPES.POPULATION },
];
const sortDiv = document.querySelector('.sort');
@ -177,14 +197,14 @@ const UI = {
});
},
buildRoundsPane: (onClick, ROUND_TYPES) => {
buildRoundsPane: (onClick) => {
const roundsList = [
{ text: 'Preliminaries', value: ROUND_TYPES.PRELIM },
{ text: 'Round of 16', value: ROUND_TYPES.ROUNDOF16 },
{ text: 'Quarterfinals', value: ROUND_TYPES.QUARTERFINAL },
{ text: 'Semifinals', value: ROUND_TYPES.SEMIFINAL },
{ text: 'Consolation', value: ROUND_TYPES.CONSOLATION },
{ text: 'Final', value: ROUND_TYPES.FINAL },
{ text: 'Preliminaries', value: UI.ROUND_TYPES.PRELIM },
{ text: 'Round of 16', value: UI.ROUND_TYPES.ROUNDOF16 },
{ text: 'Quarterfinals', value: UI.ROUND_TYPES.QUARTERFINAL },
{ text: 'Semifinals', value: UI.ROUND_TYPES.SEMIFINAL },
{ text: 'Consolation', value: UI.ROUND_TYPES.CONSOLATION },
{ text: 'Final', value: UI.ROUND_TYPES.FINAL },
];
const roundsDiv = document.querySelector('.rounds');
@ -214,7 +234,7 @@ const UI = {
});
},
getRoundType: (name, ROUND_TYPES) => {
getRoundType: (name) => {
const name2 = name.match(/^Matchday/) ? 'First round' : name;
switch (name2) {
@ -225,25 +245,25 @@ const UI = {
case 'Group-2 Play-off':
case 'Group-3 Play-off':
case 'Group-4 Play-off':
return ROUND_TYPES.PRELIM;
return UI.ROUND_TYPES.PRELIM;
case 'Round of 16':
return ROUND_TYPES.ROUNDOF16;
return UI.ROUND_TYPES.ROUNDOF16;
case 'Third place match':
case 'Third-place match':
case 'Match for third place':
case 'Third place play-off':
case 'Third-place play-off':
return ROUND_TYPES.CONSOLATION;
return UI.ROUND_TYPES.CONSOLATION;
case 'Quarterfinals':
case 'Quarter-finals':
case 'Quarter-finals replays':
return ROUND_TYPES.QUARTERFINAL;
return UI.ROUND_TYPES.QUARTERFINAL;
case 'Semifinals':
case 'Semi-finals':
return ROUND_TYPES.SEMIFINAL;
return UI.ROUND_TYPES.SEMIFINAL;
case 'Final':
case 'Finals':
return ROUND_TYPES.FINAL;
return UI.ROUND_TYPES.FINAL;
}
console.error(`Unknown round name: ${name}`);

5
res/rounds.css
Unescape View File

@ -12,9 +12,14 @@
cursor: pointer;
font-size: 13px;
line-height: 34px;
opacity: 0.2;
padding: 0 10px;
}
.round-item.active {
opacity: 1;
}
.round-item:hover {
background: yellow;
}

Write Preview
Loading…
Cancel
Save