AXE-WEB/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix scrolling issues & swiperjs conflicts.

Browse Source
This commit is contained in:
Roman Axelrod
2023-08-18 23:28:13 +03:00
parent 05c5697bc2
commit 51db3da072
17 changed files with 43 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/scripts/dist/frame-index.min.js
Vendored
-31
View File
@@ -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();
layouts/scripts/dist/frame-index.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
layouts/scripts/dist/index.min.js
Vendored
+7 -22
View File
@@ -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
layouts/scripts/dist/index.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
layouts/scripts/frame/editor.js
-21
View File
@@ -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');
}
layouts/scripts/frame/frame.js
-40
View File
@@ -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();
layouts/scripts/index.js
+5 -2
View File
@@ -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');
}
layouts/scripts/toolbar/responsive.jsx
+2 -1
View File
@@ -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);