Refactor event handling to utilize CommonEvents.getElementWindow for …

…element type checks
Dhruv-Techapps · Nov 12, 2024 · eabb78b · eabb78b
1 parent 0e83b19
commit eabb78b
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 26 deletions.
diff --git a/libs/acf/events/src/lib/append.events.ts b/libs/acf/events/src/lib/append.events.ts
@@ -7,7 +7,8 @@ import CommonEvents, { UNKNOWN_ELEMENT_TYPE_ERROR } from './common.events';
 const CHANGE_EVENT = ['input', 'change'];
 export const AppendEvents = (() => {
   const checkNode = (element: HTMLElement, value: string) => {
-    if (element instanceof HTMLTextAreaElement || (element instanceof HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
+    const eW = CommonEvents.getElementWindow(element);
+    if (element instanceof eW.HTMLTextAreaElement || (element instanceof eW.HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
       element.value += value;
       element.dispatchEvent(CommonEvents.getFillEvent());
     } else if (element.isContentEditable) {

diff --git a/libs/acf/events/src/lib/clipboard.events.ts b/libs/acf/events/src/lib/clipboard.events.ts
@@ -20,7 +20,8 @@ export const ClipboardEvents = (() => {
   };
 
   const getValue = (element: HTMLElement) => {
-    if (element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || (element instanceof HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
+    const eW = CommonEvents.getElementWindow(element);
+    if (element instanceof eW.HTMLSelectElement || element instanceof eW.HTMLTextAreaElement || (element instanceof eW.HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
       return element.value;
     }
     if (element.isContentEditable) {
@@ -31,7 +32,8 @@ export const ClipboardEvents = (() => {
   };
 
   const checkNode = (element: HTMLElement, value: string) => {
-    if (element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || (element instanceof HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
+    const eW = CommonEvents.getElementWindow(element);
+    if (element instanceof eW.HTMLSelectElement || element instanceof eW.HTMLTextAreaElement || (element instanceof eW.HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
       element.value = value;
       element.dispatchEvent(CommonEvents.getFillEvent());
     } else if (element.isContentEditable) {

diff --git a/libs/acf/events/src/lib/common.events.ts b/libs/acf/events/src/lib/common.events.ts
@@ -100,7 +100,11 @@ const CommonEvents = (() => {
     which = 0,
   }): KeyboardEventInit => ({ key, code, location, ctrlKey, shiftKey, altKey, metaKey, bubbles, repeat, isComposing, charCode, keyCode, which });
 
-  return { getFillEvent, getMouseEvent, getMouseEventProperties, getKeyboardEventProperties, loopElements, getVerifiedEvents, getTouchEvent, getTouchEventProperties, getTouch };
+  const getElementWindow = (element: HTMLElement): Window & typeof globalThis => {
+    return element.ownerDocument.defaultView || window;
+  };
+
+  return { getFillEvent, getElementWindow, getMouseEvent, getMouseEventProperties, getKeyboardEventProperties, loopElements, getVerifiedEvents, getTouchEvent, getTouchEventProperties, getTouch };
 })();
 
 export const EVENTS = {

diff --git a/libs/acf/events/src/lib/copy.events.ts b/libs/acf/events/src/lib/copy.events.ts
@@ -1,6 +1,7 @@
 import { RADIO_CHECKBOX_NODE_NAME } from '@dhruv-techapps/acf-common';
 import { GoogleAnalyticsService } from '@dhruv-techapps/google-analytics';
 import { ACTION_I18N_TITLE } from '.';
+import CommonEvents from './common.events';
 
 const LOCAL_STORAGE_COPY = 'auto-clicker-copy';
 
@@ -16,7 +17,8 @@ export const CopyEvents = (() => {
   };
 
   const getValue = (element: HTMLElement) => {
-    if (element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || (element instanceof HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
+    const eW = CommonEvents.getElementWindow(element);
+    if (element instanceof eW.HTMLSelectElement || element instanceof eW.HTMLTextAreaElement || (element instanceof eW.HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
       return element.value;
     }
     if (element.isContentEditable) {

diff --git a/libs/acf/events/src/lib/form.events.ts b/libs/acf/events/src/lib/form.events.ts
@@ -6,7 +6,8 @@ const FORM_EVENTS = ['blur', 'click', 'click-once', 'focus', 'select', 'submit',
 
 export const FormEvents = (() => {
   const dispatchEvent = (element: HTMLElement, events: Array<string | Event>) => {
-    if (!(element instanceof HTMLElement)) {
+    const eW = CommonEvents.getElementWindow(element);
+    if (!(element instanceof eW.HTMLElement)) {
       throw new ConfigError(`elementFinder: ${element}`, 'Not HTMLElement');
     }
     events.forEach((event) => {
@@ -26,17 +27,17 @@ export const FormEvents = (() => {
           element.focus();
           break;
         case 'submit':
-          if (element instanceof HTMLFormElement) {
+          if (element instanceof eW.HTMLFormElement) {
             element.submit();
           } else if (
-            element instanceof HTMLSelectElement ||
-            element instanceof HTMLTextAreaElement ||
-            element instanceof HTMLInputElement ||
-            element instanceof HTMLButtonElement ||
-            element instanceof HTMLLabelElement ||
-            element instanceof HTMLOptionElement ||
-            element instanceof HTMLFieldSetElement ||
-            element instanceof HTMLOutputElement
+            element instanceof eW.HTMLSelectElement ||
+            element instanceof eW.HTMLTextAreaElement ||
+            element instanceof eW.HTMLInputElement ||
+            element instanceof eW.HTMLButtonElement ||
+            element instanceof eW.HTMLLabelElement ||
+            element instanceof eW.HTMLOptionElement ||
+            element instanceof eW.HTMLFieldSetElement ||
+            element instanceof eW.HTMLOutputElement
           ) {
             element.form?.submit();
           } else {
@@ -45,15 +46,15 @@ export const FormEvents = (() => {
           }
           break;
         case 'select':
-          if (element instanceof HTMLTextAreaElement || element instanceof HTMLInputElement) {
+          if (element instanceof eW.HTMLTextAreaElement || element instanceof eW.HTMLInputElement) {
             element.select();
           }
           break;
         case 'remove':
           element.remove();
           break;
         case 'clear':
-          if (element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLInputElement) {
+          if (element instanceof eW.HTMLSelectElement || element instanceof eW.HTMLTextAreaElement || element instanceof eW.HTMLInputElement) {
             element.value = '';
           } else {
             console.error(element);

diff --git a/libs/acf/events/src/lib/func.events.ts b/libs/acf/events/src/lib/func.events.ts
@@ -9,7 +9,8 @@ const CHANGE_EVENT = ['input', 'change'];
 
 export const FuncEvents = (() => {
   const checkNode = (element: HTMLElement, value: string) => {
-    if (element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || (element instanceof HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
+    const eW = CommonEvents.getElementWindow(element);
+    if (element instanceof eW.HTMLSelectElement || element instanceof eW.HTMLTextAreaElement || (element instanceof eW.HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
       element.value = value;
       element.dispatchEvent(CommonEvents.getFillEvent());
     } else if (element.isContentEditable) {

diff --git a/libs/acf/events/src/lib/index.ts b/libs/acf/events/src/lib/index.ts
@@ -89,7 +89,7 @@ export const Events = (() => {
           await ClipboardEvents.start(elements, value);
           break;
         case EVENTS.ELEMENT:
-          await ElementEvents.start(elements, value);
+          ElementEvents.start(elements, value);
           break;
         default:
           PlainEvents.start(elements, value);

diff --git a/libs/acf/events/src/lib/key.events.ts b/libs/acf/events/src/lib/key.events.ts
@@ -36,7 +36,8 @@ export const KeyEvents = (() => {
   };
 
   const dispatchEvent = async (element: HTMLElement, events: Array<KeyEvent>) => {
-    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+    const eW = CommonEvents.getElementWindow(element); // Get eW
+    if (element instanceof eW.HTMLInputElement || element instanceof eW.HTMLTextAreaElement) {
       // eslint-disable-next-line no-restricted-syntax
       for (const event of events) {
         element.dispatchEvent(new KeyboardEvent(KEYBOARD_EVENT_KEYDOWN, event));

diff --git a/libs/acf/events/src/lib/paste.events.ts b/libs/acf/events/src/lib/paste.events.ts
@@ -10,7 +10,8 @@ const CHANGE_EVENT = ['input', 'change'];
 
 export const PasteEvents = (() => {
   const checkNode = (element: HTMLElement, value: string) => {
-    if (element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || (element instanceof HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
+    const eW = CommonEvents.getElementWindow(element);
+    if (element instanceof eW.HTMLSelectElement || element instanceof eW.HTMLTextAreaElement || (element instanceof eW.HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
       element.value = value;
       element.dispatchEvent(CommonEvents.getFillEvent());
     } else if (element.isContentEditable) {

diff --git a/libs/acf/events/src/lib/plain.events.ts b/libs/acf/events/src/lib/plain.events.ts
@@ -11,7 +11,8 @@ export const PlainEvents = (() => {
   const checkEmptyValue = (value: string) => (value === '::empty' ? '' : value);
 
   const dispatchEvent = (element: HTMLElement, value: string) => {
-    if (element instanceof HTMLSelectElement) {
+    const eW = CommonEvents.getElementWindow(element);
+    if (element instanceof eW.HTMLSelectElement) {
       const nodes = document.evaluate(
         `.//option[text()="${value}" or contains(text(),"${value}") or @value="${value}" or @id="${value}"]`,
         element,
@@ -22,10 +23,10 @@ export const PlainEvents = (() => {
       if (nodes.snapshotLength !== 0) {
         (nodes.snapshotItem(0) as HTMLOptionElement).selected = true;
       }
-    } else if (element instanceof HTMLTextAreaElement || (element instanceof HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
+    } else if (element instanceof eW.HTMLTextAreaElement || (element instanceof eW.HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
       element.value = value;
       element.dispatchEvent(CommonEvents.getFillEvent());
-    } else if (element instanceof HTMLOptionElement) {
+    } else if (element instanceof eW.HTMLOptionElement) {
       element.selected = true;
     } else if (element.isContentEditable) {
       GoogleAnalyticsService.fireEvent('isContentEditable', { event: 'PlainEvents' });

diff --git a/libs/acf/events/src/lib/prepend.events.ts b/libs/acf/events/src/lib/prepend.events.ts
@@ -8,7 +8,8 @@ const CHANGE_EVENT = ['input', 'change'];
 
 export const PrependEvents = (() => {
   const checkNode = (element: HTMLElement, value: string) => {
-    if (element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || (element instanceof HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
+    const eW = CommonEvents.getElementWindow(element);
+    if (element instanceof eW.HTMLSelectElement || element instanceof eW.HTMLTextAreaElement || (element instanceof eW.HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
       element.value = value + element.value;
       element.dispatchEvent(CommonEvents.getFillEvent());
     } else if (element.isContentEditable) {

diff --git a/libs/acf/events/src/lib/replace.events.ts b/libs/acf/events/src/lib/replace.events.ts
@@ -9,7 +9,8 @@ const CHANGE_EVENT = ['input', 'change'];
 export const ReplaceEvents = (() => {
   const checkNode = (element: HTMLElement, value: string) => {
     const [target, string] = value.split('::');
-    if (element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || (element instanceof HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
+    const eW = CommonEvents.getElementWindow(element);
+    if (element instanceof eW.HTMLSelectElement || element instanceof eW.HTMLTextAreaElement || (element instanceof eW.HTMLInputElement && !RADIO_CHECKBOX_NODE_NAME.test(element.type))) {
       element.value = element.value.replace(new RegExp(target, 'g'), string);
       element.dispatchEvent(CommonEvents.getFillEvent());
     } else if (element.isContentEditable) {