feat(TWILIGHT-2542): cleanup-theme-style-with-linting-and-indentation

package.json

@@ -36,15 +36,15 @@
     "babel-loader": "^9.1.2",
     "babel-loader-exclude-node-modules-except": "^1.2.1",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.5.0",
-    "glob": "^10.3.1",
+    "css-loader": "^7.1.2",
+    "glob": "^11.0.0",
     "mini-css-extract-plugin": "^2.4.3",
     "postcss": "^8.4.14",
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.0.0",
-    "postcss-preset-env": "^8.0.1",
+    "postcss-preset-env": "^9.6.0",
     "sass": "^1.43.4",
-    "sass-loader": "^13.2.0",
+    "sass-loader": "^14.2.1",
     "tailwindcss": "^3.3.3",
     "webpack": "^5.64.1",
     "webpack-cli": "^5.0.1"

src/assets/js/app.js

@@ -39,21 +39,21 @@ class App extends AppHelpers {
     return this;
   }
 
-    // fix Menu Direction at the third level >> The menu at the third level was popping off the page
-    changeMenuDirection(){
-      app.all('.root-level.has-children',item=>{
-        if(item.classList.contains('change-menu-dir')) return;
-        app.on('mouseover',item,()=>{
-          let submenu = item.querySelector('.sub-menu .sub-menu');
-          if(submenu){
-            let rect = submenu.getBoundingClientRect();
-            (rect.left < 10 || rect.right > window.innerWidth - 10) && app.addClass(item,'change-menu-dir')
-          }      
-        })
+  // fix Menu Direction at the third level >> The menu at the third level was popping off the page
+  changeMenuDirection() {
+    app.all('.root-level.has-children', item => {
+      if (item.classList.contains('change-menu-dir')) return;
+      app.on('mouseover', item, () => {
+        let submenu = item.querySelector('.sub-menu .sub-menu');
+        if (submenu) {
+          let rect = submenu.getBoundingClientRect();
+          (rect.left < 10 || rect.right > window.innerWidth - 10) && app.addClass(item, 'change-menu-dir')
+        }
       })
-    }
+    })
+  }
 
-  loadModalImgOnclick(){
+  loadModalImgOnclick() {
     document.querySelectorAll('.load-img-onclick').forEach(link => {
       link.addEventListener('click', (event) => {
         event.preventDefault();
@@ -84,23 +84,23 @@ class App extends AppHelpers {
     }
   }
 
-isElementLoaded(selector){
-  return new Promise((resolve=>{
-    const interval=setInterval(()=>{
-    if(document.querySelector(selector)){
-      clearInterval(interval)
-      return resolve(document.querySelector(selector))
-    }
-   },160)
-}))
+  isElementLoaded(selector) {
+    return new Promise((resolve => {
+      const interval = setInterval(() => {
+        if (document.querySelector(selector)) {
+          clearInterval(interval)
+          return resolve(document.querySelector(selector))
+        }
+      }, 160)
+    }))
+
 
-
   };
 
   copyToClipboard(event) {
     event.preventDefault();
     let aux = document.createElement("input"),
-    btn = event.currentTarget;
+      btn = event.currentTarget;
     aux.setAttribute("value", btn.dataset.content);
     document.body.appendChild(aux);
     aux.select();
@@ -139,38 +139,38 @@ isElementLoaded(selector){
 
   initiateMobileMenu() {
 
-  this.isElementLoaded('#mobile-menu').then((menu) => {
+    this.isElementLoaded('#mobile-menu').then((menu) => {
 
-
-  const mobileMenu = new MobileMenu(menu, "(max-width: 1024px)", "( slidingSubmenus: false)");
 
-  salla.lang.onLoaded(() => {
-    mobileMenu.navigation({ title: salla.lang.get('blocks.header.main_menu') });
-  });
-  const drawer = mobileMenu.offcanvas({ position: salla.config.get('theme.is_rtl') ? "right" : 'left' });
+      const mobileMenu = new MobileMenu(menu, "(max-width: 1024px)", "( slidingSubmenus: false)");
 
-  this.onClick("a[href='#mobile-menu']", event => {
-    document.body.classList.add('menu-opened');
-    event.preventDefault() || drawer.close() || drawer.open()
-
-  });
-  this.onClick(".close-mobile-menu", event => {
-    document.body.classList.remove('menu-opened');
-    event.preventDefault() || drawer.close()
-  });
-  });
+      salla.lang.onLoaded(() => {
+        mobileMenu.navigation({ title: salla.lang.get('blocks.header.main_menu') });
+      });
+      const drawer = mobileMenu.offcanvas({ position: salla.config.get('theme.is_rtl') ? "right" : 'left' });
+
+      this.onClick("a[href='#mobile-menu']", event => {
+        document.body.classList.add('menu-opened');
+        event.preventDefault() || drawer.close() || drawer.open()
+
+      });
+      this.onClick(".close-mobile-menu", event => {
+        document.body.classList.remove('menu-opened');
+        event.preventDefault() || drawer.close()
+      });
+    });
 
   }
- initAttachWishlistListeners() {
+  initAttachWishlistListeners() {
     let isListenerAttached = false;
-  
+
     function toggleFavoriteIcon(id, isAdded = true) {
       document.querySelectorAll('.s-product-card-wishlist-btn[data-id="' + id + '"]').forEach(btn => {
         app.toggleElementClassIf(btn, 's-product-card-wishlist-added', 'not-added', () => isAdded);
         app.toggleElementClassIf(btn, 'pulse-anime', 'un-favorited', () => isAdded);
       });
     }
-  
+
     if (!isListenerAttached) {
       salla.wishlist.event.onAdded((event, id) => toggleFavoriteIcon(id));
       salla.wishlist.event.onRemoved((event, id) => toggleFavoriteIcon(id, false));

src/assets/js/blog.js

@@ -37,7 +37,7 @@ class Blog extends BasePage {
                 this.updateLikesCount(!this.isLiked);
                 this.isLiked = !this.isLiked;
             } catch (e) {
-                 likeBtn.innerHTML = originalContent;
+                likeBtn.innerHTML = originalContent;
                 if (e.response?.status === 409) {
                     this.handleExistingLike(likeBtn, blogId);
                 }
@@ -49,7 +49,7 @@ class Blog extends BasePage {
         const isLiked = likeBtn.classList.contains('liked');
         this.updateLikedBlogs(blogId, !isLiked);
         this.updateLikesCount(!isLiked);
-        this.isLiked = !isLiked; 
+        this.isLiked = !isLiked;
     }
 
     updateLikedBlogs(blogId, add) {

src/assets/js/brands.js

@@ -3,10 +3,10 @@ class Brands extends BasePage {
     onReady() {
         // set initial height;
         const nav = document.querySelector('#brands-nav'),
-              navWrap = document.querySelector('.brands-nav-wrap');
+            navWrap = document.querySelector('.brands-nav-wrap');
         navWrap.style.height = nav.clientHeight + 'px';
 
-        app.onClick('.brands-nav__item', ({target:btn}) => {
+        app.onClick('.brands-nav__item', ({ target: btn }) => {
             app.all('.brands-nav__item', el => app.toggleElementClassIf(el, 'is-selected', 'unselected', () => el == btn));
         });
 

src/assets/js/cart.js

@@ -26,11 +26,11 @@ class Cart extends BasePage {
     initSubmitCart() {
         let submitBtn = document.querySelector('#cart-submit');
         let cartForms = document.querySelectorAll('form[id^="item-"]');
-        
+
         if (!submitBtn) {
             return;
         }
-        
+
         app.onClick(submitBtn, event => {
             let isValid = true;
             cartForms.forEach(form => {
@@ -41,7 +41,7 @@ class Cart extends BasePage {
                     return;
                 }
             });
-    
+
             if (isValid) {
                 /** @type HTMLSallaButtonElement */
                 let btn = event.currentTarget;
@@ -51,17 +51,17 @@ class Cart extends BasePage {
     }
 
     updateCartOptions(options) {
-      if (!options || !options.length) return;
+        if (!options || !options.length) return;
 
-      const arrayTwoId = options.map((item) => (item.id));
+        const arrayTwoId = options.map((item) => (item.id));
 
-      document.querySelectorAll('.cart-options form')?.forEach((form) => {
-        if (!arrayTwoId.includes(parseInt(form.id.value))) {
-          form.remove();
-        }
-      })
+        document.querySelectorAll('.cart-options form')?.forEach((form) => {
+            if (!arrayTwoId.includes(parseInt(form.id.value))) {
+                form.remove();
+            }
+        })
     }
-    
+
     /**
      * @param {import("@salla.sa/twilight/types/api/cart").CartSummary} cartData
      */
@@ -80,7 +80,7 @@ class Cart extends BasePage {
 
         app.subTotal.innerText = salla.money(cartData.sub_total);
         if (app.orderOptionsTotal) app.orderOptionsTotal.innerText = salla.money(cartData.options_total);
-        
+
         app.toggleElementClassIf(app.totalDiscount, 'discounted', 'hidden', () => !!cartData.discount)
             .toggleElementClassIf(app.shippingCost, 'has_shipping', 'hidden', () => !!cartData.real_shipping_cost)
             .toggleElementClassIf(app.freeShipping, 'has_free', 'hidden', () => !!cartData.free_shipping_bar);

src/assets/js/order.js

@@ -2,12 +2,12 @@ import BasePage from './base-page';
 
 class Order extends BasePage {
     onReady() {
-        app.onClick('salla-button#btn-reorder', ({currentTarget: btn}) => btn.load()
+        app.onClick('salla-button#btn-reorder', ({ currentTarget: btn }) => btn.load()
             .then(() => salla.order.createCartFromOrder())
             .then(() => btn.stop())
             .then(() => app.element('#reorder-modal').hide()));
 
-        app.onClick('salla-button#confirm-cancel', ({currentTarget: btn}) => btn.load()
+        app.onClick('salla-button#confirm-cancel', ({ currentTarget: btn }) => btn.load()
             .then(() => salla.order.cancel())
             .then(() => btn.stop() && app.element('#modal-order-cancel').hide())
             .then(() => window.location.reload())

src/assets/js/partials/anime.js

@@ -5,9 +5,9 @@ window.anime = AnimeJS;
 class Anime {
     constructor(selector, options) {
         this.options = {
-            targets : selector,
-            opacity : [0, 1],
-            delay   : (el, i) => i * 100,
+            targets: selector,
+            opacity: [0, 1],
+            delay: (el, i) => i * 100,
             duration: 2000,
         };
         this.setOptions(options);

src/assets/js/partials/main-menu.js

@@ -7,10 +7,10 @@ class NavigationMenu extends HTMLElement {
                 this.displayAllText = salla.lang.get('blocks.home.display_all');
 
                 return salla.api.component.getMenus()
-                .then(({ data }) => {
-                    this.menus = data;
-                    return this.render()
-                }).catch((error) => salla.logger.error('salla-menu::Error fetching menus', error));
+                    .then(({ data }) => {
+                        this.menus = data;
+                        return this.render()
+                    }).catch((error) => salla.logger.error('salla-menu::Error fetching menus', error));
             });
     }
 
@@ -115,7 +115,7 @@ class NavigationMenu extends HTMLElement {
     * Render the header menu
     */
     render() {
-        this.innerHTML =  `
+        this.innerHTML = `
         <nav id="mobile-menu" class="mobile-menu">
             <ul class="main-menu">${this.getMenus()}</ul>
             <button class="btn--close close-mobile-menu sicon-cancel lg:hidden"></button>