From b1f89212bacf2e13c4ceb471f12d38110ead5916 Mon Sep 17 00:00:00 2001
From: Felipe Simoes <felipe.simoes@netcentric.biz>
Date: Fri, 29 Dec 2023 10:26:06 +0100
Subject: [PATCH] #414986 > improvements and lcp by metadata

---
 blocks/column/column.js     |  1 +
 scripts/component-loader.js | 19 ++++---------------
 scripts/init.js             | 12 ++++++++----
 scripts/libs.js             | 10 ++++++++++
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/blocks/column/column.js b/blocks/column/column.js
index 0c626191..81389e42 100644
--- a/blocks/column/column.js
+++ b/blocks/column/column.js
@@ -12,6 +12,7 @@ export default class Column extends ComponentBase {
   calculateGridTemplateColumns() {
     this.position = parseInt(this.getAttribute('position'), 10);
     this.size = this.getAttribute('size');
+    console.log('calculateGridTemplateColumns', this.position, this.size);
     if (this.position) {
       const parent = this.parentElement;
       const children = Array.from(parent.children);
diff --git a/scripts/component-loader.js b/scripts/component-loader.js
index ac0ea085..968e7634 100644
--- a/scripts/component-loader.js
+++ b/scripts/component-loader.js
@@ -1,8 +1,7 @@
-import { config } from './libs.js';
+import { getBreakPoint } from './libs.js';
 
 export default class ComponentLoader {
   constructor(blockName, element) {
-    console.log('blockName', blockName, element);
     window.raqnComponents = window.raqnComponents || {};
     this.blockName = blockName;
     this.setBlockPaths();
@@ -36,7 +35,6 @@ export default class ComponentLoader {
    * Parse extra params from classList
    */
   setParams() {
-    const breakpoints = Object.keys(config.breakpoints);
     const mediaParams = {};
     this.params = {
       ...Array.from(this.block.classList)
@@ -44,15 +42,10 @@ export default class ComponentLoader {
         .reduce((acc, c) => {
           const values = c.split('-');
           let key = values.shift();
-          if (breakpoints.includes(key)) {
-            if (
-              !matchMedia(`(min-width: ${config.breakpoints[key]}px)`).matches
-            ) {
-              return acc;
-            }
+          const breakpoints = getBreakPoint();
+          if (breakpoints === key) {
             key = values.shift();
-            mediaParams[key] = mediaParams[key] || [];
-            mediaParams[key].push(values.join('-'));
+            mediaParams[key] = values.join('-');
             return acc;
           }
 
@@ -67,8 +60,6 @@ export default class ComponentLoader {
         }, {}),
       ...mediaParams,
     };
-    console.log('params', this.params);
-    console.log('mediaParams', mediaParams);
   }
 
   /**
@@ -81,8 +72,6 @@ export default class ComponentLoader {
   setBlockPaths() {
     this.cssPath = `/blocks/${this.blockName}/${this.blockName}.css`;
     this.jsPath = `/blocks/${this.blockName}/${this.blockName}.js`;
-    console.log('cssPath', this.cssPath);
-    console.log('jsPath', this.jsPath);
   }
 
   setupElement() {
diff --git a/scripts/init.js b/scripts/init.js
index d2af64f0..ca031dd7 100644
--- a/scripts/init.js
+++ b/scripts/init.js
@@ -1,5 +1,5 @@
 import ComponentLoader from './component-loader.js';
-import { config, debounce } from './libs.js';
+import { config, debounce, getBreakPoint } from './libs.js';
 
 export function retriveDataFrom(blocks) {
   return blocks.map((block) => {
@@ -64,12 +64,16 @@ export async function init(node = document) {
       }),
     );
   });
-
+  // reload on breakpoint change
+  window.raqnBreakpoint = getBreakPoint();
   window.addEventListener(
     'resize',
     debounce(() => {
-      window.location.reload();
-    }, 300),
+      // only on width changes
+      if (window.raqnBreakpoint !== getBreakPoint()) {
+        window.location.reload();
+      }
+    }, 100),
   );
 }
 // mechanism of retrieving lang to be used in the app
diff --git a/scripts/libs.js b/scripts/libs.js
index 9f6bec6b..4695d056 100644
--- a/scripts/libs.js
+++ b/scripts/libs.js
@@ -9,6 +9,16 @@ export const config = {
   },
 };
 
+export function getBreakPoint() {
+  const breakpoints = Object.keys(config.breakpoints);
+  const currentBreakpoint = breakpoints
+    .filter(
+      (bp) => matchMedia(`(min-width: ${config.breakpoints[bp]}px)`).matches,
+    )
+    .pop();
+  return currentBreakpoint;
+}
+
 export const debounce = (func, wait, immediate) => {
   let timeout;
   return (...args) => {