Fix scrolling issues & swiperjs conflicts.

layouts/scripts/dist/frame-index.min.js

@@ -13,37 +13,6 @@ function initBlock(blockName = '', selector = '', cb) {
   reload();
 }
 
-// Scrollbars / Frame resizes notifications.
-(function () {
-  let height;
-
-  handleHeightChange(); // Initial frame's height setup.
-  setupResizeListener(); // Listen to frame's height changes.
-
-  ///
-
-  function setupResizeListener() {
-    const resizeObserver = new ResizeObserver(handleHeightChange);
-    resizeObserver.observe(document.body);
-  }
-
-  function handleHeightChange() {
-    const updatedHeight = getCurrentHeight();
-
-    if (height === updatedHeight) {
-      return;
-    }
-
-    const RESIZE_CODE = 'resize:';
-    height = updatedHeight;
-    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
-  }
-
-  function getCurrentHeight() {
-    return document.querySelector('#hbs-container').scrollHeight;
-  }
-})();
-
 // Data Updates Listeners.
 (function () {
   loadDataOptions();

layouts/scripts/dist/index.min.js

@@ -9486,7 +9486,8 @@ function Responsive(props = {}) {
   function updateController() {
     let frameBreakpoint = breakpoint;
     if (typeof frameBreakpoint !== 'string') {
-      frameBreakpoint = frameBreakpoint + 'px';
+      const scrollbarWidth = 15;
+      frameBreakpoint = scrollbarWidth + frameBreakpoint + 'px';
     }
     previewFrame.style.setProperty('--breakpoint', frameBreakpoint);
     previewFrame.classList.add('has-breakpoint');
@@ -10139,31 +10140,15 @@ function setupDataOptions(rootAttributes) {
   root.render(html);
 }
 
-function setupFrameResizeListener() {
-  const previewFrame = getPreviewFrame();
-  window.addEventListener('message', function (e) {
-    const RESIZE_CODE = 'resize:';
-    if (typeof e.data !== 'string' || !e.data.startsWith(RESIZE_CODE)) {
-      return;
-    }
-    const data = JSON.parse(e.data.substring(RESIZE_CODE.length));
-    let height = Number.parseInt(data.height);
-    if (height > 20000) {
-      height = 20000; // Limit max height.
-    }
-
-    previewFrame.style.height = height + 'px';
-  });
-}
-function getPreviewFrame() {
-  return document.getElementById('preview_frame');
-}
-
 const rootAttributes = {
   previewFrame: getPreviewFrame()
 };
-setupFrameResizeListener();
+
+// setupFrameResizeListener();
 setupResponsiveness(rootAttributes);
 setupDataOptions(rootAttributes);
 setupPublish(rootAttributes);
+function getPreviewFrame() {
+  return document.getElementById('preview_frame');
+}
 //# sourceMappingURL=index.min.js.map

layouts/scripts/frame/editor.js

@@ -1,21 +0,0 @@
-export function setupFrameResizeListener() {
-  const previewFrame = getPreviewFrame();
-
-  window.addEventListener('message', function (e) {
-    const RESIZE_CODE = 'resize:';
-    if (typeof e.data !== 'string' || !e.data.startsWith(RESIZE_CODE)) {
-      return;
-    }
-
-    const data = JSON.parse(e.data.substring(RESIZE_CODE.length))
-    let height = Number.parseInt(data.height)
-    if (height > 20000) {
-      height = 20000; // Limit max height.
-    }
-    previewFrame.style.height = height + 'px'
-  });
-}
-
-export function getPreviewFrame() {
-  return document.getElementById('preview_frame');
-}

layouts/scripts/frame/frame.js

@@ -15,46 +15,6 @@ function initBlock(blockName = '', selector = '', cb) {
   reload();
 }
 
-// Scrollbars / Frame resizes notifications.
-(function () {
-  let height;
-  const debug = false;
-
-  handleHeightChange(); // Initial frame's height setup.
-  setupResizeListener(); // Listen to frame's height changes.
-
-  ///
-
-  function setupResizeListener() {
-    const resizeObserver = new ResizeObserver(handleHeightChange);
-    resizeObserver.observe(document.body);
-  }
-
-  function handleHeightChange() {
-    const updatedHeight = getCurrentHeight();
-
-    if (debug) {
-      console.log('Height Updates', 'Old vs New: ' + height, updatedHeight);
-    }
-
-    if (height === updatedHeight) {
-      return;
-    }
-
-    const RESIZE_CODE = 'resize:';
-    height = updatedHeight;
-    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
-
-    if (debug) {
-      console.log('Resize message sent: ', height)
-    }
-  }
-
-  function getCurrentHeight() {
-    return document.querySelector('#hbs-container').scrollHeight;
-  }
-})();
-
 // Data Updates Listeners.
 (function () {
   loadDataOptions();

layouts/scripts/index.js

@@ -3,13 +3,16 @@
 import {setupResponsiveness} from './toolbar/responsive.jsx';
 import {setupPublish} from "./toolbar/publish.jsx";
 import {setupDataOptions} from "./toolbar/data-options/DataOptions.jsx";
-import {getPreviewFrame, setupFrameResizeListener} from "./frame/editor.js";
 
 const rootAttributes = {
   previewFrame: getPreviewFrame(),
 };
 
-setupFrameResizeListener();
+// setupFrameResizeListener();
 setupResponsiveness(rootAttributes);
 setupDataOptions(rootAttributes);
 setupPublish(rootAttributes);
+
+function getPreviewFrame() {
+  return document.getElementById('preview_frame');
+}

layouts/scripts/toolbar/responsive.jsx

@@ -65,7 +65,8 @@ function Responsive(props = {}) {
   function updateController() {
     let frameBreakpoint = breakpoint;
     if (typeof frameBreakpoint !== 'string') {
-      frameBreakpoint = frameBreakpoint + 'px';
+      const scrollbarWidth = 15;
+      frameBreakpoint = (scrollbarWidth + frameBreakpoint) + 'px';
     }
 
     previewFrame.style.setProperty('--breakpoint', frameBreakpoint);

layouts/styles/_page--preview.scss

@@ -1,5 +1,4 @@
 .preview {
-  overflow-y: scroll;
   height: calc(100% - var(--top_panel_height));
   position: relative;
 }
@@ -9,17 +8,14 @@
   margin-right: auto;
   margin-left: auto;
   min-height: 100%;
+  //height: 100%;
 
   --top_spacing: 0px;
   --breakpoint_top_spacing: 30px;
 
   margin-top: var(--top_spacing);
-  height: 100%;
   background-color: white;
-
   border: 0;
-  outline: 1px solid #E2E8F0;
-
   transition: max-width .3s ease-in-out, width .3s ease-in-out, margin-top .3s ease-in-out;
 
   &.has-breakpoint {

layouts/styles/_page--view-swiper.scss

@@ -1,9 +0,0 @@
-.swiper {
-  &-slide {
-    width: initial;
-  }
-
-  &-wrapper {
-    height: initial;
-  }
-}

layouts/styles/page--main.css

@@ -114,7 +114,6 @@ body {
 }
 
 .preview {
-  overflow-y: scroll;
   height: calc(100% - var(--top_panel_height));
   position: relative;
 }
@@ -127,10 +126,8 @@ body {
   --top_spacing: 0px;
   --breakpoint_top_spacing: 30px;
   margin-top: var(--top_spacing);
-  height: 100%;
   background-color: white;
   border: 0;
-  outline: 1px solid #E2E8F0;
   transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out, margin-top 0.3s ease-in-out;
 }
 #preview_frame.has-breakpoint {

layouts/styles/page--main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;;;AH6DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;EACA","file":"page--main.css"}
+{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EAEA;EACA;;;AHiEJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;EACA","file":"page--main.css"}

layouts/styles/page--view.css

@@ -2,24 +2,8 @@ body {
   margin: 0;
 }
 
-main {
-  margin-left: auto;
-  margin-right: auto;
-  min-height: 100%;
-  overflow-x: hidden;
-}
-main .swiper-slide {
-  width: initial;
-}
-main .swiper-wrapper {
-  height: initial;
-}
-
 .body--iframe {
-  overflow-y: hidden;
+  overflow-y: scroll;
-}
-.body--iframe main {
-  overflow-y: auto;
 }
 
 .fullscreen_layout {

layouts/styles/page--view.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--view.scss","_page--view-swiper.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;;ACPA;EACE;;AAGF;EACE;;;ADSJ;EACE;;AAEA;EAGE;;;AAIJ;EACE;EACA;EACA;EACA","file":"page--view.css"}
+{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;;;AAIF;EACE;;;AAGF;EACE;EACA;EACA;EACA","file":"page--view.css"}

layouts/styles/page--view.scss

@@ -2,25 +2,9 @@ body {
   margin: 0;
 }
 
-main {
-  margin-left: auto;
-  margin-right: auto;
-  min-height: 100%;
-  overflow-x: hidden;
-
-  // Fixes scrolling issues of swiperJS. Should be included in all projects.
-  @import "page--view-swiper";
-}
-
 // iFrame mode
 .body--iframe {
-  overflow-y: hidden;
+  overflow-y: scroll;
-
-  main {
-    // If you change to "overflow: initial", the margin-top/bottom of first/last element will be not included.
-    // Test on fresh block setup where heading has margin-top.
-    overflow-y: auto;
-  }
 }
 
 .fullscreen_layout {
@@ -29,4 +13,3 @@ main {
   background-image: url('https://i.ibb.co/pjwL8D1/shapelined-JBKdviwe-XI-unsplash.jpg');
   background-size: cover;
 }
-

package.json

@@ -7,9 +7,9 @@
 		"url": "https://axe-web.com/"
 	},
 	"scripts": {
-		"info": "NODE_ENV=development BLOCK_NAME=colors MODULE_PATH= node debug.js",
+		"info": "NODE_ENV=development BLOCK_NAME=swiper-test MODULE_PATH= node debug.js",
-		"dev": "NODE_ENV=development BLOCK_NAME=colors MODULE_PATH= node server.js",
+		"dev": "NODE_ENV=development BLOCK_NAME=swiper-test MODULE_PATH= node server.js",
-		"build-platform": "NODE_ENV=development BLOCK_NAME=colors MODULE_PATH= node ./build.js",
+		"build-platform": "NODE_ENV=development BLOCK_NAME=swiper-test MODULE_PATH= node ./build.js",
 		"dev-dev-tool": "NODE_ENV=development rollup --config rollup.config.js --watch",
 		"build-dev-tool": "rollup --config rollup.config.js"
 	},

server.js

@@ -120,23 +120,33 @@ app.get('/', (req, res) => {
 });
 
 app.get('/view/:baseView', (req, res) => {
-  const data = {config: getBlockConfigs({modulesPath, dataFiles})};
+  const data = getDataOfFrame(!!req.query.iframe);
+
   if (data.error && data.errorMessage) {
     return res.send(data.errorMessage);
   }
 
+  const baseView = req.params.baseView ?? DEFAULT_VIEW_LAYOUT;
+
+  res.render(baseView, data)
+});
+
+function getDataOfFrame(isIframe = false) {
+  const data = {config: getBlockConfigs({modulesPath, dataFiles})};
+  if (data.error && data.errorMessage) {
+    return data;
+  }
+
   data.helpers = {
     include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
   }
 
-  if (!!req.query.iframe) {
+  if (isIframe) {
     data.iframeMode = true;
   }
 
-  const baseView = req.params.baseView ?? DEFAULT_VIEW_LAYOUT;
+  return data;
-
+}
-  res.render(baseView, data)
-});
 
 app.get('/publish', async (req, res) => {
   const data = await readJSONFile(path.join(projectPath, `block.json`));