From 9df1ebac57498a292071db7939a41f8abe74b705 Mon Sep 17 00:00:00 2001
From: Dan Grebb <dan@dgrebb.com>
Date: Tue, 26 Sep 2023 10:22:47 -0400
Subject: [PATCH] feat(front): disables all page transitions via

---
 front/src/lib/_utils/index.js                  |  8 ++++++++
 front/src/lib/components/PageTransition.svelte |  6 +-----
 .../lib/components/TransitionElasticFly.svelte | 18 ++++++++++++++++--
 front/src/lib/components/TransitionFade.svelte |  5 ++++-
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/front/src/lib/_utils/index.js b/front/src/lib/_utils/index.js
index 400d3c162..560c760b5 100644
--- a/front/src/lib/_utils/index.js
+++ b/front/src/lib/_utils/index.js
@@ -31,3 +31,11 @@ export const isElementOutsideViewport = (element) => {
     rect.top > window.innerHeight
   );
 };
+
+/**
+ * Determine if a browser/system setting prefers reduced motion
+ * @returns boolean
+ */
+export const motionless = () => {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
diff --git a/front/src/lib/components/PageTransition.svelte b/front/src/lib/components/PageTransition.svelte
index 1466fe2dc..5e6903ca6 100644
--- a/front/src/lib/components/PageTransition.svelte
+++ b/front/src/lib/components/PageTransition.svelte
@@ -1,14 +1,10 @@
 <script>
   import { navigating } from '$app/stores';
-  import { isElementOutsideViewport, scrollTop } from '@utils';
+  import { isElementOutsideViewport, motionless, scrollTop } from '@utils';
 
   export let transitionKey;
   let to;
 
-  function motionless() {
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  }
-
   function doIt() {
     return {
       duration: motionless() === true ? 0 : 500,
diff --git a/front/src/lib/components/TransitionElasticFly.svelte b/front/src/lib/components/TransitionElasticFly.svelte
index 64e1b24b8..3808ee571 100644
--- a/front/src/lib/components/TransitionElasticFly.svelte
+++ b/front/src/lib/components/TransitionElasticFly.svelte
@@ -2,6 +2,7 @@
   import { navigating } from '$app/stores';
   import { circInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
+  import { motionless } from '@utils';
   export let transitionKey;
   export let classList = false;
   export let duration = 333;
@@ -9,6 +10,7 @@
   let initialHeight;
 
   function animateOut(node) {
+    if (motionless() === true) return false;
     const nodeOut = node.currentTarget;
 
     if ($navigating) {
@@ -30,6 +32,7 @@
   }
 
   function animateIn(node) {
+    if (motionless() === true) return false;
     const nodeIn = node.target;
     const newHeight = nodeIn.offsetHeight;
 
@@ -49,6 +52,17 @@
       }
     }
   }
+
+  /**
+   * Along with `motionless()`, this function assists with built-in Svelte transitions
+   * @param node
+   * @param options
+   */
+  function motion(node, options) {
+    if (motionless() === false) {
+      return options.fn(node, options);
+    }
+  }
 </script>
 
 {#key transitionKey}
@@ -56,8 +70,8 @@
     class="transition-elastic-fly-container {classList ? classList : ''}"
     on:outrostart={animateOut}
     on:introstart={animateIn}
-    out:fly|global={{ x: -1000, duration, easing: circInOut }}
-    in:fly|global={{ x: -1000, duration, delay, easing: circInOut }}
+    out:motion|global={{ fn: fly, x: -1000, duration, easing: circInOut }}
+    in:motion|global={{ fn: fly, x: -1000, duration, delay, easing: circInOut }}
   >
     <slot />
   </div>
diff --git a/front/src/lib/components/TransitionFade.svelte b/front/src/lib/components/TransitionFade.svelte
index ed70f43e9..5e65e7845 100644
--- a/front/src/lib/components/TransitionFade.svelte
+++ b/front/src/lib/components/TransitionFade.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { motionless } from '@utils';
   export let transitionKey;
   export let duration = 500;
   export let delay = 600;
@@ -6,15 +7,17 @@
 
   function doIt() {
     return {
-      duration,
+      duration: motionless() === true ? 0 : duration,
     };
   }
 
   function animateOut(node) {
+    if (motionless() === true) return false;
     document.body.classList.toggle('animating-page', true);
   }
 
   function animateIn(node) {
+    if (motionless() === true) return false;
     setTimeout(() => {
       document.body.classList.toggle('animating', false);
       document.body.classList.toggle('animating-page', false);