Implement reduced motion mode for Collapsible

qt/aqt/editor.py

@@ -534,6 +534,7 @@ require("anki/ui").loaded.then(() => require("anki/NoteEditor").instances[0].too
             setColorButtons({});
             setTags({});
             setMathjaxEnabled({});
+            setReducedMotion({});
             """.format(
             json.dumps(data),
             json.dumps(collapsed),
@@ -545,6 +546,7 @@ 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:

ts/components/Collapsible.svelte

@@ -7,6 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { tweened } from "svelte/motion";
 
     export let duration = 200;
+    export let animated = true;
 
     function dynamicDuration(height: number, factor: number): number {
         return 100 + Math.pow(height, 1 / 4) * factor;
@@ -33,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             await new Promise(requestAnimationFrame);
             expandHeight = collapsibleElement.clientHeight;
 
-            animating = true;
+            transitioning = true;
             size.set(1, {
                 duration: duration || dynamicDuration(expandHeight, 25),
                 easing: cubicIn,
@@ -42,24 +43,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     $: if (collapsibleElement) {
+        if (animated) {
             doCollapse(collapse);
+        } else {
+            collapsed = collapse;
+        }
     }
 
     let collapsibleElement: HTMLElement;
 
     $: collapsed = $size === 0;
     $: expanded = $size === 1;
-    $: animating = $size > 0 && !(collapsed || expanded);
+    $: transitioning = $size > 0 && !(collapsed || expanded);
 
     $: height = $size * expandHeight;
-    $: measuring = !(collapsed || animating || expanded);
+    $: measuring = !(collapsed || transitioning || expanded);
 </script>
 
 <div
     bind:this={collapsibleElement}
     class="collapsible"
     class:measuring
-    class:animating
+    class:animated
+    class:transitioning
     class:expanded
     style:--height="{height}px"
 >
@@ -72,12 +78,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 {/if}
 
 <style lang="scss">
-    .collapsible {
+    .collapsible.animated {
         &.measuring {
             position: absolute;
             opacity: 0;
         }
-        &.animating {
+        &.transitioning {
             overflow: hidden;
             height: var(--height);
             &.expanded {

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 { onDestroy, setContext } from "svelte";
+    import { getContext, onDestroy, setContext } from "svelte";
     import type { Writable } from "svelte/store";
     import { writable } from "svelte/store";
 
     import Collapsible from "../components/Collapsible.svelte";
-    import { collapsedKey, directionKey } from "../lib/context-keys";
+    import { collapsedKey, directionKey, reducedMotionKey } from "../lib/context-keys";
     import { promiseWithResolver } from "../lib/promise";
     import type { Destroyable } from "./destroyable";
     import EditingArea from "./EditingArea.svelte";
@@ -67,6 +67,8 @@ 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>();
 
@@ -88,7 +90,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div class="field-container">
     <slot name="field-label" />
 
-    <Collapsible collapse={collapsed} let:collapsed={hidden}>
+    <Collapsible collapse={collapsed} animated={!$reducedMotion} let:collapsed={hidden}>
         <div
             use:elementResolve
             class="editor-field"

ts/editor/NoteEditor.svelte

@@ -39,13 +39,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import { onMount, tick } from "svelte";
+    import { onMount, setContext, 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";
@@ -129,6 +130,15 @@ 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;
     }
@@ -277,6 +287,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             setNoteId,
             wrap,
             setMathjaxEnabled,
+            setReducedMotion,
             ...oldEditorAdapter,
         });
 
@@ -436,6 +447,7 @@ 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
@@ -457,6 +469,7 @@ 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

ts/lib/context-keys.ts

@@ -6,3 +6,4 @@ 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");