Skip to content

Change total number of countries to 209 #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fymmot wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Change total number of countries to 209 #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
133abe0
WAI-ARIA meter semantics for country counter
fymmot Jan 29, 2024
873fde1
change number of countries to 209 fixes #22
fymmot Jan 29, 2024
db7aa68
Merge branch 'master' into country-progress-fix
fymmot Jan 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions src/assets/js/map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)


function updateProgressBar() {
var progressPro = (countryScore / 210);
var progressPro = (countryScore / 209);
return progressPro;
}
;
Expand Down Expand Up @@ -323,15 +323,22 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
"background-color": colorArray[1],
"border-color": colorArray[6]
})
//Show progressbar text on mouse-over
.attr("aria-valuenow", updateProgressBar() * 100)
//Show progressbar text on mouse-over and focus
.on("mousemove", function() {
d3.select("#progress-text")
.transition().duration(prefersReducedMotion ? 0 : 150).style("opacity", 0.9);
})
.on("mouseout", function() {
d3.select("#progress-text").transition().duration(prefersReducedMotion ? 0 : 150).style("opacity", 0);
})
.on("focus", () => {
d3.select("#progress-text").transition().duration(prefersReducedMotion ? 0 : 150).style("opacity", 0.9);
})
.on("blur", () => {
d3.select("#progress-text").transition().duration(prefersReducedMotion ? 0 : 150).style("opacity", 0);
});
d3.select("#progress-text").html("Scrobbled from " + countryScore + "/210 countries").attr("aria-hidden", "true");
d3.select("#progress-text").html("Scrobbled from " + countryScore + "/209 countries").attr("aria-hidden", "true");

//Draw countries
if (redrawMap) {
Expand Down
2 changes: 1 addition & 1 deletion src/assets/js/screenshot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ var screenshot = {};
ctx.save(); // To draw with different opaticy
ctx.globalAlpha = 0.6;
ctx.fillStyle = backgroundColor;
let scoreString = SESSION.total_artists + " artists from " + countryScore + " / 210 countries";
let scoreString = SESSION.total_artists + " artists from " + countryScore + " / 209 countries";
let titleString = SESSION.name + "'s musical world map";
ctx.font = "34px Patua One";
ctx.fillRect(w / 2 - ctx.measureText(titleString).width / 2 - 20, h - 110, ctx.measureText(titleString).width + 40, 100);
Expand Down
4 changes: 2 additions & 2 deletions src/assets/scss/pages/_map.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,11 @@ $controls-padding: 20px;
// 3 * (buttonheight + padding) :^)
top: 3 * (48px+4px) + $controls-padding + 10px;
width: 10px;
bottom: $controls-padding;
bottom: 100px;
right: 32px;
box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, 0.39);
border: 0.1em solid;
z-index: 0;
z-index: 2;
border-radius: 50px;
}

Expand Down
72 changes: 38 additions & 34 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,44 +178,48 @@ <h2>Did you find an accessibility bug or something that didn't work quite right?
<div id="loading-text" class="no-select"></div>
</div>

<div id="controls" role="group" aria-label="Explr.fm controls">
<div class="button-group" >
<div role="search" style="display: flex; align-items: center; gap: 4px;">
<button aria-labelledby="search-button-label" type="button" aria-expanded="false" id="search-button" class="change-button on-map-view no-select" aria-haspopup="true">
<img src="assets/img/search.png" alt="" width="28" height="28">
<div>
<div id="controls" role="group" aria-label="Explr.fm controls">
<div class="button-group" >
<div role="search" style="display: flex; align-items: center; gap: 4px;">
<button aria-labelledby="search-button-label" type="button" aria-expanded="false" id="search-button" class="change-button on-map-view no-select" aria-haspopup="true">
<img src="assets/img/search.png" alt="" width="28" height="28">
</button>
<label aria-hidden="true" class="button-group__label" for="search-button" id="search-button-label">Search (ctrl + f)</label>
</div>
<button aria-labelledby="change-theme-button-label" type="button" id="change-theme-button" class="change-button on-map-view no-select"
onClick="nextTheme();ga('send', 'event', 'Buttons', 'Cycle theme', 'test');">
<img src="assets/img/glyphicons_009_magic.png" alt="" width="32" height="32">
</button>
<label aria-hidden="true" id="change-theme-button-label" class="button-group__label" for="change-theme-button">Change theme (t)</label>
</div>

