#414986 > improvements and lcp by metadata

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);

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,23 +35,17 @@ 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)
         .filter((c) => c !== this.blockName && c !== 'block')
         .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() {

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

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) => {