Commit 7f50f6dc authored by Michał Woźniak's avatar Michał Woźniak
Browse files

bugfix for handling hash changes; work on menu buttons

parent aec620c6
......@@ -1584,9 +1584,18 @@ document.addEventListener('DOMContentLoaded', (e)=>{
}
})
})
// when the user clicks on the date picker, we can assume they want to do a start-on-a-date chart
document.querySelector('input[type=date][name=chart-start-date]').addEventListener('click', (e)=>{
e.target.parentElement.click()
})
//
/*document.getElementById('site-menu-button-rate').addEventListener('click', (e)=>{
document.getElementById('menu-shown').checked = false;
})*/
document.getElementById('site-menu-button-reset').addEventListener('click', (e)=>{
window.location.hash = ''
document.getElementById('menu-shown').checked = false;
})
// fill out the covid data box
getCovidData()
......@@ -1637,8 +1646,17 @@ document.addEventListener('DOMContentLoaded', (e)=>{
if (theChart.data.datasets[theChart.data.datasets.length - 1].label === sitesSelects[sitesSelects.length - 1].value) {
theChart.data.datasets.pop()
}
// remove the site data container
sitesSelects[sitesSelects.length - 1].parentElement.parentElement.remove()
// if we have more than one site available
if (sitesSelects.length > 1) {
// remove the site data container
sitesSelects[sitesSelects.length - 1].parentElement.parentElement.remove()
// ok, this is the last site, so we don't actually want to remove the whole thing
} else {
// instead, we want to clear it
sitesSelects[0].parentElement.parentElement.getElementsByClassName('site-data')[0].innerHTML=""
sitesSelects[0].value = "select one"
}
// using History.pushState() because we don't want the onhashchange event to fire
history.pushState({}, '', window.location.hash.replace(/,[^,]+$/, ''))
updateChartSettings()
......@@ -1648,21 +1666,29 @@ document.addEventListener('DOMContentLoaded', (e)=>{
// handling manual hash change
window.addEventListener("hashchange", (e)=>{
console.log(`+-- manual hash change! '${window.location.hash}'`)
console.log(` got hash: ${window.location.hash}`)
hash_sites = window
.location
.hash
.substr(1) // remove the '#'
.split(',') // split by ',' in case we have a number of sites to handle
.reduce((acc, el)=>{ // filter out empty strings
if (el) {
acc.push(el);
}
return acc;
}, [])
// any site data containers to be removed?
console.log(` +-- removing ${sitesSelects.length - hash_sites.length} sites...`)
var cur_site_count = sitesSelects.length
for (var i=hash_sites.length; i<cur_site_count; i++) {
console.log(` i: ${i}`)
removeSite.dispatchEvent(new Event('click'))
}
// do we have any hash to work with?
if (window.location.hash) {
console.log(` got hash: ${window.location.hash}`)
hash_sites = window
.location
.hash
.substr(1) // remove the '#'
.split(',') // split by ',' in case we have a number of sites to handle
// any site data containers to be removed?
console.log(` +-- removing ${sitesSelects.length - hash_sites.length} sites...`)
var cur_site_count = sitesSelects.length
for (var i=hash_sites.length; i<cur_site_count; i++) {
console.log(` i: ${i}`)
removeSite.dispatchEvent(new Event('click'))
}
// handle each hash site separately, adding site data containers if need be
hash_sites.forEach((hash_site, index)=>{
......
......@@ -376,10 +376,10 @@
<label id="site-menu-control" for="menu-shown"></label>
<div class="site-menu-container">
<p>Show 6 sites with:</p>
<input type="button" id="site-menu-button-highest-rate" value="largest growth rate"/>
<input type="button" id="site-menu-button-highest-percentage" value="highest percentage of population infected"/>
<input type="button" id="site-menu-button-most-deaths" value="most deaths"/>
<input type="button" id="site-menu-button-most-deaths" value="greatest drop of number of active cases"/>
<input type="button" id="site-menu-button-rate" value="largest growth rate"/>
<input type="button" id="site-menu-button-percentage" value="highest percentage of population infected"/>
<input type="button" id="site-menu-button-deaths" value="most deaths"/>
<input type="button" id="site-menu-button-active-drop" value="greatest drop of number of active cases"/>
<div class="spacer"></div>
<input type="button" id="site-menu-button-reset" value="Reset all"/>
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment