Moving jquery event handlers to bootstrap

Oksydan · Oct 22, 2023 · 703a065 · 703a065
1 parent 118d4cd
commit 703a065
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 26 deletions.
diff --git a/_dev/js/theme/components/event/useEvent.js b/_dev/js/theme/components/event/useEvent.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import EventHandler from "bootstrap/js/src/dom/event-handler";
 
 /**
  * Function that will help you to add/remove/trigger events
@@ -13,11 +14,7 @@ const useEvent = () => {
      * @param handler {function}
      */
   const on = (element, eventName, handlerOrDelegation, handler) => {
-    if (typeof handlerOrDelegation === 'function') {
-      $(element).on(eventName, handlerOrDelegation);
-    } else {
-      $(element).on(eventName, handlerOrDelegation, handler);
-    }
+    EventHandler.on(element, eventName, handlerOrDelegation, handler);
   };
 
   /**
@@ -28,11 +25,7 @@ const useEvent = () => {
      * @param handler {function}
      */
   const one = (element, eventName, handlerOrDelegation, handler) => {
-    if (typeof handlerOrDelegation === 'function') {
-      $(element).one(eventName, handlerOrDelegation);
-    } else {
-      $(element).one(eventName, handlerOrDelegation, handler);
-    }
+    EventHandler.one(element, eventName, handlerOrDelegation, handler);
   };
 
   /**
@@ -43,11 +36,7 @@ const useEvent = () => {
      * @param handler {function}
      */
   const off = (element, eventName, handlerOrDelegation, handler) => {
-    if (typeof handlerOrDelegation === 'function') {
-      $(element).off(eventName, handlerOrDelegation);
-    } else {
-      $(element).off(eventName, handlerOrDelegation, handler);
-    }
+    EventHandler.off(element, eventName, handlerOrDelegation, handler);
   };
 
   /**
@@ -57,7 +46,7 @@ const useEvent = () => {
      * @param args {object}
      */
   const trigger = (element, eventName, args = {}) => {
-    $(element).trigger(eventName, args);
+    EventHandler.trigger(element, eventName, args);
   };
 
   return {

diff --git a/_dev/js/theme/components/product.js b/_dev/js/theme/components/product.js
@@ -8,7 +8,7 @@ DOMReady(() => {
   const createInputFile = () => {
     each('.js-file-input', (input) => {
       input.addEventListener('change', (event) => {
-        const target = event.currentTarget;
+        const target = event.delegateTarget;
         const file = (target) ? target.files[0] : null;
 
         if (target && file) {

diff --git a/_dev/js/theme/core/cart/handler/cart/addToCartHandler.js b/_dev/js/theme/core/cart/handler/cart/addToCartHandler.js
@@ -13,8 +13,8 @@ const { danger } = useAlertToast();
 const addToCartHandler = async (event) => {
   event.preventDefault();
 
-  const form = event.currentTarget?.form;
-  const addToCartButton = event.currentTarget;
+  const form = event.delegateTarget?.form;
+  const addToCartButton = event.delegateTarget;
 
   const isQuantityInputValid = (input) => {
     let validInput = true;

diff --git a/_dev/js/theme/core/cart/handler/cart/deleteFromCartHandler.js b/_dev/js/theme/core/cart/handler/cart/deleteFromCartHandler.js
@@ -9,7 +9,7 @@ import deleteFromCartRequest from '../../request/cart/deleteFromCartRequest';
 const deleteFromCartHandler = async (event) => {
   event.preventDefault();
 
-  const button = event.currentTarget;
+  const button = event.delegateTarget;
   const { dataset } = button;
   const { idProduct, idProductAttribute, idCustomization = 0 } = dataset;
 

diff --git a/_dev/js/theme/core/cart/handler/voucher/codeLinkSubmitHandler.js b/_dev/js/theme/core/cart/handler/voucher/codeLinkSubmitHandler.js
@@ -5,7 +5,7 @@
 const codeLinkSubmitHandler = (event) => {
   event.preventDefault();
 
-  const link = event.currentTarget;
+  const link = event.delegateTarget;
   const input = document.querySelector('[name="discount_name"]');
   const form = document.querySelector('.js-voucher-form');
   const code = link.dataset?.code;

diff --git a/_dev/js/theme/core/cart/handler/voucher/deleteVoucherHandler.js b/_dev/js/theme/core/cart/handler/voucher/deleteVoucherHandler.js
@@ -9,7 +9,7 @@ import deleteVoucherFromCartRequest from '../../request/voucher/deleteVoucherFro
 const deleteVoucherHandler = async (event) => {
   event.preventDefault();
 
-  const btn = event.currentTarget;
+  const btn = event.delegateTarget;
   const { dataset } = btn;
   const { idDiscount } = dataset;
   const payload = {

diff --git a/_dev/js/theme/core/cart/handler/voucher/submitVoucherHandler.js b/_dev/js/theme/core/cart/handler/voucher/submitVoucherHandler.js
@@ -10,7 +10,7 @@ import parseToHtml from '../../../../utils/parseToHtml';
 const submitVoucherHandler = async (event) => {
   event.preventDefault();
 
-  const addVoucherForm = event.currentTarget;
+  const addVoucherForm = event.delegateTarget;
   const btn = addVoucherForm.querySelector('[type="submit"]');
   const input = addVoucherForm.querySelector('[name="discount_name"]');
   const voucherName = input?.value || '';

diff --git a/_dev/js/theme/core/checkout/handler/address/changeAddressHandler.js b/_dev/js/theme/core/checkout/handler/address/changeAddressHandler.js
@@ -24,7 +24,7 @@ const changeAddressHandler = (event) => {
     element.classList.add('selected');
   });
 
-  const eventTarget = event.currentTarget;
+  const eventTarget = event.delegateTarget;
   const addressErrorElement = document.querySelector(addressError);
   const idFailureAddress = addressErrorElement ? addressErrorElement?.id.split('-').pop() : null;
   const notValidAddressesVal = document.querySelector(notValidAddresses)?.value;

diff --git a/_dev/js/theme/utils/dynamicImports/useBootstrapComponentDynamicImport.js b/_dev/js/theme/utils/dynamicImports/useBootstrapComponentDynamicImport.js
@@ -123,9 +123,9 @@ const useBootstrapComponentDynamicImport = (importFiles, {
 
     await handleComponentLoad();
 
-    const { currentTarget, type } = e;
+    const { delegateTarget, type } = e;
 
-    currentTarget.dispatchEvent(new Event(type));
+    delegateTarget.dispatchEvent(new Event(type));
   };
 
   const { bindEvents, unbindEvents } = useDynamicImportEventsHandler(events, handleEvent);