From e0a6418e91f7d8a14935a19412ae47cdddb0f25c Mon Sep 17 00:00:00 2001 From: David Date: Thu, 20 Jul 2023 16:14:36 -0700 Subject: [PATCH 1/3] Add prefers-reduced-motion support --- src/components/still-image/still-image.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index 480de9fa..bed4c314 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -12,12 +12,16 @@ const StillImage = { data () { return { stopGifs: this.$store.getters.mergedConfig.stopGifs, - isAnimated: false + isAnimated: false, + prefersReducedMotion: false } }, + created () { + this.prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches + }, computed: { animated () { - return this.stopGifs && this.isAnimated + return this.stopGifs && this.isAnimated && this.prefersReducedMotion }, style () { const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str -- 2.34.1 From e2125c57d6bb19b7129cc9e181baf932aa9d60c3 Mon Sep 17 00:00:00 2001 From: David Date: Thu, 20 Jul 2023 16:26:52 -0700 Subject: [PATCH 2/3] Turn on by default --- src/components/still-image/still-image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index bed4c314..5a496e70 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -13,7 +13,7 @@ const StillImage = { return { stopGifs: this.$store.getters.mergedConfig.stopGifs, isAnimated: false, - prefersReducedMotion: false + prefersReducedMotion: true } }, created () { -- 2.34.1 From 91eab22d77be27adc64485961521c4977f853acc Mon Sep 17 00:00:00 2001 From: David Date: Thu, 20 Jul 2023 17:18:59 -0700 Subject: [PATCH 3/3] Simplified and fixed and/or oopsie --- src/components/still-image/still-image.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index 5a496e70..81da126a 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -11,17 +11,13 @@ const StillImage = { ], data () { return { - stopGifs: this.$store.getters.mergedConfig.stopGifs, + stopGifs: this.$store.getters.mergedConfig.stopGifs || window.matchMedia('(prefers-reduced-motion: reduce)').matches, isAnimated: false, - prefersReducedMotion: true } }, - created () { - this.prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches - }, computed: { animated () { - return this.stopGifs && this.isAnimated && this.prefersReducedMotion + return this.stopGifs && this.isAnimated }, style () { const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str -- 2.34.1