Fix scrolling issues of iFrame.

This commit is contained in:
2022-12-06 11:32:14 +02:00
parent 161e34e8ee
commit b58ef27f1e
9 changed files with 31 additions and 17 deletions
+1 -1
View File
@@ -2,7 +2,7 @@
{{> (include_partial "layouts/partials/head") }}
<body>
<body class="{{#if iframeMode}}body--iframe{{/if}}">
<main>
{{> (include_block_template) }}
+1 -1
View File
@@ -2,7 +2,7 @@
{{> (include_partial "layouts/partials/head") }}
<body>
<body class="{{#if iframeMode}}body--iframe{{/if}}">
<main>
<div class="container">
+1 -1
View File
@@ -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>
+1 -1
View File
File diff suppressed because one or more lines are too long
@@ -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}));
+7 -1
View File
@@ -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 */
+1 -1
View File
@@ -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"}
+8 -9
View File
@@ -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;
}
}
+5 -1
View File
@@ -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';