Add support for reduced-motion to new bing-bong feature and to the lo…

…ader
mold · Jan 27, 2024 · 013c80a · 013c80a
1 parent a9bca3b
commit 013c80a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/assets/js/map.js b/src/assets/js/map.js
@@ -417,7 +417,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) {
@@ -1159,6 +1158,7 @@ function getCountryCenter(countryTopoData) {
   }
 
   function animateCountries(countryDict) {
+    const userPrefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     var countries = g.selectAll(".country").filter(c => !!countryDict[c.id]);
 
     setTimeout(() => {
@@ -1173,12 +1173,16 @@ function getCountryCenter(countryTopoData) {
       // .style("transform", "scale(1)");
 
       // fade
-      countries.transition()
+      // 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");
+      }
+
     })
   }
 

diff --git a/src/assets/scss/components/_loader.scss b/src/assets/scss/components/_loader.scss
@@ -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;
+        }
     }
 }