<div class="button-group">
<button aria-labelledby="clear-cache-button-label" type="button" id="clear-cache-button" class="change-button on-map-view no-select"
onClick="clearExplrCache().then(()=>window.location.reload())">
<img src="assets/img/refresh.png" alt="" width="28" height="28">
</button>
<label aria-hidden="true" id="clear-cache-button-label" class="button-group__label" for="clear-cache-button">Clear cached artists</label>
<button aria-labelledby="change-user-button-label" type="button" class="change-button on-map-view no-select" id="change-user-button" onclick="window.location.href='./'">
<img src="assets/img/remove-user.png" alt="" width="32" height="32">
</button>
<label class="button-group__label" for="search-button" id="search-button-label">Search (ctrl + f)</label>
<label aria-hidden="true" class="button-group__label" id="change-user-button-label" for="change-user-button">Change user</label>
</div>
<button aria-labelledby="change-theme-button-label" type="button" id="change-theme-button" class="change-button on-map-view no-select"
onClick="nextTheme();ga('send', 'event', 'Buttons', 'Cycle theme', 'test');">
<img src="assets/img/glyphicons_009_magic.png" alt="" width="32" height="32">
</button>
<label id="change-theme-button-label" class="button-group__label" for="change-theme-button">Change theme (t)</label>
<div class="button-group">
<button aria-labelledby="export-button-label" type="button" id="export-button" class="change-button on-map-view no-select" onClick="utils.exportToCSV(countryCountObj)">
<img src="assets/img/file-export-solid.png" alt="" width="30" height="30" style="padding: 5px 0 0 5px;">
</button>
<label aria-hidden="true" id="export-button-label" for="export-button" class="button-group__label">Export data (e)</label>
<button aria-labelledby="snapshot-button-label" type="button" id="snapshot-button" class="change-button on-map-view no-select"
onClick="screenshot.render();ga('send', 'event', 'Buttons', 'Take screenshot', 'test');">
<img src="assets/img/snapshot.png" alt="" width="32" height="32">
</button>
<label aria-hidden="true" id="snapshot-button-label" for="snapshot-button" class="button-group__label">Take snapshot (s)</label>
</div>

</div>

<div class="button-group">
<button aria-labelledby="clear-cache-button-label" type="button" id="clear-cache-button" class="change-button on-map-view no-select"
onClick="clearExplrCache().then(()=>window.location.reload())">
<img src="assets/img/refresh.png" alt="" width="28" height="28">
</button>
<label id="clear-cache-button-label" class="button-group__label" for="clear-cache-button">Clear cached artists</label>
<button aria-labelledby="change-user-button-label" type="button" class="change-button on-map-view no-select" id="change-user-button" onclick="window.location.href='./'">
<img src="assets/img/remove-user.png" alt="" width="32" height="32">
</button>
<label class="button-group__label" id="change-user-button-label" for="change-user-button">Change user</label>
</div>
<div class="button-group">
<button aria-labelledby="export-button-label" type="button" id="export-button" class="change-button on-map-view no-select" onClick="utils.exportToCSV(countryCountObj)">
<img src="assets/img/file-export-solid.png" alt="" width="30" height="30" style="padding: 5px 0 0 5px;">
</button>
<label id="export-button-label" for="export-button" class="button-group__label">Export data (e)</label>
<button aria-labelledby="snapshot-button-label" type="button" id="snapshot-button" class="change-button on-map-view no-select"
onClick="screenshot.render();ga('send', 'event', 'Buttons', 'Take screenshot', 'test');">
<img src="assets/img/snapshot.png" alt="" width="32" height="32">
</button>
<label id="snapshot-button-label" for="snapshot-button" class="button-group__label">Take snapshot (s)</label>
</div>
<div id="countryCount" class="progress on-map-view full-opacity no-select">
<div id="countryCount" tabindex="0" class="progress on-map-view full-opacity no-select" role="meter" aria-valuemin="0" aria-valuemax="100" aria-label="Scrobbled countries" aria-describedby="progress-text">
<div id="progress-bar">
<span id="progress-text"></span><!-- class="hidden" -->
</div>
Expand Down