Merge pull request #301 from Oksydan/removeing-jquery-form-theme-code

Removeing jquery form theme code
Oksydan · Oct 22, 2023 · 9e14a94 · 9e14a94
2 parents 8b229ed + f86dca8
commit 9e14a94
Show file tree

Hide file tree

Showing 75 changed files with 10,228 additions and 6,959 deletions.
diff --git a/_dev/css/theme/utility/_dynamic-import-fix.scss b/_dev/css/theme/utility/_dynamic-import-fix.scss
@@ -9,6 +9,8 @@
 }
 
 //FIX TO TOAST, opacity by default
-.toast {
+.toast:not(.show),
+.fade:not(.show):not(.active) {
   opacity: 0;
+  display: none;
 }
diff --git a/_dev/js/checkout/index.js b/_dev/js/checkout/index.js
@@ -1,90 +1,83 @@
-/**
- * 2007-2017 PrestaShop
- *
- * NOTICE OF LICENSE
- *
- * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
- * that is bundled with this package in the file LICENSE.txt.
- * It is also available through the world-wide-web at this URL:
- * https://opensource.org/licenses/AFL-3.0
- * If you did not receive a copy of the license and are unable to
- * obtain it through the world-wide-web, please send an email
- * to [email protected] so we can send you a copy immediately.
- *
- * DISCLAIMER
- *
- * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
- * versions in the future. If you wish to customize PrestaShop for your
- * needs please refer to http://www.prestashop.com for more information.
- *
- * @author    PrestaShop SA <[email protected]>
- * @copyright 2007-2017 PrestaShop SA
- * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
- * International Registered Trademark & Property of PrestaShop SA
- */
 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();
 
 function setUpCheckout() {
-  $(prestashop.selectors.checkout.termsLink).on('click', (event) => {
+  const clickTermLinkHandler = async (event) => {
     event.preventDefault();
-    let url = $(event.target).attr('href');
+    const url = event.target.getAttribute('href');
 
     if (url) {
-      // TODO: Handle request if no pretty URL
-      url += '?content_only=1';
-      $.get(url, (content) => {
-        $(prestashop.selectors.modal)
-          .find(prestashop.selectors.modalContent)
-          .html($(content).find('.page-cms').contents());
-      }).fail((resp) => {
-        prestashop.emit('handleError', { eventType: 'clickTerms', resp });
-      });
+      const modal = document.querySelector(prestashop.selectors.modal);
+      const urlObject = new URL(url);
+      const searchParams = new URLSearchParams(urlObject.searchParams);
+      searchParams.set('content_only', '1');
+      urlObject.search = searchParams.toString();
+
+      const { request } = useHttpRequest(urlObject.toString());
+
+      try {
+        const res = await request.get().res();
+        const content = await res.text();
+
+        const modalContent = modal.querySelector(prestashop.selectors.modalContent);
+        const contentElement = parseToHtml(content);
+        modalContent.innerHTML = contentElement.querySelector('.page-cms')?.innerHTML || '';
+
+        const modalInstance = window.bootstrap.Modal.getOrCreateInstance(modal);
+        modalInstance.show();
+      } catch (error) {
+        prestashop.emit('handleError', { eventType: 'changeAddresses', error });
+      }
     }
+  };
 
-    $(prestashop.selectors.modal).modal('show');
-  });
+  each(prestashop.selectors.checkout.termsLink, (link) => on(link, 'click', clickTermLinkHandler));
 
-  $(prestashop.selectors.checkout.giftCheckbox).on('click', () => {
-    $('#gift').slideToggle();
-  });
+  const giftCheckbox = document.querySelector(prestashop.selectors.checkout.giftCheckbox);
+
+  if (giftCheckbox) {
+    on(giftCheckbox, 'change', ({ target }) => {
+      const isChecked = target.checked;
+      const giftBlock = document.querySelector('#gift');
+      const collapseInstance = window.bootstrap.Collapse.getOrCreateInstance(giftBlock);
+
+      collapseInstance.toggle(isChecked);
+    });
+  }
 }
 
-$(document).ready(() => {
-  if ($('body#checkout').length === 1) {
+DOMReady(() => {
+  if (prestashop.page.page_name === 'checkout') {
     setUpCheckout();
   }
 
-  prestashop.on('updatedDeliveryForm', (params) => {
-    if (typeof params.deliveryOption === 'undefined' || params.deliveryOption === null) {
+  prestashop.on('updateDeliveryForm', (event) => {
+    if (typeof event.deliveryOption === 'undefined' || event.deliveryOption === null) {
       return;
     }
 
-    // Hide all carrier extra content ...
-    document.querySelectorAll(prestashop.selectors.checkout.carrierExtraContent).forEach((element) => {
-      element.classList.add('d-none');
+    each(prestashop.selectors.checkout.deliveryOption, (element) => {
+      element.classList.remove('selected');
     });
 
-    // and show the one related to the selected carrier
-    params.deliveryOption.nextElementSibling.classList.remove('d-none');
-  });
-  prestashop.on('changedCheckoutStep', (params) => {
-    if (typeof params.event.currentTarget !== 'undefined') {
-      $('.collapse', params.event.currentTarget).not('.show').not('.collapse .collapse').collapse('show');
-    }
+    event.deliveryOption.classList.add('selected');
   });
-});
 
-$(document).on('change', '.checkout-option input[type="radio"]', (event) => {
-  const $target = $(event.currentTarget);
-  const $block = $target.closest('.checkout-option');
-  const $relatedBlocks = $block.parent();
+  prestashop.on('updatedDeliveryForm', (event) => {
+    if (typeof event.deliveryOption === 'undefined' || event.deliveryOption === null) {
+      return;
+    }
 
-  $relatedBlocks.find('.checkout-option').removeClass('selected');
-  $block.addClass('selected');
-});
+    each(prestashop.selectors.checkout.carrierExtraContent, (element) => {
+      element.classList.add('d-none');
+    });
 
-$(document).on('click', '.js-checkout-step-header', (event) => {
-  const stepIdentifier = $(event.currentTarget).data('identifier');
-  $(`#${stepIdentifier}`).addClass('-current');
-  $(`#content-${stepIdentifier}`).collapse('show').scrollTop();
+    event.deliveryOption.nextElementSibling.classList.remove('d-none');
+  });
 });
diff --git a/_dev/js/listing/components/filters/Filters.js b/_dev/js/listing/components/filters/Filters.js
@@ -1,16 +1,18 @@
 import prestashop from 'prestashop';
-import $ from 'jquery';
-import FiltersRangeSliders from '@js/listing/components/filters/FiltersRangeSliders';
+import FiltersRangeSliders from './FiltersRangeSliders';
+import useEvent from '../../../theme/components/event/useEvent';
 
 class Filters {
   constructor() {
-    this.$body = $('body');
+    this.body = document.querySelector('body');
     this.setEvents();
     this.rangeSliders = FiltersRangeSliders;
     this.rangeSliders.init();
   }
 
   setEvents() {
+    const { on } = useEvent();
+
     prestashop.on('updatedProductList', () => {
       prestashop.pageLoader.hideLoader();
       this.rangeSliders.init();
@@ -20,34 +22,36 @@ class Filters {
       prestashop.pageLoader.showLoader();
     });
 
-    this.$body.on('click', '.js-search-link', (event) => {
+    on(this.body, 'click', '.js-search-link', (event) => {
       event.preventDefault();
-      prestashop.emit('updateFacets', $(event.target).closest('a').get(0).href);
+      prestashop.emit('updateFacets', event.target.closest('a').href);
     });
 
-    this.$body.on('change', '[data-action="search-select"]', ({ target }) => {
-      prestashop.emit('updateFacets', $(target).find('option:selected').data('href'));
+    on(this.body, 'change', '[data-action="search-select"]', ({ target }) => {
+      const selectedElement = target.options[target.selectedIndex];
+
+      prestashop.emit('updateFacets', selectedElement.dataset.href);
     });
 
-    this.$body.on('click', '.js-search-filters-clear-all', (event) => {
+    on(this.body, 'click', '.js-search-filters-clear-all', (event) => {
       prestashop.emit('updateFacets', this.constructor.parseSearchUrl(event));
     });
 
-    this.$body.on('change', '#search_filters input[data-search-url]', (event) => {
+    on(this.body, 'change', '#search_filters input[data-search-url]', (event) => {
       prestashop.emit('updateFacets', this.constructor.parseSearchUrl(event));
     });
   }
 
-  static parseSearchUrl(event) {
-    if (event.target.dataset.searchUrl !== undefined) {
-      return event.target.dataset.searchUrl;
+  static parseSearchUrl({ target }) {
+    if (target.dataset.searchUrl !== undefined) {
+      return target.dataset.searchUrl;
     }
 
-    if ($(event.target).parent()[0].dataset.searchUrl === undefined) {
+    if (target.parent.dataset.searchUrl === undefined) {
       throw new Error('Can not parse search URL');
     }
 
-    return $(event.target).parent()[0].dataset.searchUrl;
+    return target.parent.dataset.searchUrl;
   }
 }
 

diff --git a/_dev/js/listing/components/filters/FiltersRangeSliders.js b/_dev/js/listing/components/filters/FiltersRangeSliders.js
@@ -1,13 +1,12 @@
-import $ from 'jquery';
-import RangeSlider from '@js/listing/components/filters/RangeSlider';
+import RangeSlider from './RangeSlider';
+import { each } from '../../../theme/utils/DOMHelpers';
 
 class FiltersRangeSliders {
   static init() {
-    const $rangeSliders = $('.js-range-slider');
+    each('.js-range-slider', (slider) => {
+      const rangeSlider = new RangeSlider(slider);
 
-    $rangeSliders.each((i, el) => {
-      /* eslint no-unused-vars: ["error", { "varsIgnorePattern": "slider" }] */
-      const slider = new RangeSlider(el);
+      rangeSlider.init();
     });
   }
 }