Makes disable animations work across all extensions' expand panels an…

…d makes it a global config (#1159)
UniversalViewer · Oct 28, 2024 · 549db51 · 549db51
1 parent 391f867
commit 549db51
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 33 deletions.
diff --git a/src/content-handlers/iiif/BaseConfig.ts b/src/content-handlers/iiif/BaseConfig.ts
@@ -102,6 +102,9 @@ export type Options = {
 
   /** Determines if zoom to bounds is enabled */
   zoomToBoundsEnabled?: boolean;
+
+  /** Controls whether to have animations or not */
+  reducedAnimation?: boolean;
 };
 
 type Locale = {

diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts
@@ -483,8 +483,6 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
         IIIFEvents.CANVAS_INDEX_CHANGE,
         this.helper.canvasIndex
       );
-      const settings: ISettings = this.getSettings();
-      this.extensionHost.publish(IIIFEvents.SETTINGS_CHANGE, settings);
     });
 
     this.extensionHost.subscribe(

diff --git a/src/content-handlers/iiif/modules/uv-dialogues-module/SettingsDialogue.ts b/src/content-handlers/iiif/modules/uv-dialogues-module/SettingsDialogue.ts
@@ -138,6 +138,14 @@ export class SettingsDialogue extends Dialogue<
 
     this.$reducedAnimation.append(this.$reducedAnimationLabel);
 
+    const settings: ISettings = this.getSettings();
+
+    if (settings.reducedAnimation) {
+      this.$reducedAnimationCheckbox.prop("checked", true);
+    } else {
+      this.$reducedAnimationCheckbox.removeAttr("checked");
+    }
+
     this.$reducedAnimationCheckbox.change(() => {
       const settings: ISettings = {};
 

diff --git a/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts
@@ -1,7 +1,6 @@
 const $ = require("jquery");
 import { BaseView } from "./BaseView";
 import { Bools } from "@edsilv/utils";
-import { IIIFEvents } from "../../IIIFEvents";
 import { ExpandPanel } from "../../extensions/config/ExpandPanel";
 
 export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
@@ -10,7 +9,6 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
   isUnopened: boolean = true;
   autoToggled: boolean = false;
   expandFullEnabled: boolean = true;
-  reducedAnimation = false;
 
   $closed: JQuery;
   $closedTitle: JQuery;
@@ -93,14 +91,6 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
 
     this.$top.hide();
     this.$main.hide();
-
-    // Subscribe to settings change.
-    this.extensionHost.subscribe(
-      IIIFEvents.SETTINGS_CHANGE,
-      (args: ISettings) => {
-        this.reducedAnimation = args.reducedAnimation || false;
-      }
-    );
   }
 
   init(): void {
@@ -113,6 +103,10 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
   }
 
   toggle(autoToggled?: boolean): void {
+
+    const settings = this.extension.getSettings();
+    let isReducedAnimation = settings.reducedAnimation;
+
     autoToggled ? (this.autoToggled = true) : (this.autoToggled = false);
 
     // if collapsing, hide contents immediately.
@@ -125,7 +119,7 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
       this.$closed.show();
     }
 
-    if (this.reducedAnimation) {
+    if (isReducedAnimation) {
       // This is reduced motion.
       this.$element.css("width", this.getTargetWidth());
       this.$element.css("left", this.getTargetLeft());
@@ -170,39 +164,60 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
       this.toggled();
     }
 
+    const settings = this.extension.getSettings();
+    let isReducedAnimation = settings.reducedAnimation;
+
     var targetWidth: number = this.getFullTargetWidth();
     var targetLeft: number = this.getFullTargetLeft();
 
     this.expandFullStart();
 
-    this.$element.stop().animate(
-      {
-        width: targetWidth,
-        left: targetLeft,
-      },
-      this.options.panelAnimationDuration,
-      () => {
-        this.expandFullFinish();
-      }
-    );
+    if (isReducedAnimation) {
+      this.$element.css("width", targetWidth);
+      this.$element.css("left", targetLeft);
+      this.expandFullFinish();
+    }
+    else {
+      this.$element.stop().animate(
+        {
+          width: targetWidth,
+          left: targetLeft,
+        },
+        this.options.panelAnimationDuration,
+        () => {
+          this.expandFullFinish();
+        }
+      );
+    }
   }
 
   collapseFull(): void {
+
+    const settings = this.extension.getSettings();
+    let isReducedAnimation = settings.reducedAnimation;
+
     var targetWidth: number = this.getTargetWidth();
     var targetLeft: number = this.getTargetLeft();
 
     this.collapseFullStart();
 
-    this.$element.stop().animate(
-      {
-        width: targetWidth,
-        left: targetLeft,
-      },
-      this.options.panelAnimationDuration,
-      () => {
-        this.collapseFullFinish();
-      }
-    );
+    if (isReducedAnimation) {
+      this.$element.css("width", targetWidth);
+      this.$element.css("left", targetLeft);
+      this.collapseFullFinish();
+    } else {
+      this.$element.stop().animate(
+        {
+          width: targetWidth,
+          left: targetLeft,
+        },
+        this.options.panelAnimationDuration,
+        () => {
+          this.collapseFullFinish();
+        }
+      );
+    }
+
   }
 
   getTargetWidth(): number {