timeout

Saira-A · Apr 10, 2024 · 213f7be · 213f7be
1 parent 260b0f0
commit 213f7be
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 47 deletions.
diff --git a/src/content-handlers/iiif/modules/uv-moreinforightpanel-module/MoreInfoRightPanel.ts b/src/content-handlers/iiif/modules/uv-moreinforightpanel-module/MoreInfoRightPanel.ts
@@ -15,7 +15,7 @@ export class MoreInfoRightPanel extends RightPanel<MoreInfoRightPanelConfig> {
   limit: number;
 
   constructor($element: JQuery) {
-    super($element, false);
+    super($element);
   }
 
   create(): void {

diff --git a/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/RightPanel.ts
@@ -2,70 +2,50 @@ import { ExpandPanel } from "../../extensions/config/ExpandPanel";
 import { IIIFEvents } from "../../IIIFEvents";
 import { BaseExpandPanel } from "./BaseExpandPanel";
 
-export class RightPanel<T extends ExpandPanel> extends BaseExpandPanel<T> {
-  private fullscreenEnabled: boolean;
 
-  constructor($element: JQuery, fullscreenEnabled: boolean) {
+export class RightPanel<T extends ExpandPanel> extends BaseExpandPanel<T> {
+  private manuallyToggled: boolean = false;
+  constructor($element: JQuery) {
     super($element);
-    this.fullscreenEnabled = fullscreenEnabled;
   }
 
   create(): void {
     super.create();
     this.$element.width(this.options.panelCollapsedWidth);
+  }
 
-    let isLargeScreen: boolean = window.innerWidth >= 1200;
-
-    const updatePanelBasedOnScreenWidth = () => {
-      const newIsLargeScreen = window.innerWidth >= 1200;
+  init(): void {
+    super.init();
 
-      if (newIsLargeScreen !== isLargeScreen) {
-        isLargeScreen = newIsLargeScreen;
+    const collapseButton = $('.collapseButton');
+    const expandButton = $('.expandButton');
+    const title = $('.title');
 
-        if (this.fullscreenEnabled && isLargeScreen) {
-          this.toggle(true);
-        } else {
-          this.toggle(false);
-        }
-      }
+    const setManualToggled = () => {
+        this.manuallyToggled = true;
     };
 
-    updatePanelBasedOnScreenWidth();
-
-    window.addEventListener('resize', updatePanelBasedOnScreenWidth);
-
-    // Open the panel by default for small screens and close it after a few seconds
-    if (!isLargeScreen) {
-      this.toggle(true);
-
-      setTimeout(() => {
-        this.toggle(false);
-      }, 5000); 
-    }
-
-    this.extensionHost.subscribe(IIIFEvents.TOGGLE_EXPAND_RIGHT_PANEL, () => {
-      if (this.isFullyExpanded) {
-        this.collapseFull();
-      } else {
-        this.expandFull();
-      }
+    collapseButton.on('click', () => {
+        setManualToggled();
+        this.toggle(false); 
     });
-  }
-
 
-  init(): void {
-    super.init();
+    expandButton.on('click', () => {
+        setManualToggled();
+        this.toggle(true); 
+    });
 
-    const isLargeScreen = window.innerWidth >= 1200;
+    title.on('click', () => {
+        setManualToggled();
+    });
 
-    if (isLargeScreen) {
-        // Always set shouldOpenPanel to true to open the right panel by default on large screens
-        const shouldOpenPanel: boolean = true;
+    this.toggle(true);
 
-        if (shouldOpenPanel) {
-            this.toggle(true);
+    setTimeout(() => {
+        if (!this.manuallyToggled) {
+            this.toggle(false);
         }
-    }
+    }, 3000); 
 
     this.extensionHost.subscribe(IIIFEvents.TOGGLE_EXPAND_RIGHT_PANEL, () => {
         if (this.isFullyExpanded) {