Skip to content

Commit

Permalink
Merge branch 'master' into a11y-search-improvement
Browse files Browse the repository at this point in the history
  • Loading branch information
@fymmot
fymmot authored Jan 28, 2024
2 parents d193d5b + 5fd4a57 commit bdda1cf
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 82 deletions.
26 changes: 16 additions & 10 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/assets/data/world-50m.json
View file

Large diffs are not rendered by default.

101 changes: 86 additions & 15 deletions src/assets/js/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,10 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
})
.style("fill", function() {
return color(0);
})
.style("transform-origin", function (d) {
const center = getCountryCenter(d);
return `${-center.x}px ${-center.y}px`;
});
}
//Color countries
Expand Down Expand Up @@ -416,7 +420,6 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
/*-------redraw----*/
//den kallas varje gång datan uppdateras. redrawMap är en boolean
function redraw(redrawMap) {
console.log("redrawing 2");
updateDimensions();

if (redrawMap) {
Expand Down Expand Up @@ -1028,6 +1031,45 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
move([pt[0] + x * k, pt[1] + y * k], k, !prefersReducedMotion);

}
function getCountryCenter(countryTopoData) {
let x, y;
let b = path.bounds(countryTopoData);

//Special rules for special countries:
switch (countryTopoData.id) {
case 840: //US
x = -(b[1][0] + b[0][0]) / 4;
y = -(b[1][1] + b[0][1]) / 1.9;
break;
case 250: //France
x = -(b[1][0] + b[0][0]) / 1.94;
y = -(b[1][1] + b[0][1]) / 2.81;
break;
case 528: //Netherlands
x = -(b[1][0] + b[0][0]) / 1.605;
y = -(b[1][1] + b[0][1]) / 2.54;
break;
case 643: //Russia
x = -(b[1][0] + b[0][0]) / 1.40;
y = -(b[1][1] + b[0][1]) / 2;
break;
case 554: //New Zeeland
x = -(b[1][0] + b[0][0]) / 1.03;
y = -(b[1][1] + b[0][1]) / 1.87;
break;
case 36: //Australia
x = -(b[1][0] + b[0][0]) / 2;
y = -(b[1][1] + b[0][1]) / 2.1;
break;

default: //Everybody else
x = -(b[1][0] + b[0][0]) / 2;
y = -(b[1][1] + b[0][1]) / 2;
break;
}

return { x, y };
}

// Close the country div on escape
window.addEventListener('keydown', function(evt) {
Expand Down Expand Up @@ -1063,27 +1105,56 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)

}

/** "PUBLUC" FUNCTIONS **/
map.putCountryCount = function(object) {
countryCount = JSON.parse(JSON.stringify(object));
countryScore = 0;
var countryList = [];

// Extract info for the current user
d3.keys(countryCount).forEach(function(id) {
if (countryCount[id][SESSION.name]) {
countryCount[id] = countryCount[id][SESSION.name];
countryScore = countryScore + 1;
countryList.push(+id)
} else {
// delete countryCount[id];
function animateCountries(countryDict) {
const userPrefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var countries = g.selectAll(".country").filter(c => !!countryDict[c.id]);

setTimeout(() => {
// bounce - didn't look too good but might be fun to try again
// later

// countries.transition()
// .duration(200)
// .style("transform", "scale(1.1)")
// .delay((_, i) => i * 100)
// .transition().duration(150)
// .style("transform", "scale(1)");

// fade
// Only do the bing bong thing if the user doesn't prefer reduced motion
if (!userPrefersReducedMotion) {
countries.transition()
.duration(200)
.style("opacity", "0.8")
.delay((_, i) => i * 100)
.transition().duration(150)
.style("opacity", "1");
}

})
}

function putCountryCount(newArtists) {
Object.entries(newArtists).forEach(([key, value]) => {
countryCount[key] = (countryCount[key] || []).concat(value);
});

countryScore = 0;

d3.keys(countryCount).forEach(function (id) {
countryScore = countryScore + 1;
})

if (topo) redraw();

window.countryScore = countryScore;
}

/** "PUBLUC" FUNCTIONS **/

map.addArtists = function (newArtistsByCountry) {
putCountryCount(newArtistsByCountry);
animateCountries(newArtistsByCountry);
}

map.makeSummaryDiv = makeSummaryDiv;
Expand Down
99 changes: 43 additions & 56 deletions src/assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,61 +145,44 @@ var countryCountObj = {};
// var n = count++;

// Get country for all artists
api.getCountries(artistNames,
function (data) {
// Count plays for each country?
// countryCountList = countryCountList.concat(data);
var dataObj = d3.nest() //Gör så att man kan slå upp på land-id och få upp en lista på artister.
.key(function (d) {
return d.id;
})
.rollup(function (leaves) { //gör så att man får en lista på alla artister för ett land.
return leaves;
})
.map(data); //Skickar in en lista med ett objekt för varje artist.

d3.keys(dataObj).forEach(function (id) {
countryCountObj[id] = countryCountObj[id] || {};
countryCountObj[id][user] = countryCountObj[id][user] || [];
var artistList = countryCountObj[id][user]; // list of artists for a country

// if (artistList) {
artistList = artistList.concat(dataObj[id]);

//Lägger på de nya dataObj-elementen i countryCountObj-listan.
// } else {
// artistList = dataObj[id];
// }

artistList.forEach(function (el, i) {
//Här lägger vi till ett fält image med artistens bild-url som ett fält till det "inre" objektet.
artistList[i].url = STORED_ARTISTS[el.artist].url;
artistList[i].playcount = STORED_ARTISTS[el.artist].playcount;
// if (artistList[i].users) {
// artistList[i].users.push(user);
// } else {
// artistList[i].users = [user];
// }
});
//countryCountObj är en lista med "country"-objekt.
//Varje country-objekt innehåller en lista med "inre" objekt med artistnamn, lands-id och landsnamn.
//dataObj är typ samma som countryCountObj, fast är bara för de tillfälligt sparade artisterna (intervallet).
countryCountObj[id][user] = artistList;
})

addArtistsWithNoCountry(data.filter(function (artist) {
return !artist.id; // && artist.artist && artist.url;
}));

map.putCountryCount(countryCountObj);

if (currPage > maxPage) {
end();
return;
} else {
getAllArtists();
}
});
api.getCountries(artistNames, function (data) {
//Gör så att man kan slå upp på land-id och få upp en lista på artister.
var newArtistCountries = d3.nest().key((d) => d.id)
// gör så att man får en lista på alla artister för ett land.
.rollup((leaves) => leaves)
// Skickar in en lista med ett objekt för varje artist.
.map(data);

d3.keys(newArtistCountries).forEach(function (id) {
countryCountObj[id] = countryCountObj[id] || {};
countryCountObj[id][user] = countryCountObj[id][user] || [];

var artistsFromCountry = countryCountObj[id][user];

artistsFromCountry = artistsFromCountry.concat(newArtistCountries[id]);

artistsFromCountry.forEach(function (el, i) {
//Här lägger vi till ett fält image med artistens bild-url som ett fält till det "inre" objektet.
artistsFromCountry[i].url = STORED_ARTISTS[el.artist].url;
artistsFromCountry[i].playcount = STORED_ARTISTS[el.artist].playcount;
});
// countryCountObj är en lista med "country"-objekt.
// Varje country-objekt innehåller en lista med "inre" objekt med artistnamn, lands-id och landsnamn.
// dataObj är typ samma som countryCountObj, fast är bara för de tillfälligt sparade artisterna (intervallet).
countryCountObj[id][user] = artistsFromCountry;
})

addArtistsWithNoCountry(data.filter((artist) => !artist.id));

map.addArtists(newArtistCountries);

if (currPage > maxPage) {
end();
return;
} else {
getAllArtists();
}
});
});
}

Expand Down Expand Up @@ -417,7 +400,11 @@ var countryCountObj = {};
});

setTimeout(function () {
map.putCountryCount(countryCountObj);
map.addArtists(
Object.keys(countryCountObj).reduce((acc, countryId) => ({
...acc,
[countryId]: countryCountObj[countryId][SESSION.name]
}), {}));
end();
}, 1000)
} else {
Expand Down
8 changes: 8 additions & 0 deletions src/assets/scss/components/_loader.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,14 @@ body.black-theme .loader {
-o-animation: bubblingG 1.3s infinite alternate;
border-radius: 67px;
animation: bubblingG 1.3s infinite alternate;
/* No animation when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
-moz-animation: none;
-webkit-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
}
}

Expand Down

0 comments on commit bdda1cf

Please sign in to comment.