Merge pull request #304 from Oksydan/theme-js-code-refactorization

Theme js code refactoring

_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";

_dev/js/checkout.js

@@ -1 +1 @@
-import '@js/checkout/index';
+import './checkout/index';

_dev/js/theme/core/checkout/checkoutController.js → _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.
  *

_dev/js/theme/core/checkout/components/useCheckoutStepsController.js → _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.

_dev/js/theme/core/checkout/handler/address/changeAddressHandler.js → _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.

_dev/js/theme/core/checkout/handler/address/showAddressErrorMessageHandler.js → _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';
 
 /**

_dev/js/theme/core/checkout/handler/delivery/changeDeliveryMethodHandler.js → _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.

_dev/js/theme/core/checkout/handler/payment/confirmOrderHandler.js → _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;

_dev/js/theme/core/checkout/handler/payment/toggleOrderButtonStateHandler.js → _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();
 

_dev/js/theme/core/checkout/handler/payment/togglePaymentOptionsHandler.js → _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();
 

_dev/js/theme/core/checkout/handler/process/checkoutFormSubmitHandler.js → _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.

_dev/js/theme/core/checkout/index.js → _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';
 

_dev/js/theme/core/checkout/request/checkCartStillOrderableRequest.js → _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.

_dev/js/theme/core/checkout/request/selectDeliveryMethodRequest.js → _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.

_dev/js/theme/core/checkout/utils/areConditionsAccepted.js → _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.

_dev/js/theme/core/checkout/utils/collapseAllPaymentOptions.js → _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.

_dev/js/theme/core/checkout/utils/switchConfirmAddressesButtonState.js → _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.

_dev/js/theme/core/checkout/utils/switchEditAddressButtonColor.js → _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.

_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) => {

_dev/js/listing.js

@@ -1 +1 @@
-import '@js/listing/index';
+import './listing/index';

_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();

_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() {

_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);

_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) => {

_dev/js/product.js

@@ -1 +1 @@
-import '@js/product/index';
+import './product/index';

_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();

_dev/js/theme.js

@@ -1 +1 @@
-import '@js/theme/index';
+import './theme/index';

_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;

_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(

_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';
 

_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',

_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(() => {

_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

_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;

_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() {

_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';