From 1a19d63192179831a746ee714c7b3081be306329 Mon Sep 17 00:00:00 2001 From: Roman Axelrod Date: Wed, 14 Dec 2022 00:23:53 +0200 Subject: [PATCH] Set Height limit to frame. --- layouts/scripts/dist/index.min.js | 2 +- layouts/scripts/frame/editor.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/layouts/scripts/dist/index.min.js b/layouts/scripts/dist/index.min.js index 94a7fcf..1598b89 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,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); +`;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));let a=Number.parseInt(r.height);a>2e4&&(a=2e4),e.style.height=a+"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/frame/editor.js b/layouts/scripts/frame/editor.js index 90c85e2..66caa8b 100644 --- a/layouts/scripts/frame/editor.js +++ b/layouts/scripts/frame/editor.js @@ -8,7 +8,11 @@ export function setupFrameResizeListener() { } const data = JSON.parse(e.data.substring(RESIZE_CODE.length)) - previewFrame.style.height = data.height + 'px' + let height = Number.parseInt(data.height) + if (height > 20000) { + height = 20000; // Limit max height. + } + previewFrame.style.height = height + 'px' }); }