diff --git a/layouts/alignfull.hbs b/layouts/alignfull.hbs index ca72bd2..2a123da 100644 --- a/layouts/alignfull.hbs +++ b/layouts/alignfull.hbs @@ -2,7 +2,7 @@ {{> (include_partial "layouts/partials/head") }} - +
{{> (include_block_template) }} diff --git a/layouts/container.hbs b/layouts/container.hbs index 2dd26e7..b1f559f 100644 --- a/layouts/container.hbs +++ b/layouts/container.hbs @@ -2,7 +2,7 @@ {{> (include_partial "layouts/partials/head") }} - +
diff --git a/layouts/index.hbs b/layouts/index.hbs index fa129c1..0199dbb 100644 --- a/layouts/index.hbs +++ b/layouts/index.hbs @@ -18,7 +18,7 @@
- +
diff --git a/layouts/scripts/dist/index.min.js b/layouts/scripts/dist/index.min.js index 410c28c..94a7fcf 100644 --- a/layouts/scripts/dist/index.min.js +++ b/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,{rootAttributes:e});n.render(r)}(Rp),function(e){const t=document.createElement("div");document.querySelector(".page_toolbar__left").prepend(t);const n=jc(t),r=F.createElement(Tp,{rootAttributes:e});n.render(r)}(Rp),function(e){const t=document.createElement("div");document.querySelector(".page_toolbar__right").append(t);const n=jc(t),r=F.createElement(kp,{rootAttributes:e});n.render(r)}(Rp); +`;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(".page_toolbar__middle").prepend(t);const n=jc(t),r=F.createElement(bp,{rootAttributes:e});n.render(r)}(Rp),function(e){const t=document.createElement("div");document.querySelector(".page_toolbar__left").prepend(t);const n=jc(t),r=F.createElement(Tp,{rootAttributes:e});n.render(r)}(Rp),function(e){const t=document.createElement("div");document.querySelector(".page_toolbar__right").append(t);const n=jc(t),r=F.createElement(kp,{rootAttributes:e});n.render(r)}(Rp); diff --git a/layouts/scripts/toolbar/data-options/DataOptions.jsx b/layouts/scripts/toolbar/data-options/DataOptions.jsx index baa0641..60efb85 100644 --- 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})); diff --git a/layouts/styles/page--view.css b/layouts/styles/page--view.css index 8db2402..2ec90db 100644 --- 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 */ diff --git a/layouts/styles/page--view.css.map b/layouts/styles/page--view.css.map index a26b221..be478d6 100644 --- 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"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAIF;EACE;;AAEA;EACE","file":"page--view.css"} \ No newline at end of file diff --git a/layouts/styles/page--view.scss b/layouts/styles/page--view.scss index 1bac5da..8ab9f21 100644 --- 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; + } +} diff --git a/server.js b/server.js index 75892a2..bd069af 100755 --- 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';