diff --git a/_dev/js/theme/components/responsive.js b/_dev/js/theme/components/responsive.js index 30e66e8f..bdf59872 100644 --- a/_dev/js/theme/components/responsive.js +++ b/_dev/js/theme/components/responsive.js @@ -1,62 +1,70 @@ -import $ from 'jquery'; +import DOMReady from "../utils/DOMReady"; import prestashop from 'prestashop'; -const isMobile = () => prestashop.responsive.current_width < prestashop.responsive.min_width; - -prestashop.responsive = prestashop.responsive || {}; +prestashop.responsive = {}; prestashop.responsive.current_width = window.innerWidth; prestashop.responsive.min_width = 768; prestashop.responsive.mobile = isMobile(); +function isMobile() { + return prestashop.responsive.current_width < prestashop.responsive.min_width; +} + function swapChildren(obj1, obj2) { - const temp = obj2.children().detach(); - obj2.empty().append(obj1.children().detach()); - obj1.append(temp); + const temp = Array.from(obj2.children).map(child => child.cloneNode(true)); + obj2.innerHTML = ''; + temp.forEach(child => obj2.appendChild(child)); + + const childrenObj1 = Array.from(obj1.children); + childrenObj1.forEach(child => obj1.removeChild(child)); + childrenObj1.forEach(child => obj2.appendChild(child)); } function toggleMobileStyles() { if (prestashop.responsive.mobile) { - $("*[id^='_desktop_']").each((idx, el) => { - const target = $(`#${el.id.replace('_desktop_', '_mobile_')}`); + document.querySelectorAll('*[id^="_desktop_"]').forEach(el => { + const target = document.getElementById(el.id.replace('_desktop_', '_mobile_')); - if (target.length) { - swapChildren($(el), target); + if (target) { + swapChildren(el, target); } }); - $('[data-collapse-hide-mobile]').collapse('hide'); + document.querySelectorAll('[data-collapse-hide-mobile]').forEach(el => el.classList.add('collapse')); } else { - $("*[id^='_mobile_']").each((idx, el) => { - const target = $(`#${el.id.replace('_mobile_', '_desktop_')}`); + document.querySelectorAll('*[id^="_mobile_"]').forEach(el => { + const target = document.getElementById(el.id.replace('_mobile_', '_desktop_')); - if (target.length) { - swapChildren($(el), target); + if (target) { + swapChildren(el, target); } }); - $('[data-collapse-hide-mobile]').not('.show').collapse('show'); - $('[data-modal-hide-mobile].show').modal('hide'); + document.querySelectorAll('[data-collapse-hide-mobile]:not(.show)').forEach(el => el.classList.remove('collapse')); + document.querySelectorAll('[data-modal-hide-mobile].show').forEach(el => el.classList.remove('show')); } prestashop.emit('responsive update', { mobile: prestashop.responsive.mobile, }); } -$(window).on('resize', () => { +const handleResize = () => { const { responsive } = prestashop; - const cw = responsive.current_width; - const mw = responsive.min_width; + const cw = prestashop.responsive.current_width; + const mw = prestashop.responsive.min_width; const w = window.innerWidth; const toggle = (cw >= mw && w < mw) || (cw < mw && w >= mw); - responsive.current_width = w; - responsive.mobile = responsive.current_width < responsive.min_width; + prestashop.responsive.current_width = w; + prestashop.responsive.mobile = prestashop.responsive.current_width < prestashop.responsive.min_width; if (toggle) { toggleMobileStyles(); } -}); +} + +window.addEventListener('resize', handleResize); -$(() => { +DOMReady(() => { if (prestashop.responsive.mobile) { toggleMobileStyles(); } diff --git a/_dev/js/theme/components/useThemeForm.js b/_dev/js/theme/components/useThemeForm.js index 4e58f073..b3c055be 100644 --- a/_dev/js/theme/components/useThemeForm.js +++ b/_dev/js/theme/components/useThemeForm.js @@ -1,5 +1,4 @@ import { each } from '../utils/DOMHelpers'; -import $ from "jquery"; const supportedValidity = () => { const input = document.createElement('input');