create glitchedelement wrapper that respects the reduced motion direc…

…tive
kitsune-soc · Oct 12, 2023 · 6e807ca · 6e807ca
1 parent 1e8a9ad
commit 6e807ca
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/kitsune-fe/src/components/CaptchaComponent.vue b/kitsune-fe/src/components/CaptchaComponent.vue
@@ -7,7 +7,7 @@
   />
 
   <vue-hcaptcha
-    v-if="backend == CaptchaBackend.HCaptcha"
+    v-if="backend === CaptchaBackend.HCaptcha"
     :sitekey="sitekey"
     @verify="onVerify"
     @expired="onExpire"
@@ -58,7 +58,7 @@
   }
 
   onMounted(async () => {
-    if (props.backend == CaptchaBackend.MCaptcha) {
+    if (props.backend === CaptchaBackend.MCaptcha) {
       const config = {
         widgetLink: new URL(props.sitekey),
       };

diff --git a/kitsune-fe/src/components/GlitchedElement.vue b/kitsune-fe/src/components/GlitchedElement.vue
@@ -0,0 +1,21 @@
+<template>
+  <slot v-if="reduceMotion" />
+
+  <GlitchedElement v-else :options="options">
+    <slot />
+  </GlitchedElement>
+</template>
+
+<script lang="ts" setup>
+  import { usePreferredReducedMotion } from '@vueuse/core';
+
+  import { computed } from 'vue';
+  import { GlitchedElement } from 'vue-powerglitch';
+
+  defineProps<{ options?: object }>();
+
+  const preferredReducedMotion = usePreferredReducedMotion();
+  const reduceMotion = computed(
+    () => preferredReducedMotion.value === 'reduce',
+  );
+</script>
diff --git a/kitsune-fe/src/components/NavBarLink.vue b/kitsune-fe/src/components/NavBarLink.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { GlitchedElement } from 'vue-powerglitch';
+  import GlitchedElement from './GlitchedElement.vue';
 
   defineProps<{
     class?: string;

diff --git a/kitsune-fe/src/views/NotFound.vue b/kitsune-fe/src/views/NotFound.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { GlitchedElement } from 'vue-powerglitch';
+  import GlitchedElement from '../components/GlitchedElement.vue';
 </script>
 
 <style scoped lang="scss">