From 563ed8a9ab8ce002994641499317b3c008d826b9 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Fri, 9 Sep 2022 19:40:25 +0200
Subject: [PATCH] Remove reducedMotion store and use body class instead

---
 qt/aqt/editor.py                 |  2 --
 ts/components/Collapsible.svelte |  3 ++-
 ts/editor/EditorField.svelte     |  8 +++-----
 ts/editor/NoteEditor.svelte      | 15 +--------------
 ts/lib/context-keys.ts           |  1 -
 5 files changed, 6 insertions(+), 23 deletions(-)

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index c4b84f6cd..7826d375f 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -534,7 +534,6 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
             setColorButtons({});
             setTags({});
             setMathjaxEnabled({});
-            setReducedMotion({});
             """.format(
             json.dumps(data),
             json.dumps(collapsed),
@@ -546,7 +545,6 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
             json.dumps([text_color, highlight_color]),
             json.dumps(self.note.tags),
             json.dumps(self.mw.col.get_config("renderMathjax", True)),
-            json.dumps(self.mw.pm.reduced_motion()),
         )
 
         if self.addMode:
diff --git a/ts/components/Collapsible.svelte b/ts/components/Collapsible.svelte
index 0213e5df7..cb58bdb2e 100644
--- a/ts/components/Collapsible.svelte
+++ b/ts/components/Collapsible.svelte
@@ -8,12 +8,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { tweened } from "svelte/motion";
 
     export let collapse = false;
-    export let animated = true;
     export let duration = 200;
 
     let collapsed = false;
     let contentHeight = 0;
 
+    let animated = !document.body.classList.contains("reduced-motion");
+
     function dynamicDuration(height: number): number {
         return 100 + Math.pow(height, 1 / 4) * 25;
     }
diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte
index 8b94b7f68..214abdb29 100644
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@@ -42,12 +42,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import { getContext, onDestroy, setContext } from "svelte";
+    import { onDestroy, setContext } from "svelte";
     import type { Writable } from "svelte/store";
     import { writable } from "svelte/store";
 
     import Collapsible from "../components/Collapsible.svelte";
-    import { collapsedKey, directionKey, reducedMotionKey } from "../lib/context-keys";
+    import { collapsedKey, directionKey } from "../lib/context-keys";
     import { promiseWithResolver } from "../lib/promise";
     import type { Destroyable } from "./destroyable";
     import EditingArea from "./EditingArea.svelte";
@@ -67,8 +67,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     $: $collapsedStore = collapsed;
 
-    const reducedMotion = getContext<Readable<boolean>>(reducedMotionKey);
-
     const editingArea: Partial<EditingAreaAPI> = {};
     const [element, elementResolve] = promiseWithResolver<HTMLElement>();
 
@@ -90,7 +88,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div class="field-container" on:mouseenter on:mouseleave>
     <slot name="field-label" />
 
-    <Collapsible collapse={collapsed} animated={!$reducedMotion} let:collapsed={hidden}>
+    <Collapsible collapse={collapsed} let:collapsed={hidden}>
         <div use:elementResolve class="editor-field" on:focusin on:focusout {hidden}>
             <EditingArea
                 {content}
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index 876444475..03ff715cd 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -39,14 +39,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import { onMount, setContext, tick } from "svelte";
+    import { onMount, tick } from "svelte";
     import { get, writable } from "svelte/store";
 
     import Absolute from "../components/Absolute.svelte";
     import Badge from "../components/Badge.svelte";
     import StickyContainer from "../components/StickyContainer.svelte";
     import { bridgeCommand } from "../lib/bridgecommand";
-    import { reducedMotionKey } from "../lib/context-keys";
     import { TagEditor } from "../tag-editor";
     import { ChangeTimer } from "./change-timer";
     import DecoratedElements from "./DecoratedElements.svelte";
@@ -130,15 +129,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         plainTextDefaults = [...richTextsHidden];
     }
 
-    let reducedMotion = false;
-    function setReducedMotion(enabled: boolean): void {
-        reducedMotion = enabled;
-    }
-
-    const reducedMotionStore = writable<boolean>();
-    setContext(reducedMotionKey, reducedMotionStore);
-    $: $reducedMotionStore = reducedMotion;
-
     function setMathjaxEnabled(enabled: boolean): void {
         mathjaxConfig.enabled = enabled;
     }
@@ -287,7 +277,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             setNoteId,
             wrap,
             setMathjaxEnabled,
-            setReducedMotion,
             ...oldEditorAdapter,
         });
 
@@ -447,7 +436,6 @@ the AddCards dialog) should be implemented in the user of this component.
                         <svelte:fragment slot="rich-text-input">
                             <Collapsible
                                 collapse={richTextsHidden[index]}
-                                animated={!reducedMotion}
                                 let:collapsed={hidden}
                             >
                                 <RichTextInput
@@ -469,7 +457,6 @@ the AddCards dialog) should be implemented in the user of this component.
                         <svelte:fragment slot="plain-text-input">
                             <Collapsible
                                 collapse={plainTextsHidden[index]}
-                                animated={!reducedMotion}
                                 let:collapsed={hidden}
                             >
                                 <PlainTextInput
diff --git a/ts/lib/context-keys.ts b/ts/lib/context-keys.ts
index c87580362..417443812 100644
--- a/ts/lib/context-keys.ts
+++ b/ts/lib/context-keys.ts
@@ -6,4 +6,3 @@ export const fontSizeKey = Symbol("fontSize");
 export const directionKey = Symbol("direction");
 export const descriptionKey = Symbol("description");
 export const collapsedKey = Symbol("collapsed");
-export const reducedMotionKey = Symbol("reducedMotion");