Fix scrolling issues & swiperjs conflicts.
This commit is contained in:
roman committed
1 parent
05c5697bc2
commit
51db3da072
17 files changed
+43
-185
No files matched your search
-31
@@ -13,37 +13,6 @@ function initBlock(blockName = '', selector = '', cb) {
|
||||
reload();
|
||||
}
|
||||
|
||||
// Scrollbars / Frame resizes notifications.
|
||||
(function () {
|
||||
let height;
|
||||
|
||||
handleHeightChange(); // Initial frame's height setup.
|
||||
setupResizeListener(); // Listen to frame's height changes.
|
||||
|
||||
///
|
||||
|
||||
function setupResizeListener() {
|
||||
const resizeObserver = new ResizeObserver(handleHeightChange);
|
||||
resizeObserver.observe(document.body);
|
||||
}
|
||||
|
||||
function handleHeightChange() {
|
||||
const updatedHeight = getCurrentHeight();
|
||||
|
||||
if (height === updatedHeight) {
|
||||
return;
|
||||
}
|
||||
|
||||
const RESIZE_CODE = 'resize:';
|
||||
height = updatedHeight;
|
||||
window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
|
||||
}
|
||||
|
||||
function getCurrentHeight() {
|
||||
return document.querySelector('#hbs-container').scrollHeight;
|
||||
}
|
||||
})();
|
||||
|
||||
// Data Updates Listeners.
|
||||
(function () {
|
||||
loadDataOptions();
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
{"version":3,"file":"frame-index.min.js","sources":["../frame/frame.js"],"sourcesContent":["'use strict';\n\nwindow.initBlock = initBlock;\n\nlet template;\nlet data = {};\nlet reload;\n\n// Blocks Initialization.\nfunction initBlock(blockName = '', selector = '', cb) {\n reload = function () {\n document.querySelectorAll(selector).forEach((el) => cb(el));\n }\n\n reload();\n}\n\n// Scrollbars / Frame resizes notifications.\n(function () {\n let height;\n const debug = false;\n\n handleHeightChange(); // Initial frame's height setup.\n setupResizeListener(); // Listen to frame's height changes.\n\n ///\n\n function setupResizeListener() {\n const resizeObserver = new ResizeObserver(handleHeightChange);\n resizeObserver.observe(document.body);\n }\n\n function handleHeightChange() {\n const updatedHeight = getCurrentHeight();\n\n if (debug) {\n console.log('Height Updates', 'Old vs New: ' + height, updatedHeight);\n }\n\n if (height === updatedHeight) {\n return;\n }\n\n const RESIZE_CODE = 'resize:';\n height = updatedHeight;\n window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');\n\n if (debug) {\n console.log('Resize message sent: ', height)\n }\n }\n\n function getCurrentHeight() {\n return document.querySelector('#hbs-container').scrollHeight;\n }\n})();\n\n// Data Updates Listeners.\n(function () {\n loadDataOptions();\n listenToDataOptionsUpdates();\n\n function listenToDataOptionsUpdates() {\n window.addEventListener('message', function (event) {\n const message = event.data;\n const prefix = 'dataUpdate:';\n\n if (typeof message !== \"string\" || !message.startsWith(prefix)) {\n return;\n }\n\n try {\n data = JSON.parse(message.substring(prefix.length));\n updateBlock({data});\n } catch (e) {\n console.log('Error parsing incoming data.', e);\n }\n });\n }\n\n function getQueryParams() {\n const urlParams = new URLSearchParams(window.location.search);\n const params = {};\n\n for (const [key, value] of urlParams) {\n params[key] = value;\n }\n\n return params;\n }\n\n function loadDataOptions() {\n const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});\n fetch(`/data?${queryParameters}`)\n .then((response) => response.json())\n .then((response) => {\n data = response.data; // Update state.\n updateBlock({data});\n })\n }\n})();\n\n// Listen to Template updates.\n(function () {\n initSocket();\n\n function initSocket() {\n const socket = window.io.connect();\n\n socket.on('error', function (err) {\n console.log(err);\n });\n\n // socket.on('connect', function () {\n // console.log('user connected', socket.id)\n // });\n\n socket.on('templateUpdate', function (args) {\n updateBlock({template: args.template});\n });\n }\n})();\n\nfunction updateBlock(args = {}) {\n if (args.template) {\n template = args.template; // Update state.\n }\n\n if (args.data) {\n data = args.data; // Update state.\n }\n\n if (!template) {\n return;\n }\n\n renderBlock(template, data || {}, document.getElementById(\"hbs-container\"));\n}\n\nfunction renderBlock(templateHbs, jsonData, target) {\n const template = Handlebars.compile(templateHbs);\n\n /**\n * Handlebars Helpers\n */\n Handlebars.registerHelper('esc_attr', function (attr) {\n return attr;\n });\n\n Handlebars.registerHelper('esc_url', function (attr) {\n return attr;\n });\n\n Handlebars.registerHelper('esc_html', function (attr) {\n return attr;\n });\n\n Handlebars.registerHelper('base_url', function () {\n return '/';\n });\n\n let html;\n\n try {\n html = template(jsonData);\n } catch (e) {\n html = `<div style=\"max-width: 1280px; margin: 1rem auto;\">\n <h1 style=\"all: unset; font-size: 1.5rem; font-weight: bold; display: block;\">Syntax Error:</h1>\n <pre style=\"all: unset; padding: 10px 15px; background-color: #ffe6e6; border: 1px solid red; border-radius: 0.25rem; overflow: auto; display: block; white-space: pre;\">${e.toString()}</pre>\n </div>`;\n }\n\n target.innerHTML = html;\n if (reload) {\n reload();\n }\n}\n"],"names":[],"mappings":"AAEA,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;AAC7B;AACA,IAAI,QAAQ,CAAC;AACb,IAAI,IAAI,GAAG,EAAE,CAAC;AACd,IAAI,MAAM,CAAC;AACX;AACA;AACA,SAAS,SAAS,CAAC,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE;AACtD,EAAE,MAAM,GAAG,YAAY;AACvB,IAAI,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAChE,IAAG;AACH;AACA,EAAE,MAAM,EAAE,CAAC;AACX,CAAC;AACD;AACA;AACA,CAAC,YAAY;AACb,EAAE,IAAI,MAAM,CAAC;AAEb;AACA,EAAE,kBAAkB,EAAE,CAAC;AACvB,EAAE,mBAAmB,EAAE,CAAC;AACxB;AACA;AACA;AACA,EAAE,SAAS,mBAAmB,GAAG;AACjC,IAAI,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAClE,IAAI,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC1C,GAAG;AACH;AACA,EAAE,SAALine truncated
|
||||
{"version":3,"file":"frame-index.min.js","sources":["../frame/frame.js"],"sourcesContent":["'use strict';\n\nwindow.initBlock = initBlock;\n\nlet template;\nlet data = {};\nlet reload;\n\n// Blocks Initialization.\nfunction initBlock(blockName = '', selector = '', cb) {\n reload = function () {\n document.querySelectorAll(selector).forEach((el) => cb(el));\n }\n\n reload();\n}\n\n// Data Updates Listeners.\n(function () {\n loadDataOptions();\n listenToDataOptionsUpdates();\n\n function listenToDataOptionsUpdates() {\n window.addEventListener('message', function (event) {\n const message = event.data;\n const prefix = 'dataUpdate:';\n\n if (typeof message !== \"string\" || !message.startsWith(prefix)) {\n return;\n }\n\n try {\n data = JSON.parse(message.substring(prefix.length));\n updateBlock({data});\n } catch (e) {\n console.log('Error parsing incoming data.', e);\n }\n });\n }\n\n function getQueryParams() {\n const urlParams = new URLSearchParams(window.location.search);\n const params = {};\n\n for (const [key, value] of urlParams) {\n params[key] = value;\n }\n\n return params;\n }\n\n function loadDataOptions() {\n const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});\n fetch(`/data?${queryParameters}`)\n .then((response) => response.json())\n .then((response) => {\n data = response.data; // Update state.\n updateBlock({data});\n })\n }\n})();\n\n// Listen to Template updates.\n(function () {\n initSocket();\n\n function initSocket() {\n const socket = window.io.connect();\n\n socket.on('error', function (err) {\n console.log(err);\n });\n\n // socket.on('connect', function () {\n // console.log('user connected', socket.id)\n // });\n\n socket.on('templateUpdate', function (args) {\n updateBlock({template: args.template});\n });\n }\n})();\n\nfunction updateBlock(args = {}) {\n if (args.template) {\n template = args.template; // Update state.\n }\n\n if (args.data) {\n data = args.data; // Update state.\n }\n\n if (!template) {\n return;\n }\n\n renderBlock(template, data || {}, document.getElementById(\"hbs-container\"));\n}\n\nfunction renderBlock(templateHbs, jsonData, target) {\n const template = Handlebars.compile(templateHbs);\n\n /**\n * Handlebars Helpers\n */\n Handlebars.registerHelper('esc_attr', function (attr) {\n return attr;\n });\n\n Handlebars.registerHelper('esc_url', function (attr) {\n return attr;\n });\n\n Handlebars.registerHelper('esc_html', function (attr) {\n return attr;\n });\n\n Handlebars.registerHelper('base_url', function () {\n return '/';\n });\n\n let html;\n\n try {\n html = template(jsonData);\n } catch (e) {\n html = `<div style=\"max-width: 1280px; margin: 1rem auto;\">\n <h1 style=\"all: unset; font-size: 1.5rem; font-weight: bold; display: block;\">Syntax Error:</h1>\n <pre style=\"all: unset; padding: 10px 15px; background-color: #ffe6e6; border: 1px solid red; border-radius: 0.25rem; overflow: auto; display: block; white-space: pre;\">${e.toString()}</pre>\n </div>`;\n }\n\n target.innerHTML = html;\n if (reload) {\n reload();\n }\n}\n"],"names":[],"mappings":"AAEA,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;AAC7B;AACA,IAAI,QAAQ,CAAC;AACb,IAAI,IAAI,GAAG,EAAE,CAAC;AACd,IAAI,MAAM,CAAC;AACX;AACA;AACA,SAAS,SAAS,CAAC,SAAS,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,EAAE,EAAE;AACtD,EAAE,MAAM,GAAG,YAAY;AACvB,IAAI,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAChE,IAAG;AACH;AACA,EAAE,MAAM,EAAE,CAAC;AACX,CAAC;AACD;AACA;AACA,CAAC,YAAY;AACb,EAAE,eAAe,EAAE,CAAC;AACpB,EAAE,0BAA0B,EAAE,CAAC;AAC/B;AACA,EAAE,SAAS,0BAA0B,GAAG;AACxC,IAAI,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,UAAU,KAAK,EAAE;AACxD,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC;AACjC,MAAM,MAAM,MAAM,GAAG,aAAa,CAAC;AACnC;AACA,MAAM,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;AACtE,QAAQ,OAAO;AACf,OAAO;AACP;AACA,MAAM,IAAI;AACV,QAAQ,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;AAC5D,QAAQ,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC5B,OAAO,CAAC,OAAO,CAAC,EAAE;AAClB,QAAQ,OAAO,CAAC,GAAG,CAAC,8BAA8B,EAAE,CAAC,CAAC,CAAC;AACvD,OAAO;AACP,KAAK,CAAC,CAAC;AACP,GAAG;AACH;AACA,EAAE,SAAS,cAAc,GAAG;AAC5B,IAAI,MAAM,SAAS,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AAClE,IAAI,MAAM,MAAM,GAAG,EAAE,CAAC;AACtB;AACA,IAAI,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,SAAS,EAAE;AAC1C,MAAM,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAC1B,KAAK;AACL;AACA,IAAI,OAAO,MAAM,CAAC;AAClB,GAAG;AACH;AACA,EAAE,SAAS,eAAe,GAAG;AAC7B,IAAI,MAAM,eAAe,GAAG,IAAI,eAAe,CAAC,CAAC,IAAI,EAAE,cAAc,EAAE,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC;AAC5F,IAAI,KAAK,CAAC,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;AACrC,OAAO,IAAI,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,IAAI,EAAE,CAAC;AAC1C,OAAO,IAAI,CAAC,CAAC,QAAQ,KAAK;AAC1B,QAAQ,IAAI,GAAG,QAAQ,CAAC,IAAI,CAALine truncated
|
||||
Vendored
+7
-22
@@ -9486,7 +9486,8 @@ function Responsive(props = {}) {
|
||||
function updateController() {
|
||||
let frameBreakpoint = breakpoint;
|
||||
if (typeof frameBreakpoint !== 'string') {
|
||||
frameBreakpoint = frameBreakpoint + 'px';
|
||||
const scrollbarWidth = 15;
|
||||
frameBreakpoint = scrollbarWidth + frameBreakpoint + 'px';
|
||||
}
|
||||
previewFrame.style.setProperty('--breakpoint', frameBreakpoint);
|
||||
previewFrame.classList.add('has-breakpoint');
|
||||
@@ -10139,31 +10140,15 @@ function setupDataOptions(rootAttributes) {
|
||||
root.render(html);
|
||||
}
|
||||
|
||||
function setupFrameResizeListener() {
|
||||
const previewFrame = getPreviewFrame();
|
||||
window.addEventListener('message', function (e) {
|
||||
const RESIZE_CODE = 'resize:';
|
||||
if (typeof e.data !== 'string' || !e.data.startsWith(RESIZE_CODE)) {
|
||||
return;
|
||||
}
|
||||
const data = JSON.parse(e.data.substring(RESIZE_CODE.length));
|
||||
let height = Number.parseInt(data.height);
|
||||
if (height > 20000) {
|
||||
height = 20000; // Limit max height.
|
||||
}
|
||||
|
||||
previewFrame.style.height = height + 'px';
|
||||
});
|
||||
}
|
||||
function getPreviewFrame() {
|
||||
return document.getElementById('preview_frame');
|
||||
}
|
||||
|
||||
const rootAttributes = {
|
||||
previewFrame: getPreviewFrame()
|
||||
};
|
||||
setupFrameResizeListener();
|
||||
|
||||
// setupFrameResizeListener();
|
||||
setupResponsiveness(rootAttributes);
|
||||
setupDataOptions(rootAttributes);
|
||||
setupPublish(rootAttributes);
|
||||
function getPreviewFrame() {
|
||||
return document.getElementById('preview_frame');
|
||||
}
|
||||
//# sourceMappingURL=index.min.js.map
|
||||
+1
-1
@@ -1 +1 @@
|
||||
{"version":3,"file":"index.min.js","sources":["../../../node_modules/react/cjs/react.production.min.js","../../../node_modules/react/index.js","../../../node_modules/scheduler/cjs/scheduler.production.min.js","../../../node_modules/scheduler/index.js","../../../node_modules/react-dom/cjs/react-dom.production.min.js","../../../node_modules/react-dom/index.js","../../../node_modules/react-dom/client.js","../../../node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-is/index.js","../../../node_modules/@emotion/stylis/dist/stylis.esm.js","../../../node_modules/@emotion/unitless/dist/unitless.esm.js","../../../node_modules/@emotion/memoize/dist/emotion-memoize.esm.js","../../../node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js","../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js","../toolbar/responsive.style.js","../toolbar/responsive-button/responsive-button.style.js","../toolbar/responsive-button/ResponsiveButton.jsx","../toolbar/responsive.jsx","../toolbar/publish.jsx","../toolbar/data-options/data-options.style.js","../toolbar/data-options/design-preview.style.js","../toolbar/data-options/DesignPreview.jsx","../toolbar/data-options/DataOptions.jsx","../frame/editor.js","../index.js"],"sourcesContent":["/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=Symbol.for(\"react.element\"),n=Symbol.for(\"react.portal\"),p=Symbol.for(\"react.fragment\"),q=Symbol.for(\"react.strict_mode\"),r=Symbol.for(\"react.profiler\"),t=Symbol.for(\"react.provider\"),u=Symbol.for(\"react.context\"),v=Symbol.for(\"react.forward_ref\"),w=Symbol.for(\"react.suspense\"),x=Symbol.for(\"react.memo\"),y=Symbol.for(\"react.lazy\"),z=Symbol.iterator;function A(a){if(null===a||\"object\"!==typeof a)return null;a=z&&a[z]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nvar B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={};\nE.prototype.setState=function(a,b){if(\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a)throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F;\nH.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=\"\"+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}\nfunction N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\\/+/g;function Q(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(\"\"+a.key):b.toString(36)}\nfunction R(a,b,e,d,c){var k=typeof a;if(\"undefined\"===k||\"boolean\"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case \"string\":case \"number\":h=!0;break;case \"object\":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=\"\"===d?\".\"+Q(h,0):d,I(c)?(e=\"\",null!=a&&(e=a.replace(P,\"$&/\")+\"/\"),R(c,b,e,\"\",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?\"\":(\"\"+c.key).replace(P,\"$&/\")+\"/\")+a)),b.push(c)),1;h=0;d=\"\"===d?\".\":d+\":\";if(I(a))for(var g=0;g<a.length;g++){k=\na[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),\"function\"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if(\"object\"===k)throw b=String(a),Error(\"Objects are not valid as a React child (found: \"+(\"[object Object]\"===b?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":b)+\"). If you meant to render a collection of children, use an array instead.\");return h}\nfunction Line truncated
|
||||
{"version":3,"file":"index.min.js","sources":["../../../node_modules/react/cjs/react.production.min.js","../../../node_modules/react/index.js","../../../node_modules/scheduler/cjs/scheduler.production.min.js","../../../node_modules/scheduler/index.js","../../../node_modules/react-dom/cjs/react-dom.production.min.js","../../../node_modules/react-dom/index.js","../../../node_modules/react-dom/client.js","../../../node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-is/index.js","../../../node_modules/@emotion/stylis/dist/stylis.esm.js","../../../node_modules/@emotion/unitless/dist/unitless.esm.js","../../../node_modules/@emotion/memoize/dist/emotion-memoize.esm.js","../../../node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js","../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js","../toolbar/responsive.style.js","../toolbar/responsive-button/responsive-button.style.js","../toolbar/responsive-button/ResponsiveButton.jsx","../toolbar/responsive.jsx","../toolbar/publish.jsx","../toolbar/data-options/data-options.style.js","../toolbar/data-options/design-preview.style.js","../toolbar/data-options/DesignPreview.jsx","../toolbar/data-options/DataOptions.jsx","../index.js"],"sourcesContent":["/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=Symbol.for(\"react.element\"),n=Symbol.for(\"react.portal\"),p=Symbol.for(\"react.fragment\"),q=Symbol.for(\"react.strict_mode\"),r=Symbol.for(\"react.profiler\"),t=Symbol.for(\"react.provider\"),u=Symbol.for(\"react.context\"),v=Symbol.for(\"react.forward_ref\"),w=Symbol.for(\"react.suspense\"),x=Symbol.for(\"react.memo\"),y=Symbol.for(\"react.lazy\"),z=Symbol.iterator;function A(a){if(null===a||\"object\"!==typeof a)return null;a=z&&a[z]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nvar B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={};\nE.prototype.setState=function(a,b){if(\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a)throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F;\nH.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=\"\"+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}\nfunction N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\\/+/g;function Q(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(\"\"+a.key):b.toString(36)}\nfunction R(a,b,e,d,c){var k=typeof a;if(\"undefined\"===k||\"boolean\"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case \"string\":case \"number\":h=!0;break;case \"object\":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=\"\"===d?\".\"+Q(h,0):d,I(c)?(e=\"\",null!=a&&(e=a.replace(P,\"$&/\")+\"/\"),R(c,b,e,\"\",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?\"\":(\"\"+c.key).replace(P,\"$&/\")+\"/\")+a)),b.push(c)),1;h=0;d=\"\"===d?\".\":d+\":\";if(I(a))for(var g=0;g<a.length;g++){k=\na[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),\"function\"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if(\"object\"===k)throw b=String(a),Error(\"Objects are not valid as a React child (found: \"+(\"[object Object]\"===b?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":b)+\"). If you meant to render a collection of children, use an array instead.\");return h}\nfunction S(a,b,e){if(null==a)rLine truncated
|
||||
@@ -1,21 +0,0 @@
|
||||
export function setupFrameResizeListener() {
|
||||
const previewFrame = getPreviewFrame();
|
||||
|
||||
window.addEventListener('message', function (e) {
|
||||
const RESIZE_CODE = 'resize:';
|
||||
if (typeof e.data !== 'string' || !e.data.startsWith(RESIZE_CODE)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = JSON.parse(e.data.substring(RESIZE_CODE.length))
|
||||
let height = Number.parseInt(data.height)
|
||||
if (height > 20000) {
|
||||
height = 20000; // Limit max height.
|
||||
}
|
||||
previewFrame.style.height = height + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
export function getPreviewFrame() {
|
||||
return document.getElementById('preview_frame');
|
||||
}
|
||||
@@ -15,46 +15,6 @@ function initBlock(blockName = '', selector = '', cb) {
|
||||
reload();
|
||||
}
|
||||
|
||||
// Scrollbars / Frame resizes notifications.
|
||||
(function () {
|
||||
let height;
|
||||
const debug = false;
|
||||
|
||||
handleHeightChange(); // Initial frame's height setup.
|
||||
setupResizeListener(); // Listen to frame's height changes.
|
||||
|
||||
///
|
||||
|
||||
function setupResizeListener() {
|
||||
const resizeObserver = new ResizeObserver(handleHeightChange);
|
||||
resizeObserver.observe(document.body);
|
||||
}
|
||||
|
||||
function handleHeightChange() {
|
||||
const updatedHeight = getCurrentHeight();
|
||||
|
||||
if (debug) {
|
||||
console.log('Height Updates', 'Old vs New: ' + height, updatedHeight);
|
||||
}
|
||||
|
||||
if (height === updatedHeight) {
|
||||
return;
|
||||
}
|
||||
|
||||
const RESIZE_CODE = 'resize:';
|
||||
height = updatedHeight;
|
||||
window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
|
||||
|
||||
if (debug) {
|
||||
console.log('Resize message sent: ', height)
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentHeight() {
|
||||
return document.querySelector('#hbs-container').scrollHeight;
|
||||
}
|
||||
})();
|
||||
|
||||
// Data Updates Listeners.
|
||||
(function () {
|
||||
loadDataOptions();
|
||||
|
||||
@@ -3,13 +3,16 @@
|
||||
import {setupResponsiveness} from './toolbar/responsive.jsx';
|
||||
import {setupPublish} from "./toolbar/publish.jsx";
|
||||
import {setupDataOptions} from "./toolbar/data-options/DataOptions.jsx";
|
||||
import {getPreviewFrame, setupFrameResizeListener} from "./frame/editor.js";
|
||||
|
||||
const rootAttributes = {
|
||||
previewFrame: getPreviewFrame(),
|
||||
};
|
||||
|
||||
setupFrameResizeListener();
|
||||
// setupFrameResizeListener();
|
||||
setupResponsiveness(rootAttributes);
|
||||
setupDataOptions(rootAttributes);
|
||||
setupPublish(rootAttributes);
|
||||
|
||||
function getPreviewFrame() {
|
||||
return document.getElementById('preview_frame');
|
||||
}
|
||||
@@ -65,7 +65,8 @@ function Responsive(props = {}) {
|
||||
function updateController() {
|
||||
let frameBreakpoint = breakpoint;
|
||||
if (typeof frameBreakpoint !== 'string') {
|
||||
frameBreakpoint = frameBreakpoint + 'px';
|
||||
const scrollbarWidth = 15;
|
||||
frameBreakpoint = (scrollbarWidth + frameBreakpoint) + 'px';
|
||||
}
|
||||
|
||||
previewFrame.style.setProperty('--breakpoint', frameBreakpoint);
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
.preview {
|
||||
overflow-y: scroll;
|
||||
height: calc(100% - var(--top_panel_height));
|
||||
position: relative;
|
||||
}
|
||||
@@ -9,17 +8,14 @@
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
min-height: 100%;
|
||||
//height: 100%;
|
||||
|
||||
--top_spacing: 0px;
|
||||
--breakpoint_top_spacing: 30px;
|
||||
|
||||
margin-top: var(--top_spacing);
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
|
||||
border: 0;
|
||||
outline: 1px solid #E2E8F0;
|
||||
|
||||
transition: max-width .3s ease-in-out, width .3s ease-in-out, margin-top .3s ease-in-out;
|
||||
|
||||
&.has-breakpoint {
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
.swiper {
|
||||
&-slide {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
height: initial;
|
||||
}
|
||||
}
|
||||
@@ -114,7 +114,6 @@ body {
|
||||
}
|
||||
|
||||
.preview {
|
||||
overflow-y: scroll;
|
||||
height: calc(100% - var(--top_panel_height));
|
||||
position: relative;
|
||||
}
|
||||
@@ -127,10 +126,8 @@ body {
|
||||
--top_spacing: 0px;
|
||||
--breakpoint_top_spacing: 30px;
|
||||
margin-top: var(--top_spacing);
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border: 0;
|
||||
outline: 1px solid #E2E8F0;
|
||||
transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out, margin-top 0.3s ease-in-out;
|
||||
}
|
||||
#preview_frame.has-breakpoint {
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAEA;;AAEA;EACE;EAEA;EACA;;;AH6DJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;EACA","file":"page--main.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--preview.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AC5BJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;AAKN;EAEE;EACA;EACA;EACA;;AAGF;EACE;;;AGlFJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;EAEA;EACA;;;AHiEJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;EACA","file":"page--main.css"}
|
||||
@@ -2,24 +2,8 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
main .swiper-slide {
|
||||
width: initial;
|
||||
}
|
||||
main .swiper-wrapper {
|
||||
height: initial;
|
||||
}
|
||||
|
||||
.body--iframe {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.body--iframe main {
|
||||
overflow-y: auto;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.fullscreen_layout {
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["page--view.scss","_page--view-swiper.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;;ACPA;EACE;;AAGF;EACE;;;ADSJ;EACE;;AAEA;EAGE;;;AAIJ;EACE;EACA;EACA;EACA","file":"page--view.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;;;AAIF;EACE;;;AAGF;EACE;EACA;EACA;EACA","file":"page--view.css"}
|
||||
@@ -2,25 +2,9 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
|
||||
// Fixes scrolling issues of swiperJS. Should be included in all projects.
|
||||
@import "page--view-swiper";
|
||||
}
|
||||
|
||||
// iFrame mode
|
||||
.body--iframe {
|
||||
overflow-y: hidden;
|
||||
|
||||
main {
|
||||
// If you change to "overflow: initial", the margin-top/bottom of first/last element will be not included.
|
||||
// Test on fresh block setup where heading has margin-top.
|
||||
overflow-y: auto;
|
||||
}
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.fullscreen_layout {
|
||||
@@ -29,4 +13,3 @@ main {
|
||||
background-image: url('https://i.ibb.co/pjwL8D1/shapelined-JBKdviwe-XI-unsplash.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
+3
-3
@@ -7,9 +7,9 @@
|
||||
"url": "https://axe-web.com/"
|
||||
},
|
||||
"scripts": {
|
||||
"info": "NODE_ENV=development BLOCK_NAME=colors MODULE_PATH= node debug.js",
|
||||
"dev": "NODE_ENV=development BLOCK_NAME=colors MODULE_PATH= node server.js",
|
||||
"build-platform": "NODE_ENV=development BLOCK_NAME=colors MODULE_PATH= node ./build.js",
|
||||
"info": "NODE_ENV=development BLOCK_NAME=swiper-test MODULE_PATH= node debug.js",
|
||||
"dev": "NODE_ENV=development BLOCK_NAME=swiper-test MODULE_PATH= node server.js",
|
||||
"build-platform": "NODE_ENV=development BLOCK_NAME=swiper-test MODULE_PATH= node ./build.js",
|
||||
"dev-dev-tool": "NODE_ENV=development rollup --config rollup.config.js --watch",
|
||||
"build-dev-tool": "rollup --config rollup.config.js"
|
||||
},
|
||||
|
||||
@@ -120,24 +120,34 @@ app.get('/', (req, res) => {
|
||||
});
|
||||
|
||||
app.get('/view/:baseView', (req, res) => {
|
||||
const data = {config: getBlockConfigs({modulesPath, dataFiles})};
|
||||
const data = getDataOfFrame(!!req.query.iframe);
|
||||
|
||||
if (data.error && data.errorMessage) {
|
||||
return res.send(data.errorMessage);
|
||||
}
|
||||
|
||||
data.helpers = {
|
||||
include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
|
||||
}
|
||||
|
||||
if (!!req.query.iframe) {
|
||||
data.iframeMode = true;
|
||||
}
|
||||
|
||||
const baseView = req.params.baseView ?? DEFAULT_VIEW_LAYOUT;
|
||||
|
||||
res.render(baseView, data)
|
||||
});
|
||||
|
||||
function getDataOfFrame(isIframe = false) {
|
||||
const data = {config: getBlockConfigs({modulesPath, dataFiles})};
|
||||
if (data.error && data.errorMessage) {
|
||||
return data;
|
||||
}
|
||||
|
||||
data.helpers = {
|
||||
include_partial: (filesPath) => handlebarLayoutsPath(modulesPath, filesPath),
|
||||
}
|
||||
|
||||
if (isIframe) {
|
||||
data.iframeMode = true;
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
app.get('/publish', async (req, res) => {
|
||||
const data = await readJSONFile(path.join(projectPath, `block.json`));
|
||||
|
||||
|
||||
Reference in new issue
Block a user