Fix scrolling issues of iFrame.

3 years ago · b58ef27f1e
9 changed files with 31 additions and 17 deletions
--- a/layouts/alignfull.hbs
+++ b/layouts/alignfull.hbs
@ -2,7 +2,7 @@

 {{> (include_partial "layouts/partials/head") }}

-<body>
+<body class="{{#if iframeMode}}body--iframe{{/if}}">

 <main>
  {{> (include_block_template) }}
--- a/layouts/container.hbs
+++ b/layouts/container.hbs
@ -2,7 +2,7 @@

 {{> (include_partial "layouts/partials/head") }}

-<body>
+<body class="{{#if iframeMode}}body--iframe{{/if}}">

 <main>
  <div class="container">
--- a/layouts/index.hbs
+++ b/layouts/index.hbs
@ -18,7 +18,7 @@
 </script>

 <div class="preview">
-  <iframe id="preview_frame" src="{{ previewFrameUrl }}" class="breakpoint"></iframe>
+  <iframe id="preview_frame" src="{{ previewFrameUrl }}?iframe=true" class="breakpoint"></iframe>
 </div>

 <script src="/scripts/dist/index.min.js"></script>
--- a/layouts/scripts/dist/index.min.js
+++ b/layouts/scripts/dist/index.min.js
--- a/layouts/scripts/toolbar/data-options/DataOptions.jsx
+++ b/layouts/scripts/toolbar/data-options/DataOptions.jsx
@ -98,7 +98,12 @@ function DataOptions(props = {}) {

  async function changeDataOption(e) {
    const dataName = e.target.value;
-    props.rootAttributes.previewFrame.src = window.devTool.previewFrameUrl + '?data=' + dataName;
+
+    const previewFrameUrl = new URL(window.devTool.previewFrameUrl);
+    previewFrameUrl.searchParams.set('data', dataName);
+    previewFrameUrl.searchParams.set('iframe', 'true');
+
+    props.rootAttributes.previewFrame.src = previewFrameUrl.href;

    const dataOption = await fetchDataOptions(dataName);
    updateState(Object.assign({}, dataOption, {dataName}));
--- a/layouts/styles/page--view.css
+++ b/layouts/styles/page--view.css
@ -1,6 +1,5 @@
 body {
  margin: 0;
-  overflow-y: hidden;
 }

 main {
@ -8,4 +7,11 @@ main {
  margin-right: auto;
 }

+.body--iframe {
+  overflow-y: hidden;
+}
+.body--iframe main {
+  overflow: auto;
+}
+
 /*# sourceMappingURL=page--view.css.map */
--- a/layouts/styles/page--view.css.map
+++ b/layouts/styles/page--view.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA","file":"page--view.css"}
+{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAIF;EACE;;AAEA;EACE","file":"page--view.css"}
--- a/layouts/styles/page--view.scss
+++ b/layouts/styles/page--view.scss
@ -1,6 +1,5 @@
 body {
  margin: 0;
-  overflow-y: hidden;
 }

 main {
@ -8,11 +7,11 @@ main {
  margin-right: auto;
 }

-// Container rules must be provided by the projectStyles (theme).
-//.container {
-//  max-width: 1200px;
-//  margin-left: auto;
-//  margin-right: auto;
-//  padding-left: 15px;
-//  padding-right: 15px;
-//}
+// iFrame mode
+.body--iframe {
+  overflow-y: hidden;
+
+  main {
+    overflow: auto;
+  }
+}
--- a/server.js
+++ b/server.js
@ -97,7 +97,11 @@ app.get('/view/:baseView', async (req, res) => {
    include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
    include_block_template: () => handlebarLayoutsPath(projectPath, 'src', `${blockName}.template`),
    section_class: `${blockName}--${jsonFileName}`,
-    base_url: '/'
+    base_url: '/',
+  }
+
+  if (!!req.query.iframe) {
+    data.iframeMode = true;
  }

  const baseView = req.params.baseView ?? 'container';