From 1cfa768e2c80e9dfd808269355105b1d76e8c281 Mon Sep 17 00:00:00 2001
From: hujambo-dunia <michelle.savage.1@gmail.com>
Date: Tue, 21 Nov 2023 11:00:33 -0500
Subject: [PATCH] Refactored and consolidated methods.

---
 client/src/components/Upload/UploadModal.vue | 10 +++-------
 client/src/components/Upload/utils.js        | 21 ++++++++------------
 client/src/composables/fileDrop.ts           |  9 ++++-----
 3 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/client/src/components/Upload/UploadModal.vue b/client/src/components/Upload/UploadModal.vue
index 59239a7347da..6b2059020382 100644
--- a/client/src/components/Upload/UploadModal.vue
+++ b/client/src/components/Upload/UploadModal.vue
@@ -7,6 +7,8 @@ import { ref, watch } from "vue";
 import { useUserStore } from "@/stores/userStore";
 import { wait } from "@/utils/utils";
 
+import { setIframeEvents } from "../components/Upload/utils";
+
 import UploadContainer from "./UploadContainer.vue";
 
 const { currentUser } = storeToRefs(useUserStore());
@@ -59,16 +61,10 @@ async function open(overrideOptions) {
     }
 }
 
-function setIframeEvents(disableEvents) {
-    const element = document.getElementById("galaxy_main");
-    if (element) {
-        element.style["pointer-events"] = disableEvents ? "none" : "auto";
-    }
-}
 
 watch(
     () => showModal.value,
-    (modalShown) => setIframeEvents(modalShown)
+    (modalShown) => setIframeEvents(["galaxy_main"], modalShown)
 );
 
 defineExpose({
diff --git a/client/src/components/Upload/utils.js b/client/src/components/Upload/utils.js
index 0d7322a14d60..637553275d22 100644
--- a/client/src/components/Upload/utils.js
+++ b/client/src/components/Upload/utils.js
@@ -144,17 +144,12 @@ export default {
     getUploadDbKeys,
 };
 
-export function interactEvent() {
-    const setPointer = (elements, option = "auto") => {
-        let element;
-        elements.forEach((e) => {
-            element = document.querySelector(e);
-            if (element) {
-                element.style.pointerEvents = option;
-            }
-        });
-    };
-    return {
-        setPointer,
-    };
+export function setIframeEvents(elements, disableEvents) {
+    let element;
+    elements.forEach((e) => {
+        element = document.querySelector(`iframe#${e}`);
+        if (element) {
+            element.style.pointerEvents = disableEvents ? "none" : "auto";
+        }
+    });
 }
diff --git a/client/src/composables/fileDrop.ts b/client/src/composables/fileDrop.ts
index 2f164fa6e5fc..580cd927ef98 100644
--- a/client/src/composables/fileDrop.ts
+++ b/client/src/composables/fileDrop.ts
@@ -1,7 +1,7 @@
 import { type MaybeRefOrGetter, useEventListener } from "@vueuse/core";
 import { computed, type Ref, ref, unref } from "vue";
 
-import { interactEvent } from "../components/Upload/utils";
+import { setIframeEvents } from "../components/Upload/utils";
 
 export type FileDropHandler = (event: DragEvent) => void;
 
@@ -20,8 +20,7 @@ export function useFileDrop(
     solo: MaybeRefOrGetter<boolean>,
     idleTime = 800
 ) {
-    const { setPointer } = interactEvent();
-    const iframesNoInteract = ["iframe#galaxy_main", "iframe#frame.center-frame"];
+    const iframesNoInteract = ["galaxy_main", "frame.center-frame"];
 
     /** returns if any bootstrap modal is open */
     function isAnyModalOpen() {
@@ -48,7 +47,7 @@ export function useFileDrop(
                 case "dragstart":
                     return "blocked";
                 case "dragenter":
-                    setPointer(iframesNoInteract, "none");
+                    setIframeEvents(iframesNoInteract, true);
                     if (!(unref(solo) && isAnyModalOpen())) {
                         return "fileDragging";
                     }
@@ -130,7 +129,7 @@ export function useFileDrop(
         "dragleave",
         () => {
             isFileOverDropZone.value = false;
-            setPointer(iframesNoInteract, "auto");
+            setIframeEvents(iframesNoInteract, false);
         },
         true
     );