From c2cebbe5a35b2f6c6bed45f23dab5aa5c4c1d4e4 Mon Sep 17 00:00:00 2001 From: Ben Burlingham Date: Sat, 5 Nov 2016 18:10:44 -0700 Subject: [PATCH] Round persistence complete. --- index.html | 1 + js/main.js | 53 +++++++++++------------------ js/ui.js | 90 ++++++++++++++++++++++++++++++-------------------- res/rounds.css | 5 +++ 4 files changed, 80 insertions(+), 69 deletions(-) diff --git a/index.html b/index.html index 6354310..00e3b52 100644 --- a/index.html +++ b/index.html @@ -72,6 +72,7 @@ body {
TODO
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 diff --git a/js/main.js b/js/main.js index d523454..a239dc7 100644 --- a/js/main.js +++ b/js/main.js @@ -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); diff --git a/js/ui.js b/js/ui.js index 843fff3..24613c8 100644 --- a/js/ui.js +++ b/js/ui.js @@ -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}`); diff --git a/res/rounds.css b/res/rounds.css index a46f29f..85e7e88 100644 --- a/res/rounds.css +++ b/res/rounds.css @@ -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; }