axe-web-public/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix scrolling issues of iFrame.

Browse Source
This commit is contained in:
Roman Axelrod
2022-12-06 11:32:14 +02:00
parent 161e34e8ee
commit b58ef27f1e
9 changed files with 31 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/alignfull.hbs
+1 -1
View File
@@ -2,7 +2,7 @@
{{> (include_partial "layouts/partials/head") }} {{> (include_partial "layouts/partials/head") }}
<body> <body class="{{#if iframeMode}}body--iframe{{/if}}">
<main> <main>
{{> (include_block_template) }} {{> (include_block_template) }}
layouts/container.hbs
+1 -1
View File
@@ -2,7 +2,7 @@
{{> (include_partial "layouts/partials/head") }} {{> (include_partial "layouts/partials/head") }}
<body> <body class="{{#if iframeMode}}body--iframe{{/if}}">
<main> <main>
<div class="container"> <div class="container">
layouts/index.hbs
+1 -1
View File
@@ -18,7 +18,7 @@
</script> </script>
<div class="preview"> <div class="preview">
<iframe id="preview_frame" src="{{ previewFrameUrl }}" class="breakpoint"></iframe> <iframe id="preview_frame" src="{{ previewFrameUrl }}?iframe=true" class="breakpoint"></iframe>
</div> </div>
<script src="/scripts/dist/index.min.js"></script> <script src="/scripts/dist/index.min.js"></script>
layouts/scripts/dist/index.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
layouts/scripts/toolbar/data-options/DataOptions.jsx
+6 -1
View File
@@ -98,7 +98,12 @@ function DataOptions(props = {}) {
async function changeDataOption(e) { async function changeDataOption(e) {
const dataName = e.target.value; 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); const dataOption = await fetchDataOptions(dataName);
updateState(Object.assign({}, dataOption, {dataName})); updateState(Object.assign({}, dataOption, {dataName}));
layouts/styles/page--view.css
+7 -1
View File
@@ -1,6 +1,5 @@
body { body {
margin: 0; margin: 0;
overflow-y: hidden;
} }
main { main {
@@ -8,4 +7,11 @@ main {
margin-right: auto; margin-right: auto;
} }
.body--iframe {
overflow-y: hidden;
}
.body--iframe main {
overflow: auto;
}
/*# sourceMappingURL=page--view.css.map */ /*# sourceMappingURL=page--view.css.map */
layouts/styles/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"}
layouts/styles/page--view.scss
+8 -9
View File
@@ -1,6 +1,5 @@
body { body {
margin: 0; margin: 0;
overflow-y: hidden;
} }
main { main {
@@ -8,11 +7,11 @@ main {
margin-right: auto; margin-right: auto;
} }
// Container rules must be provided by the projectStyles (theme). // iFrame mode
//.container { .body--iframe {
// max-width: 1200px; overflow-y: hidden;
// margin-left: auto;
// margin-right: auto; main {
// padding-left: 15px; overflow: auto;
// padding-right: 15px; }
//} }
server.js
+5 -1
View File
@@ -97,7 +97,11 @@ app.get('/view/:baseView', async (req, res) => {
include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath), include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
include_block_template: () => handlebarLayoutsPath(projectPath, 'src', `${blockName}.template`), include_block_template: () => handlebarLayoutsPath(projectPath, 'src', `${blockName}.template`),
section_class: `${blockName}--${jsonFileName}`, section_class: `${blockName}--${jsonFileName}`,
base_url: '/' base_url: '/',
}
if (!!req.query.iframe) {
data.iframeMode = true;
} }
const baseView = req.params.baseView ?? 'container'; const baseView = req.params.baseView ?? 'container';