From 044f721d347806f081159452c1529fa477feb45e Mon Sep 17 00:00:00 2001 From: Roman Axelrod Date: Sun, 23 Jun 2024 20:24:57 -0600 Subject: [PATCH] Updated logic of mobile/tablet sizes & scrollbars. --- layouts/scripts/dist/index.min.js | 2 +- layouts/scripts/toolbar/data-options/DesignPreview.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/layouts/scripts/dist/index.min.js b/layouts/scripts/dist/index.min.js index f63adec..cf46b29 100644 --- a/layouts/scripts/dist/index.min.js +++ b/layouts/scripts/dist/index.min.js @@ -261,4 +261,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 M.createElement(M.Fragment,null,M.createElement(_p,{onClick:()=>{a(!r)},className:f.join(" "),disabled:c}),r&&!c&&M.createElement(M.Fragment,null,M.createElement("input",{type:"range",value:i,min:"0",max:"100",onChange:e=>{u(e.target.value)}}),M.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}},M.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:{},dataText:"{}",dataOptions:[],designPreview:[],errorMessage:null,loading:!1}),[a,l]=t.exports.useState(f(n.dataName,n.designPreview)),o=e=>r(Object.assign({},n,e)),[i,u]=t.exports.useState(!1);t.exports.useEffect((async()=>{await p(n.dataName)}),[]);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",d),()=>window.removeEventListener("message",d))),[n]),t.exports.useEffect((()=>{l(f(n.dataName,n.designPreview))}),[n.designPreview]);return M.createElement("div",{style:{display:"flex",gap:"1rem",alignItems:"center"}},M.createElement(xp,{onClick:()=>(u(!0),void setTimeout((()=>document.querySelector(".sidebar-active").focus()))),title:"Open a Sidebar with Data Options"}),M.createElement(Np,{previewOption:a}),M.createElement(wp,{className:i?"active sidebar-active":"",tabIndex:"0",onBlur:async e=>await gp(e)?c():null},M.createElement(Sp,null,M.createElement(Cp,{onClick:()=>c()})),n.dataOptions&&!!n.dataOptions.length&&M.createElement(Ep,null,M.createElement("label",{htmlFor:"data-options"},"Data Options"),M.createElement("select",{name:"data",id:"data-options",onChange:e=>async function(e){const t=e.target.value;await p(t)}(e),value:n.dataName,disabled:n.loading},n.dataOptions.map((e=>{const t=n.dataName===e;return M.createElement("option",{value:e,selected:t},e)})))),n.data&&M.createElement("textarea",{value:n.dataText,onChange:function(e){let t;try{t=JSON.parse(e.target.value)}catch(t){return void o({dataText:e.target.value,errorMessage:"Invalid JSON, please review and try again."})}o({dataText:e.target.value,data:t,errorMessage:null}),m(t)},disabled:n.loading}),n.errorMessage&&M.createElement("p",{className:"alert alert--error"},n.errorMessage),n.loading&&M.createElement("p",{className:"alert"},"Loading, please wait..."),M.createElement("div",{className:"actions"},M.createElement("button",{className:"btn btn--secondary",disabled:n.loading,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"),M.createElement("button",{className:"btn btn--secondary",disabled:n.loading,onClick:e=>function(){const e="https://blocks-registery.axe-web.com/content-generator/",t=new Headers;t.append("Content-Type","application/json");const r={method:"POST",headers:t,body:JSON.stringify({json:n.data})};return o({loading:!0,errorMessage:null}),fetch(e,r).then((e=>e.json())).then((e=>{if(console.log(e),200!==e.statusCode)throw new Error(e.message);const t=e.variation;o({dataText:JSON.stringify(t,null,2),data:t,errorMessage:null,loading:!1}),m(t)})).catch((e=>{o({loading:!1,errorMessage:"Something went wrong, please try again."})}))}(n.data)},"Generate Test"))));function c(){u(!1)}function f(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 d(e){"responsiveUpdate"===e.data&&l(f(n.dataName,n.designPreview))}async function p(e){const t=await async function(e="default"){const t=new URLSearchParams({name:e}),n=await fetch(`/data?${t}`);return await n.json()}(e);m(t.data);const n=Object.assign({errorMessage:null},t,{dataName:e},{dataText:JSON.stringify(t.data,null,2)});o(n)}function m(t){e.rootAttributes.previewFrame.contentWindow.postMessage("dataUpdate:"+JSON.stringify(t||{}),"*")}}const Lp={previewFrame:document.getElementById("preview_frame")};!function(e){const t=document.createElement("div");document.querySelector(".page_toolbar__middle").prepend(t);const n=jc(t),r=M.createElement(bp,{rootAttributes:e});n.render(r)}(Lp),function(e){const t=document.createElement("div");document.querySelector(".page_toolbar__left").prepend(t);const n=jc(t),r=M.createElement(Tp,{rootAttributes:e});n.render(r)}(Lp),function(e){const t=document.createElement("div");document.querySelector(".page_toolbar__right").append(t);const n=jc(t),r=M.createElement(kp,{rootAttributes:e});n.render(r)}(Lp); +`;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 M.createElement(M.Fragment,null,M.createElement(_p,{onClick:()=>{a(!r)},className:f.join(" "),disabled:c}),r&&!c&&M.createElement(M.Fragment,null,M.createElement("input",{type:"range",value:i,min:"0",max:"100",onChange:e=>{u(e.target.value)}}),M.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}},M.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-0}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:{},dataText:"{}",dataOptions:[],designPreview:[],errorMessage:null,loading:!1}),[a,l]=t.exports.useState(f(n.dataName,n.designPreview)),o=e=>r(Object.assign({},n,e)),[i,u]=t.exports.useState(!1);t.exports.useEffect((async()=>{await p(n.dataName)}),[]);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",d),()=>window.removeEventListener("message",d))),[n]),t.exports.useEffect((()=>{l(f(n.dataName,n.designPreview))}),[n.designPreview]);return M.createElement("div",{style:{display:"flex",gap:"1rem",alignItems:"center"}},M.createElement(xp,{onClick:()=>(u(!0),void setTimeout((()=>document.querySelector(".sidebar-active").focus()))),title:"Open a Sidebar with Data Options"}),M.createElement(Np,{previewOption:a}),M.createElement(wp,{className:i?"active sidebar-active":"",tabIndex:"0",onBlur:async e=>await gp(e)?c():null},M.createElement(Sp,null,M.createElement(Cp,{onClick:()=>c()})),n.dataOptions&&!!n.dataOptions.length&&M.createElement(Ep,null,M.createElement("label",{htmlFor:"data-options"},"Data Options"),M.createElement("select",{name:"data",id:"data-options",onChange:e=>async function(e){const t=e.target.value;await p(t)}(e),value:n.dataName,disabled:n.loading},n.dataOptions.map((e=>{const t=n.dataName===e;return M.createElement("option",{value:e,selected:t},e)})))),n.data&&M.createElement("textarea",{value:n.dataText,onChange:function(e){let t;try{t=JSON.parse(e.target.value)}catch(t){return void o({dataText:e.target.value,errorMessage:"Invalid JSON, please review and try again."})}o({dataText:e.target.value,data:t,errorMessage:null}),m(t)},disabled:n.loading}),n.errorMessage&&M.createElement("p",{className:"alert alert--error"},n.errorMessage),n.loading&&M.createElement("p",{className:"alert"},"Loading, please wait..."),M.createElement("div",{className:"actions"},M.createElement("button",{className:"btn btn--secondary",disabled:n.loading,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"),M.createElement("button",{className:"btn btn--secondary",disabled:n.loading,onClick:e=>function(){const e="https://blocks-registery.axe-web.com/content-generator/",t=new Headers;t.append("Content-Type","application/json");const r={method:"POST",headers:t,body:JSON.stringify({json:n.data})};return o({loading:!0,errorMessage:null}),fetch(e,r).then((e=>e.json())).then((e=>{if(console.log(e),200!==e.statusCode)throw new Error(e.message);const t=e.variation;o({dataText:JSON.stringify(t,null,2),data:t,errorMessage:null,loading:!1}),m(t)})).catch((e=>{o({loading:!1,errorMessage:"Something went wrong, please try again."})}))}(n.data)},"Generate Test"))));function c(){u(!1)}function f(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 d(e){"responsiveUpdate"===e.data&&l(f(n.dataName,n.designPreview))}async function p(e){const t=await async function(e="default"){const t=new URLSearchParams({name:e}),n=await fetch(`/data?${t}`);return await n.json()}(e);m(t.data);const n=Object.assign({errorMessage:null},t,{dataName:e},{dataText:JSON.stringify(t.data,null,2)});o(n)}function m(t){e.rootAttributes.previewFrame.contentWindow.postMessage("dataUpdate:"+JSON.stringify(t||{}),"*")}}const Lp={previewFrame:document.getElementById("preview_frame")};!function(e){const t=document.createElement("div");document.querySelector(".page_toolbar__middle").prepend(t);const n=jc(t),r=M.createElement(bp,{rootAttributes:e});n.render(r)}(Lp),function(e){const t=document.createElement("div");document.querySelector(".page_toolbar__left").prepend(t);const n=jc(t),r=M.createElement(Tp,{rootAttributes:e});n.render(r)}(Lp),function(e){const t=document.createElement("div");document.querySelector(".page_toolbar__right").append(t);const n=jc(t),r=M.createElement(kp,{rootAttributes:e});n.render(r)}(Lp); diff --git a/layouts/scripts/toolbar/data-options/DesignPreview.jsx b/layouts/scripts/toolbar/data-options/DesignPreview.jsx index dabc629..7f9a989 100644 --- a/layouts/scripts/toolbar/data-options/DesignPreview.jsx +++ b/layouts/scripts/toolbar/data-options/DesignPreview.jsx @@ -130,7 +130,7 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) { return 0; } - // const scrollbarOffset = 7; Looks like browser scrollbar is not included in the width calculation anymore. + // const scrollbarOffset = 7; // Looks like browser scrollbar is not included in the width calculation anymore. const scrollbarOffset = 0; return window.innerWidth / 2 - previewOption.widthDimension / 2 - scrollbarOffset; }