Fix scrolling issues of iFrame.

layouts/alignfull.hbs

@@ -2,7 +2,7 @@
 
 {{> (include_partial "layouts/partials/head") }}
 
-<body>
+<body class="{{#if iframeMode}}body--iframe{{/if}}">
 
 <main>
   {{> (include_block_template) }}

layouts/container.hbs

@@ -2,7 +2,7 @@
 
 {{> (include_partial "layouts/partials/head") }}
 
-<body>
+<body class="{{#if iframeMode}}body--iframe{{/if}}">
 
 <main>
   <div class="container">

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>

layouts/scripts/dist/index.min.js

@@ -244,4 +244,4 @@ var U=t.exports,B=$.exports;function V(e){for(var t="https://reactjs.org/docs/er
   background-repeat: no-repeat;
   background-position: top;
   cursor: move;
-`;let zp={x:0,y:0};function Np({previewOption:e={widthDimension:0}}){const n=t.exports.createRef(),[r,a]=t.exports.useState(!1),[l,o]=t.exports.useState({x:m(e),y:0}),[i,u]=t.exports.useState(85),s=t.exports.useCallback((function(e){if(!r)return;const t=e.shiftKey?10:1;"ArrowUp"===e.key?p({y:-1*t},!0):"ArrowDown"===e.key?p({y:t},!0):"ArrowLeft"===e.key?p({x:-1*t},!0):"ArrowRight"===e.key&&p({x:t},!0)}),[l,r]);if(t.exports.useEffect((()=>(document.addEventListener("keydown",s),()=>{document.removeEventListener("keydown",s)})),[s]),t.exports.useEffect((()=>(p({x:m(e),y:0}),window.addEventListener("message",h),()=>window.removeEventListener("message",h))),[e.widthDimension]),!e)return;const c=!e.url,f=[];!c&&r&&f.push("active"),c&&f.push("disabled");return F.createElement(F.Fragment,null,F.createElement(_p,{onClick:()=>{a(!r)},className:f.join(" "),disabled:c}),r&&!c&&F.createElement(F.Fragment,null,F.createElement("input",{type:"range",value:i,min:"0",max:"100",onChange:e=>{u(e.target.value)}}),F.createElement(Pp,{onMouseUp:e=>function(e){const t=n.current;p({x:t.offsetLeft,y:t.offsetTop}),document.body.removeEventListener("mousemove",d)}(),style:{opacity:i/100}},F.createElement("img",{src:e.url,alt:"",ref:n,onMouseDown:e=>function(e){zp.x=e.clientX,zp.y=e.clientY,document.body.addEventListener("mousemove",d)}(e),draggable:!1,style:{top:l.y+"px",left:l.x+"px"}}))));function d(e){const t=n.current;if(t){const n={x:t.offsetLeft-(zp.x-e.clientX),y:t.offsetTop-(zp.y-e.clientY)};t.style.left=n.x+"px",t.style.top=n.y+"px",zp.x=e.clientX,zp.y=e.clientY}}function p({x:e,y:t},n=!1){e=void 0===e?l.x:n?l.x+e:e,t=void 0===t?l.y:n?l.y+t:t,o({x:e,y:t})}function m(e){if(!e)return 0;return window.innerWidth/2-e.widthDimension/2-7}function h(t){"responsiveUpdate"===t.data&&"100%"===window.responsiveState.breakpoint&&p({x:m(e),y:0})}}function Tp(e={}){e.rootAttributes=e.rootAttributes??{};const[n,r]=t.exports.useState({dataName:"default",data:{},dataOptions:[],designPreview:[]}),[a,l]=t.exports.useState(d(n.dataName,n.designPreview)),o=e=>r(Object.assign({},n,e)),[i,u]=t.exports.useState(!1);t.exports.useEffect((async()=>{const e=await f(n.dataName);o(e)}),[]);const s=t.exports.useCallback((e=>{vp(e)&&c()}),[]);t.exports.useEffect((()=>(document.addEventListener("keydown",s),()=>{document.removeEventListener("keydown",s)})),[s]),t.exports.useEffect((()=>(window.addEventListener("message",p),()=>window.removeEventListener("message",p))),[n]),t.exports.useEffect((()=>{l(d(n.dataName,n.designPreview))}),[n.designPreview]);return F.createElement("div",{style:{display:"flex",gap:"1rem",alignItems:"center"}},F.createElement(xp,{onClick:()=>(u(!0),void setTimeout((()=>document.querySelector(".sidebar-active").focus()))),title:"Open a Sidebar with Data Options"}),F.createElement(Np,{previewOption:a}),F.createElement(wp,{className:i?"active sidebar-active":"",tabIndex:"0",onBlur:async e=>await gp(e)?c():null},F.createElement(Sp,null,F.createElement(Cp,{onClick:()=>c()})),n.dataOptions&&!!n.dataOptions.length&&F.createElement(Ep,null,F.createElement("label",{htmlFor:"data-options"},"Data Options"),F.createElement("select",{name:"data",id:"data-options",onChange:t=>async function(t){const n=t.target.value;e.rootAttributes.previewFrame.src=window.devTool.previewFrameUrl+"?data="+n;const r=await f(n);o(Object.assign({},r,{dataName:n}))}(t),value:n.dataName},n.dataOptions.map((e=>{const t=n.dataName===e;return F.createElement("option",{value:e,selected:t},e)})))),n.data&&F.createElement("pre",null,JSON.stringify(n.data,null,2)),F.createElement("button",{className:"btn btn--secondary",onClick:e=>function(e,t){e.stopPropagation(),"string"!=typeof t&&(t=JSON.stringify(t,null,2));if(navigator.clipboard&&window.isSecureContext)return navigator.clipboard.writeText(t);{let n=document.createElement("textarea");return n.value=t,n.style.position="fixed",n.style.left="-999999px",n.style.top="-999999px",document.body.appendChild(n),n.select(),new Promise(((t,r)=>{document.execCommand("copy")?t():r(),n.remove(),e.target.focus()}))}}(e,n.data)},"Copy to Clipboard")));function c(){u(!1)}async function f(e="default"){const t=new URLSearchParams({name:e}),n=await fetch(`/data?${t}`);return await n.json()}function d(e,t=[]){const n=t.filter((t=>t.dataSource===e));n.sort(((e,t)=>t.widthDimension-e.widthDimension));let r=window.responsiveState.breakpoint;return"100%"===r&&(r=window.innerWidth),n.find((e=>r>=e.widthDimension))}function p(e){"responsiveUpdate"===e.data&&l(d(n.dataName,n.designPreview))}}function Lp(){return document.getElementById("preview_frame")}const Rp={previewFrame:Lp()};!function(){const e=Lp();window.addEventListener("message",(function(t){const n="resize:";if("string"!=typeof t.data||!t.data.startsWith(n))return;const r=JSON.parse(t.data.substring(n.length));e.style.height=r.height+"px"}))}(),function(e){const t=document.createElement("div");document.querySelector(".page_toolbar__middle").prepend(t);const n=jc(t),r=F.createElement(bp,{r
Line truncated
+`;let zp={x:0,y:0};function Np({previewOption:e={widthDimension:0}}){const n=t.exports.createRef(),[r,a]=t.exports.useState(!1),[l,o]=t.exports.useState({x:m(e),y:0}),[i,u]=t.exports.useState(85),s=t.exports.useCallback((function(e){if(!r)return;const t=e.shiftKey?10:1;"ArrowUp"===e.key?p({y:-1*t},!0):"ArrowDown"===e.key?p({y:t},!0):"ArrowLeft"===e.key?p({x:-1*t},!0):"ArrowRight"===e.key&&p({x:t},!0)}),[l,r]);if(t.exports.useEffect((()=>(document.addEventListener("keydown",s),()=>{document.removeEventListener("keydown",s)})),[s]),t.exports.useEffect((()=>(p({x:m(e),y:0}),window.addEventListener("message",h),()=>window.removeEventListener("message",h))),[e.widthDimension]),!e)return;const c=!e.url,f=[];!c&&r&&f.push("active"),c&&f.push("disabled");return F.createElement(F.Fragment,null,F.createElement(_p,{onClick:()=>{a(!r)},className:f.join(" "),disabled:c}),r&&!c&&F.createElement(F.Fragment,null,F.createElement("input",{type:"range",value:i,min:"0",max:"100",onChange:e=>{u(e.target.value)}}),F.createElement(Pp,{onMouseUp:e=>function(e){const t=n.current;p({x:t.offsetLeft,y:t.offsetTop}),document.body.removeEventListener("mousemove",d)}(),style:{opacity:i/100}},F.createElement("img",{src:e.url,alt:"",ref:n,onMouseDown:e=>function(e){zp.x=e.clientX,zp.y=e.clientY,document.body.addEventListener("mousemove",d)}(e),draggable:!1,style:{top:l.y+"px",left:l.x+"px"}}))));function d(e){const t=n.current;if(t){const n={x:t.offsetLeft-(zp.x-e.clientX),y:t.offsetTop-(zp.y-e.clientY)};t.style.left=n.x+"px",t.style.top=n.y+"px",zp.x=e.clientX,zp.y=e.clientY}}function p({x:e,y:t},n=!1){e=void 0===e?l.x:n?l.x+e:e,t=void 0===t?l.y:n?l.y+t:t,o({x:e,y:t})}function m(e){if(!e)return 0;return window.innerWidth/2-e.widthDimension/2-7}function h(t){"responsiveUpdate"===t.data&&"100%"===window.responsiveState.breakpoint&&p({x:m(e),y:0})}}function Tp(e={}){e.rootAttributes=e.rootAttributes??{};const[n,r]=t.exports.useState({dataName:"default",data:{},dataOptions:[],designPreview:[]}),[a,l]=t.exports.useState(d(n.dataName,n.designPreview)),o=e=>r(Object.assign({},n,e)),[i,u]=t.exports.useState(!1);t.exports.useEffect((async()=>{const e=await f(n.dataName);o(e)}),[]);const s=t.exports.useCallback((e=>{vp(e)&&c()}),[]);t.exports.useEffect((()=>(document.addEventListener("keydown",s),()=>{document.removeEventListener("keydown",s)})),[s]),t.exports.useEffect((()=>(window.addEventListener("message",p),()=>window.removeEventListener("message",p))),[n]),t.exports.useEffect((()=>{l(d(n.dataName,n.designPreview))}),[n.designPreview]);return F.createElement("div",{style:{display:"flex",gap:"1rem",alignItems:"center"}},F.createElement(xp,{onClick:()=>(u(!0),void setTimeout((()=>document.querySelector(".sidebar-active").focus()))),title:"Open a Sidebar with Data Options"}),F.createElement(Np,{previewOption:a}),F.createElement(wp,{className:i?"active sidebar-active":"",tabIndex:"0",onBlur:async e=>await gp(e)?c():null},F.createElement(Sp,null,F.createElement(Cp,{onClick:()=>c()})),n.dataOptions&&!!n.dataOptions.length&&F.createElement(Ep,null,F.createElement("label",{htmlFor:"data-options"},"Data Options"),F.createElement("select",{name:"data",id:"data-options",onChange:t=>async function(t){const n=t.target.value,r=new URL(window.devTool.previewFrameUrl);r.searchParams.set("data",n),r.searchParams.set("iframe","true"),e.rootAttributes.previewFrame.src=r.href;const a=await f(n);o(Object.assign({},a,{dataName:n}))}(t),value:n.dataName},n.dataOptions.map((e=>{const t=n.dataName===e;return F.createElement("option",{value:e,selected:t},e)})))),n.data&&F.createElement("pre",null,JSON.stringify(n.data,null,2)),F.createElement("button",{className:"btn btn--secondary",onClick:e=>function(e,t){e.stopPropagation(),"string"!=typeof t&&(t=JSON.stringify(t,null,2));if(navigator.clipboard&&window.isSecureContext)return navigator.clipboard.writeText(t);{let n=document.createElement("textarea");return n.value=t,n.style.position="fixed",n.style.left="-999999px",n.style.top="-999999px",document.body.appendChild(n),n.select(),new Promise(((t,r)=>{document.execCommand("copy")?t():r(),n.remove(),e.target.focus()}))}}(e,n.data)},"Copy to Clipboard")));function c(){u(!1)}async function f(e="default"){const t=new URLSearchParams({name:e}),n=await fetch(`/data?${t}`);return await n.json()}function d(e,t=[]){const n=t.filter((t=>t.dataSource===e));n.sort(((e,t)=>t.widthDimension-e.widthDimension));let r=window.responsiveState.breakpoint;return"100%"===r&&(r=window.innerWidth),n.find((e=>r>=e.widthDimension))}function p(e){"responsiveUpdate"===e.data&&l(d(n.dataName,n.designPreview))}}function Lp(){return document.getElementById("preview_frame")}const Rp={previewFrame:Lp()};!function(){const e=Lp();window.addEventListener("message",(function(t){const n="resize:";if("string"!=typeof t.data||!t.data.startsWith(n))return;const r=JSON.parse(t.data.substring(n.length));e.style.height=r.height+"px"}))}(),function(e){const t=document.createElement("div");document.querySelector("
Line truncated

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

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 */

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"}

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).
+// 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

@@ -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';