diff --git a/_dev/css/theme/components/_index.scss b/_dev/css/theme/components/_index.scss index 22c276d3..34450a05 100644 --- a/_dev/css/theme/components/_index.scss +++ b/_dev/css/theme/components/_index.scss @@ -9,5 +9,4 @@ @import "search/index"; @import "page-loader/index"; @import "links-list/index"; -@import "lazyload/index"; @import "alert-toast/index"; diff --git a/_dev/css/theme/components/lazyload/_index.scss b/_dev/css/theme/components/lazyload/_index.scss deleted file mode 100644 index 1ce293c7..00000000 --- a/_dev/css/theme/components/lazyload/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import "lazyload"; diff --git a/_dev/css/theme/components/lazyload/_lazyload.scss b/_dev/css/theme/components/lazyload/_lazyload.scss deleted file mode 100644 index 78dc3128..00000000 --- a/_dev/css/theme/components/lazyload/_lazyload.scss +++ /dev/null @@ -1,5 +0,0 @@ -img.lazyload { - &:not(.loaded) { - background: $gray-200; - } -} diff --git a/_dev/js/checkout.js b/_dev/js/checkout.js index 81820aab..b0a5cbb0 100644 --- a/_dev/js/checkout.js +++ b/_dev/js/checkout.js @@ -1 +1 @@ -import '@js/checkout/index'; +import './checkout/index'; diff --git a/_dev/js/theme/core/checkout/checkoutController.js b/_dev/js/checkout/core/checkout/checkoutController.js similarity index 96% rename from _dev/js/theme/core/checkout/checkoutController.js rename to _dev/js/checkout/core/checkout/checkoutController.js index 050ed0b1..f41d2c86 100644 --- a/_dev/js/theme/core/checkout/checkoutController.js +++ b/_dev/js/checkout/core/checkout/checkoutController.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import useEvent from '../../components/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/theme/core/checkout/components/useCheckoutStepsController.js b/_dev/js/checkout/core/checkout/components/useCheckoutStepsController.js similarity index 98% rename from _dev/js/theme/core/checkout/components/useCheckoutStepsController.js rename to _dev/js/checkout/core/checkout/components/useCheckoutStepsController.js index 20eaea41..10bc49fc 100644 --- a/_dev/js/theme/core/checkout/components/useCheckoutStepsController.js +++ b/_dev/js/checkout/core/checkout/components/useCheckoutStepsController.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import { getAllSiblingsBeforeElement, getAllSiblingsAfterElement } from '../../../utils/DOMSelectorsHelper'; +import { getAllSiblingsBeforeElement, getAllSiblingsAfterElement } from '../../../../utils/DOM/DOMSelectorsHelper'; /** * A utility function to control checkout steps in Prestashop. diff --git a/_dev/js/theme/core/checkout/handler/address/changeAddressHandler.js b/_dev/js/checkout/core/checkout/handler/address/changeAddressHandler.js similarity index 92% rename from _dev/js/theme/core/checkout/handler/address/changeAddressHandler.js rename to _dev/js/checkout/core/checkout/handler/address/changeAddressHandler.js index d634dd2b..174e3632 100644 --- a/_dev/js/theme/core/checkout/handler/address/changeAddressHandler.js +++ b/_dev/js/checkout/core/checkout/handler/address/changeAddressHandler.js @@ -1,9 +1,9 @@ import prestashop from 'prestashop'; -import useToggleDisplay from '../../../../components/display/useToggleDisplay'; +import useToggleDisplay from '../../../../../utils/display/useToggleDisplay'; import switchEditAddressButtonColor from '../../utils/switchEditAddressButtonColor'; import getEditAddress from '../../utils/getEditAddress'; import switchConfirmAddressesButtonState from '../../utils/switchConfirmAddressesButtonState'; -import { isElementVisible, each } from '../../../../utils/DOMHelpers'; +import { isElementVisible, each } from '../../../../../utils/DOM/DOMHelpers'; /** * Handles the change event for address selection in the Prestashop checkout process. diff --git a/_dev/js/theme/core/checkout/handler/address/editAddressHandler.js b/_dev/js/checkout/core/checkout/handler/address/editAddressHandler.js similarity index 100% rename from _dev/js/theme/core/checkout/handler/address/editAddressHandler.js rename to _dev/js/checkout/core/checkout/handler/address/editAddressHandler.js diff --git a/_dev/js/theme/core/checkout/handler/address/showAddressErrorMessageHandler.js b/_dev/js/checkout/core/checkout/handler/address/showAddressErrorMessageHandler.js similarity index 90% rename from _dev/js/theme/core/checkout/handler/address/showAddressErrorMessageHandler.js rename to _dev/js/checkout/core/checkout/handler/address/showAddressErrorMessageHandler.js index 12d65f4c..b6377b6b 100644 --- a/_dev/js/theme/core/checkout/handler/address/showAddressErrorMessageHandler.js +++ b/_dev/js/checkout/core/checkout/handler/address/showAddressErrorMessageHandler.js @@ -1,8 +1,8 @@ import prestashop from 'prestashop'; -import useToggleDisplay from '../../../../components/display/useToggleDisplay'; +import useToggleDisplay from '../../../../../utils/display/useToggleDisplay'; import switchConfirmAddressesButtonState from '../../utils/switchConfirmAddressesButtonState'; import switchEditAddressButtonColor from '../../utils/switchEditAddressButtonColor'; -import { isElementVisible } from '../../../../utils/DOMHelpers'; +import { isElementVisible } from '../../../../../utils/DOM/DOMHelpers'; import getEditAddress from '../../utils/getEditAddress'; /** diff --git a/_dev/js/theme/core/checkout/handler/delivery/changeDeliveryMethodHandler.js b/_dev/js/checkout/core/checkout/handler/delivery/changeDeliveryMethodHandler.js similarity index 93% rename from _dev/js/theme/core/checkout/handler/delivery/changeDeliveryMethodHandler.js rename to _dev/js/checkout/core/checkout/handler/delivery/changeDeliveryMethodHandler.js index 0e6d2cea..0819d0f1 100644 --- a/_dev/js/theme/core/checkout/handler/delivery/changeDeliveryMethodHandler.js +++ b/_dev/js/checkout/core/checkout/handler/delivery/changeDeliveryMethodHandler.js @@ -1,9 +1,8 @@ import prestashop from 'prestashop'; -import { formSerializeArray, fromSerializeObject } from '../../../../utils/formSerialize'; +import { formSerializeArray, fromSerializeObject } from '../../../../../utils/form/formSerialize'; import selectDeliveryMethodRequest from '../../request/selectDeliveryMethodRequest'; -import parseToHtml from '../../../../utils/parseToHtml'; import refreshCheckoutPage from '../../utils/refreshCheckoutPage'; -import { each } from '../../../../utils/DOMHelpers'; +import { each, parseToHtml } from '../../../../../utils/DOM/DOMHelpers'; /** * Handles the change of delivery method in the Prestashop checkout process. diff --git a/_dev/js/theme/core/checkout/handler/delivery/editDeliveryStepHandler.js b/_dev/js/checkout/core/checkout/handler/delivery/editDeliveryStepHandler.js similarity index 100% rename from _dev/js/theme/core/checkout/handler/delivery/editDeliveryStepHandler.js rename to _dev/js/checkout/core/checkout/handler/delivery/editDeliveryStepHandler.js diff --git a/_dev/js/theme/core/checkout/handler/payment/confirmOrderHandler.js b/_dev/js/checkout/core/checkout/handler/payment/confirmOrderHandler.js similarity index 96% rename from _dev/js/theme/core/checkout/handler/payment/confirmOrderHandler.js rename to _dev/js/checkout/core/checkout/handler/payment/confirmOrderHandler.js index 6a3c77f0..36bcffd8 100644 --- a/_dev/js/theme/core/checkout/handler/payment/confirmOrderHandler.js +++ b/_dev/js/checkout/core/checkout/handler/payment/confirmOrderHandler.js @@ -3,7 +3,7 @@ import getSelectedPaymentOption from '../../utils/getSelectedPaymentOption'; import canProceedOrder from '../../utils/canProceedOrder'; import checkCartStillOrderableRequest from '../../request/checkCartStillOrderableRequest'; import toggleOrderConfirmationButtonState from '../../utils/toggleOrderConfirmationButtonState'; -import { each } from '../../../../utils/DOMHelpers'; +import { each } from '../../../../../utils/DOM/DOMHelpers'; const showNativeFormErrors = () => { const { termsCheckboxSelector } = prestashop.selectors.checkout; diff --git a/_dev/js/theme/core/checkout/handler/payment/orderConfirmationErrorsHandler.js b/_dev/js/checkout/core/checkout/handler/payment/orderConfirmationErrorsHandler.js similarity index 100% rename from _dev/js/theme/core/checkout/handler/payment/orderConfirmationErrorsHandler.js rename to _dev/js/checkout/core/checkout/handler/payment/orderConfirmationErrorsHandler.js diff --git a/_dev/js/theme/core/checkout/handler/payment/toggleOrderButtonStateHandler.js b/_dev/js/checkout/core/checkout/handler/payment/toggleOrderButtonStateHandler.js similarity index 85% rename from _dev/js/theme/core/checkout/handler/payment/toggleOrderButtonStateHandler.js rename to _dev/js/checkout/core/checkout/handler/payment/toggleOrderButtonStateHandler.js index 5cd6c560..7db34285 100644 --- a/_dev/js/theme/core/checkout/handler/payment/toggleOrderButtonStateHandler.js +++ b/_dev/js/checkout/core/checkout/handler/payment/toggleOrderButtonStateHandler.js @@ -1,8 +1,8 @@ import prestashop from 'prestashop'; -import useToggleDisplay from '../../../../components/display/useToggleDisplay'; +import useToggleDisplay from '../../../../../utils/display/useToggleDisplay'; import canProceedOrder from '../../utils/canProceedOrder'; import toggleOrderConfirmationButtonState from '../../utils/toggleOrderConfirmationButtonState'; -import { each } from '../../../../utils/DOMHelpers'; +import { each } from '../../../../../utils/DOM/DOMHelpers'; const { toggle } = useToggleDisplay(); diff --git a/_dev/js/theme/core/checkout/handler/payment/togglePaymentOptionsHandler.js b/_dev/js/checkout/core/checkout/handler/payment/togglePaymentOptionsHandler.js similarity index 87% rename from _dev/js/theme/core/checkout/handler/payment/togglePaymentOptionsHandler.js rename to _dev/js/checkout/core/checkout/handler/payment/togglePaymentOptionsHandler.js index 17200098..81f68f01 100644 --- a/_dev/js/theme/core/checkout/handler/payment/togglePaymentOptionsHandler.js +++ b/_dev/js/checkout/core/checkout/handler/payment/togglePaymentOptionsHandler.js @@ -1,9 +1,9 @@ import collapseAllPaymentOptions from '../../utils/collapseAllPaymentOptions'; import getSelectedPaymentOption from '../../utils/getSelectedPaymentOption'; -import useToggleDisplay from '../../../../components/display/useToggleDisplay'; +import useToggleDisplay from '../../../../../utils/display/useToggleDisplay'; import canProceedOrder from '../../utils/canProceedOrder'; import toggleOrderConfirmationButtonState from '../../utils/toggleOrderConfirmationButtonState'; -import { each } from '../../../../utils/DOMHelpers'; +import { each } from '../../../../../utils/DOM/DOMHelpers'; const { show } = useToggleDisplay(); diff --git a/_dev/js/theme/core/checkout/handler/process/checkoutFormSubmitHandler.js b/_dev/js/checkout/core/checkout/handler/process/checkoutFormSubmitHandler.js similarity index 90% rename from _dev/js/theme/core/checkout/handler/process/checkoutFormSubmitHandler.js rename to _dev/js/checkout/core/checkout/handler/process/checkoutFormSubmitHandler.js index 9df23b9e..51b21845 100644 --- a/_dev/js/theme/core/checkout/handler/process/checkoutFormSubmitHandler.js +++ b/_dev/js/checkout/core/checkout/handler/process/checkoutFormSubmitHandler.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import { each } from '../../../../utils/DOMHelpers'; +import { each } from '../../../../../utils/DOM/DOMHelpers'; /** * Handles the submission of the checkout form, disables submit buttons, and emits a 'submitCheckoutForm' event. diff --git a/_dev/js/theme/core/checkout/handler/process/checkoutStepChangeHandler.js b/_dev/js/checkout/core/checkout/handler/process/checkoutStepChangeHandler.js similarity index 100% rename from _dev/js/theme/core/checkout/handler/process/checkoutStepChangeHandler.js rename to _dev/js/checkout/core/checkout/handler/process/checkoutStepChangeHandler.js diff --git a/_dev/js/theme/core/checkout/index.js b/_dev/js/checkout/core/checkout/index.js similarity index 94% rename from _dev/js/theme/core/checkout/index.js rename to _dev/js/checkout/core/checkout/index.js index ffa7b897..eb52d287 100644 --- a/_dev/js/theme/core/checkout/index.js +++ b/_dev/js/checkout/core/checkout/index.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import DOMReady from '../../utils/DOMReady'; +import { DOMReady } from '../../../utils/DOM/DOMHelpers'; import checkoutController from './checkoutController'; diff --git a/_dev/js/theme/core/checkout/request/checkCartStillOrderableRequest.js b/_dev/js/checkout/core/checkout/request/checkCartStillOrderableRequest.js similarity index 91% rename from _dev/js/theme/core/checkout/request/checkCartStillOrderableRequest.js rename to _dev/js/checkout/core/checkout/request/checkCartStillOrderableRequest.js index 660644eb..e4236778 100644 --- a/_dev/js/theme/core/checkout/request/checkCartStillOrderableRequest.js +++ b/_dev/js/checkout/core/checkout/request/checkCartStillOrderableRequest.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import useDefaultHttpRequest from '../../../components/http/useDefaultHttpRequest'; +import useDefaultHttpRequest from '../../../../utils/http/useDefaultHttpRequest'; /** * Represents the server response from a check cart still orderable request. diff --git a/_dev/js/theme/core/checkout/request/selectDeliveryMethodRequest.js b/_dev/js/checkout/core/checkout/request/selectDeliveryMethodRequest.js similarity index 94% rename from _dev/js/theme/core/checkout/request/selectDeliveryMethodRequest.js rename to _dev/js/checkout/core/checkout/request/selectDeliveryMethodRequest.js index 8198eed5..2371449b 100644 --- a/_dev/js/theme/core/checkout/request/selectDeliveryMethodRequest.js +++ b/_dev/js/checkout/core/checkout/request/selectDeliveryMethodRequest.js @@ -1,4 +1,4 @@ -import useDefaultHttpRequest from '../../../components/http/useDefaultHttpRequest'; +import useDefaultHttpRequest from '../../../../utils/http/useDefaultHttpRequest'; /** * Represents the server response from a select delivery method request. diff --git a/_dev/js/theme/core/checkout/utils/areConditionsAccepted.js b/_dev/js/checkout/core/checkout/utils/areConditionsAccepted.js similarity index 95% rename from _dev/js/theme/core/checkout/utils/areConditionsAccepted.js rename to _dev/js/checkout/core/checkout/utils/areConditionsAccepted.js index 93d037cb..32f1817b 100644 --- a/_dev/js/theme/core/checkout/utils/areConditionsAccepted.js +++ b/_dev/js/checkout/core/checkout/utils/areConditionsAccepted.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import { each } from '../../../utils/DOMHelpers'; +import { each } from '../../../../utils/DOM/DOMHelpers'; /** * Checks if all conditions are accepted. diff --git a/_dev/js/theme/core/checkout/utils/canProceedOrder.js b/_dev/js/checkout/core/checkout/utils/canProceedOrder.js similarity index 100% rename from _dev/js/theme/core/checkout/utils/canProceedOrder.js rename to _dev/js/checkout/core/checkout/utils/canProceedOrder.js diff --git a/_dev/js/theme/core/checkout/utils/collapseAllPaymentOptions.js b/_dev/js/checkout/core/checkout/utils/collapseAllPaymentOptions.js similarity index 88% rename from _dev/js/theme/core/checkout/utils/collapseAllPaymentOptions.js rename to _dev/js/checkout/core/checkout/utils/collapseAllPaymentOptions.js index 76a5ea78..a4726490 100644 --- a/_dev/js/theme/core/checkout/utils/collapseAllPaymentOptions.js +++ b/_dev/js/checkout/core/checkout/utils/collapseAllPaymentOptions.js @@ -1,6 +1,6 @@ import prestashop from 'prestashop'; -import { each } from '../../../utils/DOMHelpers'; -import useToggleDisplay from '../../../components/display/useToggleDisplay'; +import { each } from '../../../../utils/DOM/DOMHelpers'; +import useToggleDisplay from '../../../../utils/display/useToggleDisplay'; /** * Collapses all payment options' additional information blocks and options forms. diff --git a/_dev/js/theme/core/checkout/utils/getEditAddress.js b/_dev/js/checkout/core/checkout/utils/getEditAddress.js similarity index 100% rename from _dev/js/theme/core/checkout/utils/getEditAddress.js rename to _dev/js/checkout/core/checkout/utils/getEditAddress.js diff --git a/_dev/js/theme/core/checkout/utils/getSelectedPaymentOption.js b/_dev/js/checkout/core/checkout/utils/getSelectedPaymentOption.js similarity index 100% rename from _dev/js/theme/core/checkout/utils/getSelectedPaymentOption.js rename to _dev/js/checkout/core/checkout/utils/getSelectedPaymentOption.js diff --git a/_dev/js/theme/core/checkout/utils/refreshCheckoutPage.js b/_dev/js/checkout/core/checkout/utils/refreshCheckoutPage.js similarity index 100% rename from _dev/js/theme/core/checkout/utils/refreshCheckoutPage.js rename to _dev/js/checkout/core/checkout/utils/refreshCheckoutPage.js diff --git a/_dev/js/theme/core/checkout/utils/switchConfirmAddressesButtonState.js b/_dev/js/checkout/core/checkout/utils/switchConfirmAddressesButtonState.js similarity index 86% rename from _dev/js/theme/core/checkout/utils/switchConfirmAddressesButtonState.js rename to _dev/js/checkout/core/checkout/utils/switchConfirmAddressesButtonState.js index 3869f540..3475b5aa 100644 --- a/_dev/js/theme/core/checkout/utils/switchConfirmAddressesButtonState.js +++ b/_dev/js/checkout/core/checkout/utils/switchConfirmAddressesButtonState.js @@ -1,4 +1,4 @@ -import { each } from '../../../utils/DOMHelpers'; +import { each } from '../../../../utils/DOM/DOMHelpers'; /** * Switches the state of the confirm addresses button. diff --git a/_dev/js/theme/core/checkout/utils/switchEditAddressButtonColor.js b/_dev/js/checkout/core/checkout/utils/switchEditAddressButtonColor.js similarity index 93% rename from _dev/js/theme/core/checkout/utils/switchEditAddressButtonColor.js rename to _dev/js/checkout/core/checkout/utils/switchEditAddressButtonColor.js index 9e2a9cd2..c44e8c53 100644 --- a/_dev/js/theme/core/checkout/utils/switchEditAddressButtonColor.js +++ b/_dev/js/checkout/core/checkout/utils/switchEditAddressButtonColor.js @@ -1,4 +1,4 @@ -import { each } from '../../../utils/DOMHelpers'; +import { each } from '../../../../utils/DOM/DOMHelpers'; /** * Changes the color of the edit button for the wrong address. diff --git a/_dev/js/theme/core/checkout/utils/toggleOrderConfirmationButtonState.js b/_dev/js/checkout/core/checkout/utils/toggleOrderConfirmationButtonState.js similarity index 100% rename from _dev/js/theme/core/checkout/utils/toggleOrderConfirmationButtonState.js rename to _dev/js/checkout/core/checkout/utils/toggleOrderConfirmationButtonState.js diff --git a/_dev/js/checkout/index.js b/_dev/js/checkout/index.js index 38d57f4f..6be74d7e 100644 --- a/_dev/js/checkout/index.js +++ b/_dev/js/checkout/index.js @@ -1,11 +1,8 @@ import prestashop from 'prestashop'; -import useEvent from '../theme/components/event/useEvent'; -import parseToHtml from '../theme/utils/parseToHtml'; -import useHttpRequest from '../theme/components/http/useHttpRequest'; -import { each } from '../theme/utils/DOMHelpers'; -import DOMReady from '../theme/utils/DOMReady'; - -const { on } = 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'; function setUpCheckout() { const clickTermLinkHandler = async (event) => { diff --git a/_dev/js/listing.js b/_dev/js/listing.js index 410a2cb5..7c6be154 100644 --- a/_dev/js/listing.js +++ b/_dev/js/listing.js @@ -1 +1 @@ -import '@js/listing/index'; +import './listing/index'; diff --git a/_dev/js/listing/components/filters/Filters.js b/_dev/js/listing/components/filters/Filters.js index 2178b3a4..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 '../../../theme/components/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/FiltersRangeSliders.js b/_dev/js/listing/components/filters/FiltersRangeSliders.js index bee2e052..91a7becf 100644 --- a/_dev/js/listing/components/filters/FiltersRangeSliders.js +++ b/_dev/js/listing/components/filters/FiltersRangeSliders.js @@ -1,5 +1,5 @@ import RangeSlider from './RangeSlider'; -import { each } from '../../../theme/utils/DOMHelpers'; +import { each } from '../../../utils/DOM/DOMHelpers'; class FiltersRangeSliders { static init() { diff --git a/_dev/js/listing/components/filters/RangeSlider.js b/_dev/js/listing/components/filters/RangeSlider.js index 5eae465a..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 '../../../theme/components/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/listing/index.js b/_dev/js/listing/index.js index 705c8f27..28e5e92c 100644 --- a/_dev/js/listing/index.js +++ b/_dev/js/listing/index.js @@ -1,8 +1,6 @@ import prestashop from 'prestashop'; -import Filters from '@js/listing/components/filters/Filters'; -import parseToHtml from '../theme/utils/parseToHtml'; -import { each } from '../theme/utils/DOMHelpers'; -import DOMReady from '../theme/utils/DOMReady'; +import Filters from './components/filters/Filters'; +import { each, parseToHtml, DOMReady } from '../utils/DOM/DOMHelpers'; function updateProductListDOM(data) { each(prestashop.selectors.listing.searchFilters, (el) => { diff --git a/_dev/js/product.js b/_dev/js/product.js index 10a95714..7729838c 100644 --- a/_dev/js/product.js +++ b/_dev/js/product.js @@ -1 +1 @@ -import '@js/product/index'; +import './product/index'; diff --git a/_dev/js/product/index.js b/_dev/js/product/index.js index d8d0af7a..e58cbe80 100644 --- a/_dev/js/product/index.js +++ b/_dev/js/product/index.js @@ -1,5 +1,5 @@ import ProductGallery from './components/ProductGallery'; -import DOMReady from '../theme/utils/DOMReady'; +import { DOMReady } from '../utils/DOM/DOMHelpers'; DOMReady(() => { const gallery = new ProductGallery(); diff --git a/_dev/js/theme.js b/_dev/js/theme.js index ee6c13f4..e3cfd59b 100644 --- a/_dev/js/theme.js +++ b/_dev/js/theme.js @@ -1 +1 @@ -import '@js/theme/index'; +import './theme/index'; diff --git a/_dev/js/theme/components/Lazyload.js b/_dev/js/theme/components/Lazyload.js deleted file mode 100644 index 1a0eb120..00000000 --- a/_dev/js/theme/components/Lazyload.js +++ /dev/null @@ -1,21 +0,0 @@ -import LazyLoad from 'vanilla-lazyload'; - -class PageLazyLoad { - constructor({ selector = '.lazyload' } = {}) { - this.selector = selector; - this.lazyLoadInstance = null; - this.init(); - } - - init() { - this.lazyLoadInstance = new LazyLoad({ - elements_selector: this.selector, - }); - } - - update() { - this.lazyLoadInstance.update(); - } -} - -export default PageLazyLoad; diff --git a/_dev/js/theme/components/customer/index.js b/_dev/js/theme/components/customer/index.js index 16f745b3..fbfb62b8 100644 --- a/_dev/js/theme/components/customer/index.js +++ b/_dev/js/theme/components/customer/index.js @@ -1,4 +1,4 @@ -import DOMReady from '../../utils/DOMReady'; +import { DOMReady } from '../../../utils/DOM/DOMHelpers'; const initCustomerLinksTriggerActive = () => { const url = window.location.pathname; diff --git a/_dev/js/theme/components/dynamic-bootstrap-components.js b/_dev/js/theme/components/dynamic-bootstrap-components.js index 71dba35e..3410af63 100644 --- a/_dev/js/theme/components/dynamic-bootstrap-components.js +++ b/_dev/js/theme/components/dynamic-bootstrap-components.js @@ -1,5 +1,5 @@ -import DOMReady from '../utils/DOMReady'; -import useBootstrapComponentDynamicImport from '../utils/dynamicImports/useBootstrapComponentDynamicImport'; +import { DOMReady } from '../../utils/DOM/DOMHelpers'; +import useBootstrapComponentDynamicImport from '../../utils/dynamicImports/useBootstrapComponentDynamicImport'; DOMReady(() => { const { init: initDynamicImportForModal } = useBootstrapComponentDynamicImport( diff --git a/_dev/js/theme/components/event/useEvent.js b/_dev/js/theme/components/event/useEvent.js deleted file mode 100644 index d05c8179..00000000 --- a/_dev/js/theme/components/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; diff --git a/_dev/js/theme/components/header/index.js b/_dev/js/theme/components/header/index.js index 47e25dd9..0893c440 100644 --- a/_dev/js/theme/components/header/index.js +++ b/_dev/js/theme/components/header/index.js @@ -1,4 +1,4 @@ -import DOMReady from '../../utils/DOMReady'; +import { DOMReady } from '../../../utils/DOM/DOMHelpers'; import useTopMenu from './useTopMenu'; import useStickyElement from '../useStickyElement'; diff --git a/_dev/js/theme/components/header/useTopMenu.js b/_dev/js/theme/components/header/useTopMenu.js index e8556369..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 '../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/components/product.js b/_dev/js/theme/components/product.js index 23242ff8..d0509a03 100644 --- a/_dev/js/theme/components/product.js +++ b/_dev/js/theme/components/product.js @@ -1,8 +1,6 @@ import prestashop from 'prestashop'; import useCustomQuantityInput from './useCustomQuantityInput'; -import { each } from '../utils/DOMHelpers'; -import parseToHtml from '../utils/parseToHtml'; -import DOMReady from '../utils/DOMReady'; +import { each, parseToHtml, DOMReady } from '../../utils/DOM/DOMHelpers'; import productEventContextSelector from '../core/product/utils/productEventContextSelector'; DOMReady(() => { diff --git a/_dev/js/theme/components/quickview.js b/_dev/js/theme/components/quickview.js index 9b87d747..3aeeba7d 100644 --- a/_dev/js/theme/components/quickview.js +++ b/_dev/js/theme/components/quickview.js @@ -1,6 +1,5 @@ import prestashop from 'prestashop'; -import DOMReady from '../utils/DOMReady'; -import parseToHtml from '../utils/parseToHtml'; +import { DOMReady, parseToHtml } from '../../utils/DOM/DOMHelpers'; /** * Handle open quick view diff --git a/_dev/js/theme/components/responsive.js b/_dev/js/theme/components/responsive.js index fe4eff35..b28f7288 100644 --- a/_dev/js/theme/components/responsive.js +++ b/_dev/js/theme/components/responsive.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import DOMReady from '../utils/DOMReady'; +import { DOMReady } from '../../utils/DOM/DOMHelpers'; function isMobile() { return prestashop.responsive.current_width < prestashop.responsive.min_width; diff --git a/_dev/js/theme/components/sliders/PageSlider.js b/_dev/js/theme/components/sliders/PageSlider.js index 1c081840..51a6fa45 100644 --- a/_dev/js/theme/components/sliders/PageSlider.js +++ b/_dev/js/theme/components/sliders/PageSlider.js @@ -1,4 +1,4 @@ -import SwiperSlider from '@js/theme/components/sliders/SwiperSlider'; +import SwiperSlider from './SwiperSlider'; class PageSlider { constructor() { diff --git a/_dev/js/theme/components/sliders/index.js b/_dev/js/theme/components/sliders/index.js index ad4c1230..031caf65 100644 --- a/_dev/js/theme/components/sliders/index.js +++ b/_dev/js/theme/components/sliders/index.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import DOMReady from '../../utils/DOMReady'; +import { DOMReady } from '../../../utils/DOM/DOMHelpers'; import PageSlider from './PageSlider'; import SwiperSlider from './SwiperSlider'; diff --git a/_dev/js/theme/components/useAlertToast.js b/_dev/js/theme/components/useAlertToast.js index 0896d0f5..b1cced31 100644 --- a/_dev/js/theme/components/useAlertToast.js +++ b/_dev/js/theme/components/useAlertToast.js @@ -1,4 +1,4 @@ -import parseToHtml from '@js/theme/utils/parseToHtml'; +import { parseToHtml } from '../../utils/DOM/DOMHelpers'; let id = 0; diff --git a/_dev/js/theme/components/usePageLoader.js b/_dev/js/theme/components/usePageLoader.js index 72eb2ddb..f1037d8e 100644 --- a/_dev/js/theme/components/usePageLoader.js +++ b/_dev/js/theme/components/usePageLoader.js @@ -1,8 +1,12 @@ /** * A utility module for managing the page loader state. * - * @return {showLoader, hideLoader} + * @module usePageLoader + * @returns {Object} An object with methods to show and hide the page loader. + * @property {Function} showLoader - Displays the page loader. + * @property {Function} hideLoader - Hides the page loader. * @example + * // Usage example: * const pageLoader = usePageLoader(); * pageLoader.showLoader(); // Display the page loader * pageLoader.hideLoader(); // Hide the page loader @@ -14,7 +18,8 @@ const usePageLoader = () => { /** * Show the page loader. * - * @method showLoader + * @function + * @name showLoader * @returns {void} */ const showLoader = () => { @@ -24,7 +29,8 @@ const usePageLoader = () => { /** * Hide the page loader. * - * @method hideLoader + * @function + * @name hideLoader * @returns {void} */ const hideLoader = () => { diff --git a/_dev/js/theme/components/useStickyElement.js b/_dev/js/theme/components/useStickyElement.js index b3da4b55..4d910cbb 100644 --- a/_dev/js/theme/components/useStickyElement.js +++ b/_dev/js/theme/components/useStickyElement.js @@ -1,4 +1,4 @@ -import debounce from '../utils/debounce'; +import debounce from '../../utils/misc/debounce'; /** * Returns sticky element data diff --git a/_dev/js/theme/components/useThemeForm.js b/_dev/js/theme/components/useThemeForm.js index 73fa0146..179327e3 100644 --- a/_dev/js/theme/components/useThemeForm.js +++ b/_dev/js/theme/components/useThemeForm.js @@ -1,4 +1,4 @@ -import { each } from '../utils/DOMHelpers'; +import { each } from '../../utils/DOM/DOMHelpers'; const supportedValidity = () => { const input = document.createElement('input'); diff --git a/_dev/js/theme/core/address/addressController.js b/_dev/js/theme/core/address/addressController.js index bc52a619..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 '../../components/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/address/handler/changeAddressCountryHandler.js b/_dev/js/theme/core/address/handler/changeAddressCountryHandler.js index 750179b1..e54f9246 100644 --- a/_dev/js/theme/core/address/handler/changeAddressCountryHandler.js +++ b/_dev/js/theme/core/address/handler/changeAddressCountryHandler.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import parseToHtml from '../../../utils/parseToHtml'; +import { parseToHtml } from '../../../../utils/DOM/DOMHelpers'; import updateAddressRequest from '../request/updateAddressRequest'; /** diff --git a/_dev/js/theme/core/address/index.js b/_dev/js/theme/core/address/index.js index 0f8aaa4d..d150e3f4 100644 --- a/_dev/js/theme/core/address/index.js +++ b/_dev/js/theme/core/address/index.js @@ -1,5 +1,5 @@ import addressController from './addressController'; -import DOMReady from '../../utils/DOMReady'; +import { DOMReady } from '../../../utils/DOM/DOMHelpers'; const { init } = addressController(); diff --git a/_dev/js/theme/core/address/request/updateAddressRequest.js b/_dev/js/theme/core/address/request/updateAddressRequest.js index 722213fa..221330a8 100644 --- a/_dev/js/theme/core/address/request/updateAddressRequest.js +++ b/_dev/js/theme/core/address/request/updateAddressRequest.js @@ -1,7 +1,7 @@ -import useHttpRequest from '../../../components/http/useHttpRequest'; -import useHttpController from '../../../components/http/useHttpController'; -import useHttpPayloadDefinition from '../../../components/http/useHttpPayloadDefinition'; -import GenericHttpRequestError from '../../../components/http/error/GenericHttpRequestError'; +import useHttpRequest from '../../../../utils/http/useHttpRequest'; +import useHttpController from '../../../../utils/http/useHttpController'; +import useHttpPayloadDefinition from '../../../../utils/http/useHttpPayloadDefinition'; +import GenericHttpRequestError from '../../../../utils/http/error/GenericHttpRequestError'; /** * @typedef {Object} ServerResponse diff --git a/_dev/js/theme/core/cart/cartController.js b/_dev/js/theme/core/cart/cartController.js index b0859b7b..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 '../../components/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/cart/handler/cart/addToCartHandler.js b/_dev/js/theme/core/cart/handler/cart/addToCartHandler.js index 82ad31a6..c26ccf99 100644 --- a/_dev/js/theme/core/cart/handler/cart/addToCartHandler.js +++ b/_dev/js/theme/core/cart/handler/cart/addToCartHandler.js @@ -1,7 +1,7 @@ import prestashop from 'prestashop'; import useAlertToast from '../../../../components/useAlertToast'; import addToCartRequest from '../../request/cart/addToCartRequest'; -import sprintf from '../../../../utils/sprintf'; +import sprintf from '../../../../../utils/misc/sprintf'; const { danger } = useAlertToast(); diff --git a/_dev/js/theme/core/cart/handler/cart/updateCartHandler.js b/_dev/js/theme/core/cart/handler/cart/updateCartHandler.js index 443a1418..8ad8aca3 100644 --- a/_dev/js/theme/core/cart/handler/cart/updateCartHandler.js +++ b/_dev/js/theme/core/cart/handler/cart/updateCartHandler.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import parseToHtml from '../../../../utils/parseToHtml'; +import { parseToHtml } from '../../../../../utils/DOM/DOMHelpers'; import updateCartContentRequest from '../../request/cart/updateCartContentRequest'; /** diff --git a/_dev/js/theme/core/cart/handler/voucher/submitVoucherHandler.js b/_dev/js/theme/core/cart/handler/voucher/submitVoucherHandler.js index 9ef4dbcf..7a220ef8 100644 --- a/_dev/js/theme/core/cart/handler/voucher/submitVoucherHandler.js +++ b/_dev/js/theme/core/cart/handler/voucher/submitVoucherHandler.js @@ -1,6 +1,6 @@ import prestashop from 'prestashop'; import addVoucherToCartRequest from '../../request/voucher/addVoucherToCartRequest'; -import parseToHtml from '../../../../utils/parseToHtml'; +import { parseToHtml } from '../../../../../utils/DOM/DOMHelpers'; /** * Handles the submission of a voucher form and updates the cart accordingly. diff --git a/_dev/js/theme/core/cart/index.js b/_dev/js/theme/core/cart/index.js index 53486760..61a22c04 100644 --- a/_dev/js/theme/core/cart/index.js +++ b/_dev/js/theme/core/cart/index.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import DOMReady from '../../utils/DOMReady'; +import { DOMReady } from '../../../utils/DOM/DOMHelpers'; import cartController from './cartController'; prestashop.cart = prestashop.cart || {}; diff --git a/_dev/js/theme/core/cart/request/cart/addToCartRequest.js b/_dev/js/theme/core/cart/request/cart/addToCartRequest.js index 43664b0d..89a7f050 100644 --- a/_dev/js/theme/core/cart/request/cart/addToCartRequest.js +++ b/_dev/js/theme/core/cart/request/cart/addToCartRequest.js @@ -1,6 +1,6 @@ import prestashop from 'prestashop'; -import useDefaultHttpRequest from '../../../../components/http/useDefaultHttpRequest'; -import useHttpPayloadDefinition from '../../../../components/http/useHttpPayloadDefinition'; +import useDefaultHttpRequest from '../../../../../utils/http/useDefaultHttpRequest'; +import useHttpPayloadDefinition from '../../../../../utils/http/useHttpPayloadDefinition'; /** * @typedef {object} ServerResponse diff --git a/_dev/js/theme/core/cart/request/cart/deleteFromCartRequest.js b/_dev/js/theme/core/cart/request/cart/deleteFromCartRequest.js index 225eb1fe..ce2705ac 100644 --- a/_dev/js/theme/core/cart/request/cart/deleteFromCartRequest.js +++ b/_dev/js/theme/core/cart/request/cart/deleteFromCartRequest.js @@ -1,6 +1,6 @@ import prestashop from 'prestashop'; -import useDefaultHttpRequest from '../../../../components/http/useDefaultHttpRequest'; -import useHttpPayloadDefinition from '../../../../components/http/useHttpPayloadDefinition'; +import useDefaultHttpRequest from '../../../../../utils/http/useDefaultHttpRequest'; +import useHttpPayloadDefinition from '../../../../../utils/http/useHttpPayloadDefinition'; /** * @typedef {object} ServerResponse diff --git a/_dev/js/theme/core/cart/request/cart/quantityChangeRequest.js b/_dev/js/theme/core/cart/request/cart/quantityChangeRequest.js index 10e5dede..97620664 100644 --- a/_dev/js/theme/core/cart/request/cart/quantityChangeRequest.js +++ b/_dev/js/theme/core/cart/request/cart/quantityChangeRequest.js @@ -1,6 +1,6 @@ import prestashop from 'prestashop'; -import useDefaultHttpRequest from '../../../../components/http/useDefaultHttpRequest'; -import useHttpPayloadDefinition from '../../../../components/http/useHttpPayloadDefinition'; +import useDefaultHttpRequest from '../../../../../utils/http/useDefaultHttpRequest'; +import useHttpPayloadDefinition from '../../../../../utils/http/useHttpPayloadDefinition'; /** * @typedef {object} ServerResponse diff --git a/_dev/js/theme/core/cart/request/cart/updateCartContentRequest.js b/_dev/js/theme/core/cart/request/cart/updateCartContentRequest.js index abc953d8..706b4381 100644 --- a/_dev/js/theme/core/cart/request/cart/updateCartContentRequest.js +++ b/_dev/js/theme/core/cart/request/cart/updateCartContentRequest.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import useDefaultHttpRequest from '../../../../components/http/useDefaultHttpRequest'; +import useDefaultHttpRequest from '../../../../../utils/http/useDefaultHttpRequest'; /** * @typedef {object} ServerResponse diff --git a/_dev/js/theme/core/cart/request/voucher/addVoucherToCartRequest.js b/_dev/js/theme/core/cart/request/voucher/addVoucherToCartRequest.js index 24cd741a..48fafc7b 100644 --- a/_dev/js/theme/core/cart/request/voucher/addVoucherToCartRequest.js +++ b/_dev/js/theme/core/cart/request/voucher/addVoucherToCartRequest.js @@ -1,6 +1,6 @@ import prestashop from 'prestashop'; -import useDefaultHttpRequest from '../../../../components/http/useDefaultHttpRequest'; -import useHttpPayloadDefinition from '../../../../components/http/useHttpPayloadDefinition'; +import useDefaultHttpRequest from '../../../../../utils/http/useDefaultHttpRequest'; +import useHttpPayloadDefinition from '../../../../../utils/http/useHttpPayloadDefinition'; /** * @typedef {object} ServerResponse diff --git a/_dev/js/theme/core/cart/request/voucher/deleteVoucherFromCartRequest.js b/_dev/js/theme/core/cart/request/voucher/deleteVoucherFromCartRequest.js index 1bf3dfc5..fa122acb 100644 --- a/_dev/js/theme/core/cart/request/voucher/deleteVoucherFromCartRequest.js +++ b/_dev/js/theme/core/cart/request/voucher/deleteVoucherFromCartRequest.js @@ -1,6 +1,6 @@ import prestashop from 'prestashop'; -import useDefaultHttpRequest from '../../../../components/http/useDefaultHttpRequest'; -import useHttpPayloadDefinition from '../../../../components/http/useHttpPayloadDefinition'; +import useDefaultHttpRequest from '../../../../../utils/http/useDefaultHttpRequest'; +import useHttpPayloadDefinition from '../../../../../utils/http/useHttpPayloadDefinition'; /** * @typedef {object} ServerResponse diff --git a/_dev/js/theme/core/display/psShowHide.js b/_dev/js/theme/core/display/psShowHide.js index 6ea0834b..a1630daf 100644 --- a/_dev/js/theme/core/display/psShowHide.js +++ b/_dev/js/theme/core/display/psShowHide.js @@ -1,4 +1,4 @@ -import useToggleDisplay from '@js/theme/components/display/useToggleDisplay'; +import useToggleDisplay from '../../../utils/display/useToggleDisplay'; /** * Toggle the display of elements with the 'ps-shown-by-js' and 'ps-hidden-by-js' classes. diff --git a/_dev/js/theme/core/index.js b/_dev/js/theme/core/index.js index 3efad871..4cfad6e8 100644 --- a/_dev/js/theme/core/index.js +++ b/_dev/js/theme/core/index.js @@ -4,11 +4,10 @@ import './cart/index'; import './product/index'; import './listing/index'; import './address/index'; -import './checkout/index'; import psShowHide from './display/psShowHide'; import emailIdn from './email/emailIdn'; -import DOMReady from '../utils/DOMReady'; +import { DOMReady } from '../../utils/DOM/DOMHelpers'; DOMReady(() => { psShowHide(); diff --git a/_dev/js/theme/core/listing/index.js b/_dev/js/theme/core/listing/index.js index e2d9ce65..8c399fa4 100644 --- a/_dev/js/theme/core/listing/index.js +++ b/_dev/js/theme/core/listing/index.js @@ -1,4 +1,4 @@ -import DOMReady from '@js/theme/utils/DOMReady'; +import { DOMReady } from '../../../utils/DOM/DOMHelpers'; import listingController from './listingController'; const { init } = listingController(); diff --git a/_dev/js/theme/core/listing/request/updateListingFacetsRequest.js b/_dev/js/theme/core/listing/request/updateListingFacetsRequest.js index 7968df47..17c05c84 100644 --- a/_dev/js/theme/core/listing/request/updateListingFacetsRequest.js +++ b/_dev/js/theme/core/listing/request/updateListingFacetsRequest.js @@ -1,6 +1,6 @@ -import useHttpRequest from '../../../components/http/useHttpRequest'; -import useHttpController from '../../../components/http/useHttpController'; -import GenericHttpRequestError from '../../../components/http/error/GenericHttpRequestError'; +import useHttpRequest from '../../../../utils/http/useHttpRequest'; +import useHttpController from '../../../../utils/http/useHttpController'; +import GenericHttpRequestError from '../../../../utils/http/error/GenericHttpRequestError'; const { dispatch, abortAll } = useHttpController(); diff --git a/_dev/js/theme/core/product/handler/product/updateProductDOMElementsHandler.js b/_dev/js/theme/core/product/handler/product/updateProductDOMElementsHandler.js index 46bd8c80..f9ed9010 100644 --- a/_dev/js/theme/core/product/handler/product/updateProductDOMElementsHandler.js +++ b/_dev/js/theme/core/product/handler/product/updateProductDOMElementsHandler.js @@ -1,6 +1,5 @@ import prestashop from 'prestashop'; -import parseToHtml from '../../../../utils/parseToHtml'; -import { each } from '../../../../utils/DOMHelpers'; +import { each, parseToHtml } from '../../../../../utils/DOM/DOMHelpers'; import productEventContextSelector from '../../utils/productEventContextSelector'; /** diff --git a/_dev/js/theme/core/product/handler/product/updateProductHandler.js b/_dev/js/theme/core/product/handler/product/updateProductHandler.js index 7bb63903..5043f321 100644 --- a/_dev/js/theme/core/product/handler/product/updateProductHandler.js +++ b/_dev/js/theme/core/product/handler/product/updateProductHandler.js @@ -7,7 +7,7 @@ import productStateStore from '../../store/productStateStore'; import updateQuantityInputHandler from './updateQuantityInputHandler'; import updateProductCustomizationHandler from './updateProductCustomizationHandler'; import updateProductDOMElementsHandler from './updateProductDOMElementsHandler'; -import { fromSerializeObject } from '../../../../utils/formSerialize'; +import { fromSerializeObject } from '../../../../../utils/form/formSerialize'; import productEventContextSelector from '../../utils/productEventContextSelector'; const { getCurrentRequestDelayedId, setCurrentRequestDelayedId } = productStateStore(); diff --git a/_dev/js/theme/core/product/index.js b/_dev/js/theme/core/product/index.js index 1a8dfa23..5a4a76a5 100644 --- a/_dev/js/theme/core/product/index.js +++ b/_dev/js/theme/core/product/index.js @@ -1,5 +1,5 @@ import productController from './productController'; -import DOMReady from '../../utils/DOMReady'; +import { DOMReady } from '../../../utils/DOM/DOMHelpers'; const { init } = productController(); diff --git a/_dev/js/theme/core/product/persister/productFormDataPersister.js b/_dev/js/theme/core/product/persister/productFormDataPersister.js index 95253cc0..39f45781 100644 --- a/_dev/js/theme/core/product/persister/productFormDataPersister.js +++ b/_dev/js/theme/core/product/persister/productFormDataPersister.js @@ -1,4 +1,4 @@ -import { formSerializeArray } from '../../../utils/formSerialize'; +import { formSerializeArray } from '../../../../utils/form/formSerialize'; let formData = []; diff --git a/_dev/js/theme/core/product/productController.js b/_dev/js/theme/core/product/productController.js index f1587509..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 '../../components/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/theme/core/product/request/product/updateProductRequest.js b/_dev/js/theme/core/product/request/product/updateProductRequest.js index 1686d355..2dcf140e 100644 --- a/_dev/js/theme/core/product/request/product/updateProductRequest.js +++ b/_dev/js/theme/core/product/request/product/updateProductRequest.js @@ -1,8 +1,8 @@ import prestashop from 'prestashop'; -import useHttpRequest from '../../../../components/http/useHttpRequest'; -import useHttpController from '../../../../components/http/useHttpController'; -import useHttpPayloadDefinition from '../../../../components/http/useHttpPayloadDefinition'; -import GenericHttpRequestError from '../../../../components/http/error/GenericHttpRequestError'; +import useHttpRequest from '../../../../../utils/http/useHttpRequest'; +import useHttpController from '../../../../../utils/http/useHttpController'; +import useHttpPayloadDefinition from '../../../../../utils/http/useHttpPayloadDefinition'; +import GenericHttpRequestError from '../../../../../utils/http/error/GenericHttpRequestError'; const { dispatch, abortAll } = useHttpController(); diff --git a/_dev/js/theme/core/product/request/quickView/quickViewRequest.js b/_dev/js/theme/core/product/request/quickView/quickViewRequest.js index cba05f36..63ab14d0 100644 --- a/_dev/js/theme/core/product/request/quickView/quickViewRequest.js +++ b/_dev/js/theme/core/product/request/quickView/quickViewRequest.js @@ -1,6 +1,6 @@ import prestashop from 'prestashop'; -import useDefaultHttpRequest from '../../../../components/http/useDefaultHttpRequest'; -import useHttpPayloadDefinition from '../../../../components/http/useHttpPayloadDefinition'; +import useDefaultHttpRequest from '../../../../../utils/http/useDefaultHttpRequest'; +import useHttpPayloadDefinition from '../../../../../utils/http/useHttpPayloadDefinition'; /** * Server response object for the quick view request. * diff --git a/_dev/js/theme/core/selectors.js b/_dev/js/theme/core/selectors.js index ee546be5..96672b84 100644 --- a/_dev/js/theme/core/selectors.js +++ b/_dev/js/theme/core/selectors.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import DOMReady from '../utils/DOMReady'; +import { DOMReady } from '../../utils/DOM/DOMHelpers'; prestashop.selectors = { quantityWanted: '#quantity_wanted', diff --git a/_dev/js/theme/handler/error/httpRequestErrorHandler.js b/_dev/js/theme/handler/error/httpRequestErrorHandler.js index dacb73f8..c66cebe9 100644 --- a/_dev/js/theme/handler/error/httpRequestErrorHandler.js +++ b/_dev/js/theme/handler/error/httpRequestErrorHandler.js @@ -1,5 +1,5 @@ import prestashop from 'prestashop'; -import GenericHttpRequestError from '../../components/http/error/GenericHttpRequestError'; +import GenericHttpRequestError from '../../../utils/http/error/GenericHttpRequestError'; import useAlertToast from '../../components/useAlertToast'; const { danger } = useAlertToast(); diff --git a/_dev/js/theme/index.js b/_dev/js/theme/index.js index d15bbba5..92829dc9 100644 --- a/_dev/js/theme/index.js +++ b/_dev/js/theme/index.js @@ -1,7 +1,7 @@ import EventEmitter from 'events'; +import './windowExpose'; import './core/index'; - import './vendors/bootstrap/bootstrap-imports'; import './components/dynamic-bootstrap-components'; import bsCustomFileInput from 'bs-custom-file-input'; @@ -21,14 +21,9 @@ for (const i in EventEmitter.prototype) { } import usePasswordPolicy from './components/password/usePasswordPolicy'; import useThemeForm from './components/useThemeForm'; -import PageLazyLoad from './components/Lazyload'; import httpRequestErrorHandler from './handler/error/httpRequestErrorHandler'; import usePageLoader from "./components/usePageLoader"; -import DOMReady from "./utils/DOMReady"; - -prestashop.pageLazyLoad = new PageLazyLoad({ - selector: '.lazyload', -}); +import { DOMReady } from "../utils/DOM/DOMHelpers"; prestashop.pageLoader = usePageLoader(); diff --git a/_dev/js/theme/utils/DOMReady.js b/_dev/js/theme/utils/DOMReady.js deleted file mode 100644 index cd463d5a..00000000 --- a/_dev/js/theme/utils/DOMReady.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * DOMReady function runs a callback function when the DOM is ready (DOMContentLoaded) - * @param callback {function} - callback function - */ -const DOMReady = (callback) => { - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', callback); - } else { - callback(); - } -}; - -export default DOMReady; diff --git a/_dev/js/theme/utils/parseToHtml.js b/_dev/js/theme/utils/parseToHtml.js deleted file mode 100644 index 6476931c..00000000 --- a/_dev/js/theme/utils/parseToHtml.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Convert a template string into HTML DOM nodes - * @param str {string} - string representation of the HTML - * @return {HTMLElement} - HTML element from the string - */ -const parseToHtml = (str) => { - const parser = new DOMParser(); - const doc = parser.parseFromString(str, 'text/html'); - - return doc.body.children[0]; -}; - -export default parseToHtml; diff --git a/_dev/js/theme/windowExpose.js b/_dev/js/theme/windowExpose.js new file mode 100644 index 00000000..d03ae279 --- /dev/null +++ b/_dev/js/theme/windowExpose.js @@ -0,0 +1,33 @@ +import exposeToWindow from '../utils/misc/exposeToWindow'; +import { + on, one, off, trigger, +} from '../utils/event/eventHandler'; +import useHttpRequest from '../utils/http/useHttpRequest'; +import useDefaultHttpRequest from '../utils/http/useDefaultHttpRequest'; +import useHttpController from '../utils/http/useHttpController'; +import useHttpPayloadDefinition from '../utils/http/useHttpPayloadDefinition'; +import { + isElementVisible, each, DOMReady, parseToHtml, +} from '../utils/DOM/DOMHelpers'; +import { getAllSiblingsBeforeElement, getAllSiblingsAfterElement } from '../utils/DOM/DOMSelectorsHelper'; +import { fromSerializeObject, fromSerialize, formSerializeArray } from '../utils/form/formSerialize'; +import useToggleDisplay from '../utils/display/useToggleDisplay'; + +exposeToWindow('eventHandlerOn', on); +exposeToWindow('eventHandlerOne', one); +exposeToWindow('eventHandlerOff', off); +exposeToWindow('eventHandlerTrigger', trigger); +exposeToWindow('useHttpRequest', useHttpRequest); +exposeToWindow('useDefaultHttpRequest', useDefaultHttpRequest); +exposeToWindow('useHttpController', useHttpController); +exposeToWindow('useHttpPayloadDefinition', useHttpPayloadDefinition); +exposeToWindow('isElementVisible', isElementVisible); +exposeToWindow('each', each); +exposeToWindow('DOMReady', DOMReady); +exposeToWindow('parseToHtml', parseToHtml); +exposeToWindow('getAllSiblingsBeforeElement', getAllSiblingsBeforeElement); +exposeToWindow('getAllSiblingsAfterElement', getAllSiblingsAfterElement); +exposeToWindow('fromSerializeObject', fromSerializeObject); +exposeToWindow('fromSerialize', fromSerialize); +exposeToWindow('formSerializeArray', formSerializeArray); +exposeToWindow('useToggleDisplay', useToggleDisplay); diff --git a/_dev/js/theme/utils/DOMHelpers.js b/_dev/js/utils/DOM/DOMHelpers.js similarity index 52% rename from _dev/js/theme/utils/DOMHelpers.js rename to _dev/js/utils/DOM/DOMHelpers.js index aa31e456..23089065 100644 --- a/_dev/js/theme/utils/DOMHelpers.js +++ b/_dev/js/utils/DOM/DOMHelpers.js @@ -24,3 +24,27 @@ export const each = (elementsOrSelector, fnc) => { fnc(element); }); }; + +/** + * DOMReady function runs a callback function when the DOM is ready (DOMContentLoaded) + * @param callback {function} - callback function + */ +export const DOMReady = (callback) => { + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', callback); + } else { + callback(); + } +}; + +/** + * Convert a template string into HTML DOM nodes + * @param str {string} - string representation of the HTML + * @return {HTMLElement} - HTML element from the string + */ +export const parseToHtml = (str) => { + const parser = new DOMParser(); + const doc = parser.parseFromString(str, 'text/html'); + + return doc.body.children[0]; +}; diff --git a/_dev/js/theme/utils/DOMSelectorsHelper.js b/_dev/js/utils/DOM/DOMSelectorsHelper.js similarity index 100% rename from _dev/js/theme/utils/DOMSelectorsHelper.js rename to _dev/js/utils/DOM/DOMSelectorsHelper.js diff --git a/_dev/js/theme/components/display/useToggleDisplay.js b/_dev/js/utils/display/useToggleDisplay.js similarity index 82% rename from _dev/js/theme/components/display/useToggleDisplay.js rename to _dev/js/utils/display/useToggleDisplay.js index be754ad9..ac479d73 100644 --- a/_dev/js/theme/components/display/useToggleDisplay.js +++ b/_dev/js/utils/display/useToggleDisplay.js @@ -1,6 +1,4 @@ -const useToggleDisplay = () => { - const D_NONE_CLASS = 'd-none'; - +const useToggleDisplay = (hideClass = 'd-none') => { /** * Show element * @param element {HTMLElement} Element to show @@ -8,7 +6,7 @@ const useToggleDisplay = () => { */ const show = (element) => { element.style.display = ''; - element.classList.remove(D_NONE_CLASS); + element.classList.remove(hideClass); }; /** @@ -18,7 +16,7 @@ const useToggleDisplay = () => { */ const hide = (element) => { element.style.display = ''; - element.classList.add(D_NONE_CLASS); + element.classList.add(hideClass); }; /** diff --git a/_dev/js/theme/utils/dynamicImports/componentProxyFactory.js b/_dev/js/utils/dynamicImports/componentProxyFactory.js similarity index 100% rename from _dev/js/theme/utils/dynamicImports/componentProxyFactory.js rename to _dev/js/utils/dynamicImports/componentProxyFactory.js diff --git a/_dev/js/theme/utils/dynamicImports/useBootstrapComponentDynamicImport.js b/_dev/js/utils/dynamicImports/useBootstrapComponentDynamicImport.js similarity index 100% rename from _dev/js/theme/utils/dynamicImports/useBootstrapComponentDynamicImport.js rename to _dev/js/utils/dynamicImports/useBootstrapComponentDynamicImport.js diff --git a/_dev/js/theme/utils/dynamicImports/useDynamicImportEventsHandler.js b/_dev/js/utils/dynamicImports/useDynamicImportEventsHandler.js similarity index 92% rename from _dev/js/theme/utils/dynamicImports/useDynamicImportEventsHandler.js rename to _dev/js/utils/dynamicImports/useDynamicImportEventsHandler.js index 161b070b..8b7264d4 100644 --- a/_dev/js/theme/utils/dynamicImports/useDynamicImportEventsHandler.js +++ b/_dev/js/utils/dynamicImports/useDynamicImportEventsHandler.js @@ -1,6 +1,4 @@ -import useEvent from '../../components/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/theme/utils/dynamicImports/useFunctionCallstackMap.js b/_dev/js/utils/dynamicImports/useFunctionCallstackMap.js similarity index 100% rename from _dev/js/theme/utils/dynamicImports/useFunctionCallstackMap.js rename to _dev/js/utils/dynamicImports/useFunctionCallstackMap.js diff --git a/_dev/js/theme/utils/dynamicImports/useInstanceMap.js b/_dev/js/utils/dynamicImports/useInstanceMap.js similarity index 100% rename from _dev/js/theme/utils/dynamicImports/useInstanceMap.js rename to _dev/js/utils/dynamicImports/useInstanceMap.js diff --git a/_dev/js/utils/event/eventHandler.js b/_dev/js/utils/event/eventHandler.js new file mode 100644 index 00000000..506177ca --- /dev/null +++ b/_dev/js/utils/event/eventHandler.js @@ -0,0 +1,56 @@ +import EventHandler from 'bootstrap/js/src/dom/event-handler'; + +/** + * Add event handler + * + * @description exposed to window as eventHandlerOn + * + * @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 + * + * @description exposed to window as eventHandlerOne + * + * @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 + * + * @description exposed to window as eventHandlerOff + * + * @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 + * + * @description exposed to window as eventHandlerTrigger + * + * @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/theme/utils/formSerialize.js b/_dev/js/utils/form/formSerialize.js similarity index 100% rename from _dev/js/theme/utils/formSerialize.js rename to _dev/js/utils/form/formSerialize.js diff --git a/_dev/js/theme/components/http/error/GenericHttpRequestError.js b/_dev/js/utils/http/error/GenericHttpRequestError.js similarity index 100% rename from _dev/js/theme/components/http/error/GenericHttpRequestError.js rename to _dev/js/utils/http/error/GenericHttpRequestError.js diff --git a/_dev/js/theme/components/http/useDefaultHttpRequest.js b/_dev/js/utils/http/useDefaultHttpRequest.js similarity index 100% rename from _dev/js/theme/components/http/useDefaultHttpRequest.js rename to _dev/js/utils/http/useDefaultHttpRequest.js diff --git a/_dev/js/theme/components/http/useHttpController.js b/_dev/js/utils/http/useHttpController.js similarity index 97% rename from _dev/js/theme/components/http/useHttpController.js rename to _dev/js/utils/http/useHttpController.js index 192556bd..ff151cf7 100644 --- a/_dev/js/theme/components/http/useHttpController.js +++ b/_dev/js/utils/http/useHttpController.js @@ -1,4 +1,4 @@ -import getUniqueId from '../../utils/getUniqueId'; +import getUniqueId from '../misc/getUniqueId'; /** * @module useHttpController diff --git a/_dev/js/theme/components/http/useHttpPayloadDefinition.js b/_dev/js/utils/http/useHttpPayloadDefinition.js similarity index 100% rename from _dev/js/theme/components/http/useHttpPayloadDefinition.js rename to _dev/js/utils/http/useHttpPayloadDefinition.js diff --git a/_dev/js/theme/components/http/useHttpRequest.js b/_dev/js/utils/http/useHttpRequest.js similarity index 100% rename from _dev/js/theme/components/http/useHttpRequest.js rename to _dev/js/utils/http/useHttpRequest.js diff --git a/_dev/js/theme/utils/debounce.js b/_dev/js/utils/misc/debounce.js similarity index 100% rename from _dev/js/theme/utils/debounce.js rename to _dev/js/utils/misc/debounce.js diff --git a/_dev/js/utils/misc/exposeToWindow.js b/_dev/js/utils/misc/exposeToWindow.js new file mode 100644 index 00000000..d7d68b29 --- /dev/null +++ b/_dev/js/utils/misc/exposeToWindow.js @@ -0,0 +1,30 @@ +/** + * A set to track exposed function names. + * @type {Set} + */ +const exposeSet = new Set(); + +/** + * Exposes a function globally by assigning it to the window object. + * + * @param {string} name - The name under which the function will be exposed globally. + * @param {Function} fnc - The function to be exposed. + * @throws Will throw an error if the specified name is already in use for global exposure. + */ +const exposeToWindow = (name, fnc) => { + /** + * Throws an error if the specified name is already in use for global exposure. + * @throws Error + */ + const throwErrorIfAlreadyExposed = () => { + if (exposeSet.has(name)) { + throw new Error(`"${name}" is already exposed`); + } + }; + + throwErrorIfAlreadyExposed(); + exposeSet.add(name); + window[name] = fnc; +}; + +export default exposeToWindow; diff --git a/_dev/js/theme/utils/getUniqueId.js b/_dev/js/utils/misc/getUniqueId.js similarity index 100% rename from _dev/js/theme/utils/getUniqueId.js rename to _dev/js/utils/misc/getUniqueId.js diff --git a/_dev/js/theme/utils/sprintf.js b/_dev/js/utils/misc/sprintf.js similarity index 100% rename from _dev/js/theme/utils/sprintf.js rename to _dev/js/utils/misc/sprintf.js diff --git a/_dev/webpack/webpack.parts.js b/_dev/webpack/webpack.parts.js index 588b9e61..39401bdc 100644 --- a/_dev/webpack/webpack.parts.js +++ b/_dev/webpack/webpack.parts.js @@ -169,6 +169,11 @@ exports.extractVendorsChunks = () => ({ filename: 'js/jquery.js', chunks: 'initial', }, + shared: { + name: 'shared', + chunks: 'initial', + minChunks: 2, + }, }, }, }, diff --git a/config/assets.yml b/config/assets.yml index fc1fb4bf..aaccccff 100644 --- a/config/assets.yml +++ b/config/assets.yml @@ -30,12 +30,15 @@ js: runtime: # This file is only used to handle HMR for multiple entry points fileName: runtime.js priority: 1 - swipervendor: - fileName: swipervendor.js - priority: 1 jquery: fileName: jquery.js priority: 1 + shared: # Shared code between all pages autogenerated by Webpack + fileName: shared.js + priority: 1 + swipervendor: + fileName: swipervendor.js + priority: 1 product: fileName: product.js priority: 200 diff --git a/templates/catalog/_partials/miniatures/_partials/product-thumb.tpl b/templates/catalog/_partials/miniatures/_partials/product-thumb.tpl index a02cea53..03c60784 100644 --- a/templates/catalog/_partials/miniatures/_partials/product-thumb.tpl +++ b/templates/catalog/_partials/miniatures/_partials/product-thumb.tpl @@ -5,7 +5,7 @@ {if !empty($product.default_image.legend)}{$product.default_image.legend}{else}{$product.name|truncate:30:'...'}{/if} {/images_block} diff --git a/templates/catalog/_partials/miniatures/brand.tpl b/templates/catalog/_partials/miniatures/brand.tpl index 1038a4a2..17b9d9f2 100644 --- a/templates/catalog/_partials/miniatures/brand.tpl +++ b/templates/catalog/_partials/miniatures/brand.tpl @@ -27,12 +27,12 @@
{$sizes = Image::getSize('home_default')} {$brand.name}

diff --git a/templates/catalog/_partials/miniatures/pack-product.tpl b/templates/catalog/_partials/miniatures/pack-product.tpl index 8c2e7b7a..fa17b280 100644 --- a/templates/catalog/_partials/miniatures/pack-product.tpl +++ b/templates/catalog/_partials/miniatures/pack-product.tpl @@ -29,8 +29,9 @@ {images_block webpEnabled=$webpEnabled}

{$product.default_image.legend} {$image.legend} {images_block webpEnabled=$webpEnabled}