From fa7db3146d963ee59e57a72de316e52fce3e5106 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Igor=20Ste=CC=A8pien=CC=81?= Date: Tue, 24 Oct 2023 00:22:55 +0200 Subject: [PATCH] event handling changes --- .../core/checkout/checkoutController.js | 4 +- _dev/js/checkout/index.js | 4 +- _dev/js/listing/components/filters/Filters.js | 4 +- .../listing/components/filters/RangeSlider.js | 3 +- _dev/js/theme/components/header/useTopMenu.js | 3 +- .../theme/core/address/addressController.js | 4 +- _dev/js/theme/core/cart/cartController.js | 4 +- .../theme/core/product/productController.js | 3 +- .../useDynamicImportEventsHandler.js | 4 +- _dev/js/utils/event/eventHandler.js | 45 ++++++++++++++ _dev/js/utils/event/useEvent.js | 59 ------------------- 11 files changed, 54 insertions(+), 83 deletions(-) create mode 100644 _dev/js/utils/event/eventHandler.js delete mode 100644 _dev/js/utils/event/useEvent.js diff --git a/_dev/js/checkout/core/checkout/checkoutController.js b/_dev/js/checkout/core/checkout/checkoutController.js index de582227..f41d2c86 100644 --- a/_dev/js/checkout/core/checkout/checkoutController.js +++ b/_dev/js/checkout/core/checkout/checkoutController.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import useEvent from '../../../utils/event/useEvent'; +import { on } from '../../../utils/event/eventHandler'; import editAddressHandler from './handler/address/editAddressHandler'; import changeAddressHandler from './handler/address/changeAddressHandler'; import changeDeliveryMethodHandler from './handler/delivery/changeDeliveryMethodHandler'; @@ -12,8 +12,6 @@ import confirmOrderHandler from './handler/payment/confirmOrderHandler'; import checkoutFormSubmitHandler from './handler/process/checkoutFormSubmitHandler'; import checkoutStepChangeHandler from './handler/process/checkoutStepChangeHandler'; -const { on } = useEvent(); - /** * Checkout controller. * diff --git a/_dev/js/checkout/index.js b/_dev/js/checkout/index.js index e06ad0ce..6be74d7e 100644 --- a/_dev/js/checkout/index.js +++ b/_dev/js/checkout/index.js @@ -1,11 +1,9 @@ import prestashop from 'prestashop'; -import useEvent from '../utils/event/useEvent'; +import { on } from '../utils/event/eventHandler'; import { parseToHtml, each, DOMReady } from '../utils/DOM/DOMHelpers'; import useHttpRequest from '../utils/http/useHttpRequest'; import './core/checkout/index'; -const { on } = useEvent(); - function setUpCheckout() { const clickTermLinkHandler = async (event) => { event.preventDefault(); diff --git a/_dev/js/listing/components/filters/Filters.js b/_dev/js/listing/components/filters/Filters.js index 1682b587..0c4d3f4e 100644 --- a/_dev/js/listing/components/filters/Filters.js +++ b/_dev/js/listing/components/filters/Filters.js @@ -1,6 +1,6 @@ import prestashop from 'prestashop'; import FiltersRangeSliders from './FiltersRangeSliders'; -import useEvent from '../../../utils/event/useEvent'; +import { on } from '../../../utils/event/eventHandler'; class Filters { constructor() { @@ -11,8 +11,6 @@ class Filters { } setEvents() { - const { on } = useEvent(); - prestashop.on('updatedProductList', () => { prestashop.pageLoader.hideLoader(); this.rangeSliders.init(); diff --git a/_dev/js/listing/components/filters/RangeSlider.js b/_dev/js/listing/components/filters/RangeSlider.js index cc9a1739..90d282c1 100644 --- a/_dev/js/listing/components/filters/RangeSlider.js +++ b/_dev/js/listing/components/filters/RangeSlider.js @@ -2,7 +2,7 @@ import prestashop from 'prestashop'; import noUiSlider from 'nouislider'; import wNumb from 'wnumb'; import FiltersUrlHandler from './FiltersUrlHandler'; -import useEvent from '../../../utils/event/useEvent'; +import { on, off } from '../../../utils/event/eventHandler'; class RangeSlider { constructor(element) { @@ -92,7 +92,6 @@ class RangeSlider { } setEvents() { - const { on, off } = useEvent(); this.sliderHandler.off('set', this.constructor.handlerSliderSet); this.sliderHandler.on('set', this.constructor.handlerSliderSet); this.sliderHandler.off('update', this.handlerSliderUpdate); diff --git a/_dev/js/theme/components/header/useTopMenu.js b/_dev/js/theme/components/header/useTopMenu.js index 10cab9a9..095e257b 100644 --- a/_dev/js/theme/components/header/useTopMenu.js +++ b/_dev/js/theme/components/header/useTopMenu.js @@ -1,7 +1,6 @@ -import useEvent from '../../../utils/event/useEvent'; +import { on, off } from '../../../utils/event/eventHandler'; const useTopMenu = (selector) => { - const { on, off } = useEvent(); const menuElement = document.querySelector(selector); const DOM_SELECTORS = { SUB_ELEMENTS: '.main-menu__item--top', diff --git a/_dev/js/theme/core/address/addressController.js b/_dev/js/theme/core/address/addressController.js index 4660961b..a81a6691 100644 --- a/_dev/js/theme/core/address/addressController.js +++ b/_dev/js/theme/core/address/addressController.js @@ -1,4 +1,4 @@ -import useEvent from '../../../utils/event/useEvent'; +import { on } from '../../../utils/event/eventHandler'; import changeAddressCountryHandler from './handler/changeAddressCountryHandler'; /** @@ -6,8 +6,6 @@ import changeAddressCountryHandler from './handler/changeAddressCountryHandler'; * @property {function} init - Initializes the address controller. */ -const { on } = useEvent(); - /** * Creates an address controller. * diff --git a/_dev/js/theme/core/cart/cartController.js b/_dev/js/theme/core/cart/cartController.js index e9240866..2357c0f0 100644 --- a/_dev/js/theme/core/cart/cartController.js +++ b/_dev/js/theme/core/cart/cartController.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import useEvent from '../../../utils/event/useEvent'; +import { on } from '../../../utils/event/eventHandler'; import submitVoucherHandler from './handler/voucher/submitVoucherHandler'; import codeLinkSubmitHandler from './handler/voucher/codeLinkSubmitHandler'; import deleteVoucherHandler from './handler/voucher/deleteVoucherHandler'; @@ -11,8 +11,6 @@ import updatedCartHandler from './handler/cart/updatedCartHandler'; import cartErrorsHandler from './handler/cart/cartErrorsHandler'; import useCustomQuantityInput from '../../components/useCustomQuantityInput'; -const { on } = useEvent(); - /** * The Cart Controller manages interactions and events related to the shopping cart. * @namespace cartController diff --git a/_dev/js/theme/core/product/productController.js b/_dev/js/theme/core/product/productController.js index e287708d..ed0a8dff 100644 --- a/_dev/js/theme/core/product/productController.js +++ b/_dev/js/theme/core/product/productController.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import useEvent from '../../../utils/event/useEvent'; +import { on } from '../../../utils/event/eventHandler'; import quickViewClickHandler from './handler/quickView/quickViewClickHandler'; import quickViewHandler from './handler/quickView/quickViewHandler'; import productUpdateErrorHandler from './handler/product/productUpdateErrorHandler'; @@ -9,7 +9,6 @@ import updatedProductHandler from './handler/product/updatedProductHandler'; import updateProductHandler from './handler/product/updateProductHandler'; import productFormChangeHandler from './handler/product/productFormChangeHandler'; -const { on } = useEvent(); const { persist } = productFormDataPersister(); /** diff --git a/_dev/js/utils/dynamicImports/useDynamicImportEventsHandler.js b/_dev/js/utils/dynamicImports/useDynamicImportEventsHandler.js index b9a5c705..8b7264d4 100644 --- a/_dev/js/utils/dynamicImports/useDynamicImportEventsHandler.js +++ b/_dev/js/utils/dynamicImports/useDynamicImportEventsHandler.js @@ -1,6 +1,4 @@ -import useEvent from '../event/useEvent'; - -const { on, off } = useEvent(); +import { on, off } from '../event/eventHandler'; /** * Handles dynamic import events by binding and unbinding specified events on the document. diff --git a/_dev/js/utils/event/eventHandler.js b/_dev/js/utils/event/eventHandler.js new file mode 100644 index 00000000..9e7567f0 --- /dev/null +++ b/_dev/js/utils/event/eventHandler.js @@ -0,0 +1,45 @@ +import EventHandler from 'bootstrap/js/src/dom/event-handler'; + + +/** + * Add event handler + * @param element {HTMLElement|Document|Window} + * @param eventName {string} + * @param handlerOrDelegation {string|function} + * @param handler {function} + */ +export const on = (element, eventName, handlerOrDelegation, handler) => { + EventHandler.on(element, eventName, handlerOrDelegation, handler); +}; + +/** + * Add event handler that will be executed only once + * @param element {HTMLElement|Document|Window} + * @param eventName {string} + * @param handlerOrDelegation {string|function} + * @param handler {function} + */ +export const one = (element, eventName, handlerOrDelegation, handler) => { + EventHandler.one(element, eventName, handlerOrDelegation, handler); +}; + +/** + * Remove event handler + * @param element {HTMLElement|Document|Window} + * @param eventName {string} + * @param handlerOrDelegation {string|function} + * @param handler {function} + */ +export const off = (element, eventName, handlerOrDelegation, handler) => { + EventHandler.off(element, eventName, handlerOrDelegation, handler); +}; + +/** + * Trigger event + * @param element {HTMLElement} + * @param eventName {string} + * @param args {object} + */ +export const trigger = (element, eventName, args = {}) => { + EventHandler.trigger(element, eventName, args); +}; diff --git a/_dev/js/utils/event/useEvent.js b/_dev/js/utils/event/useEvent.js deleted file mode 100644 index d05c8179..00000000 --- a/_dev/js/utils/event/useEvent.js +++ /dev/null @@ -1,59 +0,0 @@ -import EventHandler from 'bootstrap/js/src/dom/event-handler'; - -/** - * Function that will help you to add/remove/trigger events - * @returns {{one, trigger, off, on}} - */ -const useEvent = () => { - /** - * Add event handler - * @param element {HTMLElement} - * @param eventName {string} - * @param handlerOrDelegation {string|function} - * @param handler {function} - */ - const on = (element, eventName, handlerOrDelegation, handler) => { - EventHandler.on(element, eventName, handlerOrDelegation, handler); - }; - - /** - * Add event handler that will be executed only once - * @param element {HTMLElement} - * @param eventName {string} - * @param handlerOrDelegation {string|function} - * @param handler {function} - */ - const one = (element, eventName, handlerOrDelegation, handler) => { - EventHandler.one(element, eventName, handlerOrDelegation, handler); - }; - - /** - * Remove event handler - * @param element {HTMLElement} - * @param eventName {string} - * @param handlerOrDelegation {string|function} - * @param handler {function} - */ - const off = (element, eventName, handlerOrDelegation, handler) => { - EventHandler.off(element, eventName, handlerOrDelegation, handler); - }; - - /** - * Trigger event - * @param element {HTMLElement} - * @param eventName {string} - * @param args {object} - */ - const trigger = (element, eventName, args = {}) => { - EventHandler.trigger(element, eventName, args); - }; - - return { - on, - off, - one, - trigger, - }; -}; - -export default useEvent;