responsive component vanilla.js

Oksydan · Oct 9, 2023 · 1612b7f · 1612b7f
1 parent 98ba80a
commit 1612b7f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 26 deletions.
diff --git 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
@@ -1,5 +1,4 @@
 import { each } from '../utils/DOMHelpers';
-import $ from "jquery";
 
 const supportedValidity = () => {
   const input = document.createElement('input');