axe-web-public/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Display relevant PreviewImages on ResponsiveModes changed.

Browse Source
This commit is contained in:
Roman Axelrod
2022-10-17 14:22:51 +03:00
parent fe95eb0ef3
commit 5672912f04
5 changed files with 125 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/scripts/dist/index.min.js
Vendored
+63 -25
View File
@@ -11265,14 +11265,11 @@ function Responsive(props = {}) {
mode: 'default',
breakpoint: '100%'
};
const [state, setState] = react.exports.useState(initialState);
const updateState = update => setState(Object.assign({}, state, update));
const [mode, setMode] = react.exports.useState(initialState.mode);
const [breakpoint, setBreakpoint] = react.exports.useState(initialState.breakpoint);
react.exports.useEffect(() => {
// Update the document title using the browser API
updateController();
});
}, [mode, breakpoint]);
const previewFrame = props.rootAttributes.previewFrame;
return render(); //
// Functions
@@ -11290,24 +11287,28 @@ function Responsive(props = {}) {
function selectMode(mode, breakpoint) {
if (mode === 'reset') {
updateState(initialState);
setMode(initialState.mode);
setBreakpoint(initialState.breakpoint);
return;
}
updateState({
mode,
breakpoint
});
setMode(mode);
setBreakpoint(breakpoint);
}
function isActive(mode) {
return mode === state.mode;
function isActive(requestedMode) {
return mode === requestedMode;
}
function updateController() {
const unit = typeof state.breakpoint === 'string' ? '' : 'px';
previewFrame.style.setProperty('--breakpoint', state.breakpoint + unit);
const unit = typeof breakpoint === 'string' ? '' : 'px';
previewFrame.style.setProperty('--breakpoint', breakpoint + unit);
previewFrame.classList.add('has-breakpoint');
window.postMessage('responsiveUpdate');
window.responsiveState = {
mode,
breakpoint
};
}
}
@@ -11552,7 +11553,7 @@ function DesignPreview({
x: getInitialXPosition(previewOption),
y: 0
});
const [opacity, setOpacity] = react.exports.useState(100);
const [opacity, setOpacity] = react.exports.useState(85);
const keyDownHandler = react.exports.useCallback(function (e) {
if (!active) {
return;
@@ -11589,10 +11590,9 @@ function DesignPreview({
x: getInitialXPosition(previewOption),
y: 0
});
window.addEventListener('message', responsiveModeChangesHandler);
return () => window.removeEventListener('message', responsiveModeChangesHandler);
}, [previewOption.widthDimension]);
react.exports.useEffect(() => {
setActive(false);
}, [previewOption.dataSource]);
if (!previewOption) {
return;
@@ -11601,7 +11601,7 @@ function DesignPreview({
const disabled = !previewOption.url;
const classNames = [];
if (active) {
if (!disabled && active) {
classNames.push('active');
}
@@ -11617,7 +11617,7 @@ function DesignPreview({
onClick: () => toggle(),
className: classNames.join(' '),
disabled: disabled
}), active && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
}), active && !disabled && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
type: "range",
value: opacity,
min: "0",
@@ -11638,7 +11638,9 @@ function DesignPreview({
top: position.y + 'px',
left: position.x + 'px'
}
}))));
})))); //
// Functions
//
function start(e) {
startDragPosition.x = e.clientX;
@@ -11693,6 +11695,19 @@ function DesignPreview({
return window.innerWidth / 2 - previewOption.widthDimension / 2;
}
function responsiveModeChangesHandler(e) {
if (e.data !== 'responsiveUpdate') {
return;
}
if (window.responsiveState.breakpoint === '100%') {
updatePosition({
x: getInitialXPosition(previewOption),
y: 0
});
}
}
}
function DataOptions(props = {}) {
@@ -11704,6 +11719,7 @@ function DataOptions(props = {}) {
designPreview: []
};
const [state, setState] = react.exports.useState(initialState);
const [previewOption, setPreviewOption] = react.exports.useState(getDesignPreviewImage(state.dataName, state.designPreview));
const updateState = update => setState(Object.assign({}, state, update));
@@ -11726,10 +11742,16 @@ function DataOptions(props = {}) {
document.removeEventListener("keydown", handleCloseSidebarEscEvent);
};
}, [handleCloseSidebarEscEvent]);
react.exports.useEffect(() => {
window.addEventListener('message', responsiveModeChangesHandler);
return () => window.removeEventListener('message', responsiveModeChangesHandler);
}, [state]);
react.exports.useEffect(() => {
setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
}, [state.designPreview]);
const handleBlur = async e => (await isClickOutside(e)) ? closeSidebar() : null;
const previewOption = getDesignPreviewImage(state.dataName, state.designPreview);
return /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
@@ -11760,7 +11782,9 @@ function DataOptions(props = {}) {
value: item,
selected: isSelected
}, item);
}))), state.data && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(state.data, null, 2))));
}))), state.data && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(state.data, null, 2)))); //
// Functions
//
function openSidebar() {
setSidebarOpen(true);
@@ -11793,10 +11817,24 @@ function DataOptions(props = {}) {
return item.dataSource === currentDataName;
});
dataOptions.sort((a, b) => b.widthDimension - a.widthDimension);
let size = window.responsiveState.breakpoint;
if (size === '100%') {
size = window.innerWidth;
}
return dataOptions.find(item => {
return item.widthDimension; // first
return size >= item.widthDimension;
});
}
function responsiveModeChangesHandler(e) {
if (e.data !== 'responsiveUpdate') {
return;
}
setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
}
}
function setupDataOptions(rootAttributes) {
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/toolbar/data-options/DataOptions.jsx
+27 -2
View File
@@ -14,6 +14,7 @@ function DataOptions(props = {}) {
const initialState = {dataName: 'default', data: {}, dataOptions: [], designPreview: []};
const [state, setState] = useState(initialState);
const [previewOption, setPreviewOption] = useState(getDesignPreviewImage(state.dataName, state.designPreview));
const updateState = (update) => setState(Object.assign({}, state, update));
const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -40,8 +41,16 @@ function DataOptions(props = {}) {
}
}, [handleCloseSidebarEscEvent]);
useEffect(() => {
window.addEventListener('message', responsiveModeChangesHandler);
return () => window.removeEventListener('message', responsiveModeChangesHandler);
}, [state]);
useEffect(() => {
setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
}, [state.designPreview]);
const handleBlur = async (e) => await isClickOutside(e) ? closeSidebar() : null;
const previewOption = getDesignPreviewImage(state.dataName, state.designPreview);
return <div style={{display: 'flex', gap: '1rem', alignItems: 'center'}}>
<SidebarButtonToggleStyle onClick={() => openSidebar()} title="Open a Sidebar with Data Options"/>
@@ -72,6 +81,10 @@ function DataOptions(props = {}) {
</SidebarStyle>
</div>;
//
// Functions
//
function openSidebar() {
setSidebarOpen(true);
setTimeout(() => document.querySelector('.sidebar-active').focus());
@@ -101,11 +114,23 @@ function DataOptions(props = {}) {
});
dataOptions.sort((a, b) => b.widthDimension - a.widthDimension);
let size = window.responsiveState.breakpoint;
if (size === '100%') {
size = window.innerWidth;
}
return dataOptions.find((item) => {
return item.widthDimension // first
return size >= item.widthDimension;
});
}
function responsiveModeChangesHandler(e) {
if (e.data !== 'responsiveUpdate') {
return;
}
setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
}
}
export function setupDataOptions(rootAttributes) {
layouts/scripts/toolbar/data-options/DesignPreview.jsx
+20 -8
View File
@@ -7,7 +7,7 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
const reference = createRef();
const [active, setActive] = useState(false);
const [position, setPosition] = useState({x: getInitialXPosition(previewOption), y: 0});
const [opacity, setOpacity] = useState(100);
const [opacity, setOpacity] = useState(85);
const keyDownHandler = useCallback(
function (e) {
@@ -38,12 +38,10 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
useEffect(() => {
updatePosition({x: getInitialXPosition(previewOption), y: 0});
}, [previewOption.widthDimension])
useEffect(() => {
setActive(false);
}, [previewOption.dataSource])
window.addEventListener('message', responsiveModeChangesHandler);
return () => window.removeEventListener('message', responsiveModeChangesHandler);
}, [previewOption.widthDimension]);
if (!previewOption) {
return;
@@ -52,7 +50,7 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
const disabled = !previewOption.url;
const classNames = [];
if (active) {
if (!disabled && active) {
classNames.push('active');
}
@@ -67,7 +65,7 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
return <>
<PreviewButtonStyle onClick={() => toggle()} className={classNames.join(' ')} disabled={disabled}/>
{active &&
{active && !disabled &&
<>
<input type="range" value={opacity} min="0" max="100" onChange={handleOpacityChange}/>
<PreviewStyle onMouseUp={e => stop(e)} style={{opacity: opacity / 100}}>
@@ -81,6 +79,10 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
}
</>
//
// Functions
//
function start(e) {
startDragPosition.x = e.clientX;
startDragPosition.y = e.clientY;
@@ -130,4 +132,14 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
return window.innerWidth / 2 - previewOption.widthDimension / 2;
}
function responsiveModeChangesHandler(e) {
if (e.data !== 'responsiveUpdate') {
return;
}
if (window.responsiveState.breakpoint === '100%') {
updatePosition({x: getInitialXPosition(previewOption), y: 0});
}
}
}
layouts/scripts/toolbar/responsive.jsx
+14 -12
View File
@@ -22,14 +22,12 @@ function Responsive(props = {}) {
props.rootAttributes = props.rootAttributes ?? {};
const initialState = {mode: 'default', breakpoint: '100%'}
const [state, setState] = useState(initialState);
const updateState = (update) => setState(Object.assign({}, state, update));
const [mode, setMode] = useState(initialState.mode);
const [breakpoint, setBreakpoint] = useState(initialState.breakpoint);
useEffect(() => {
// Update the document title using the browser API
updateController(state);
});
updateController();
}, [mode, breakpoint]);
const previewFrame = props.rootAttributes.previewFrame;
return render();
@@ -50,22 +48,26 @@ function Responsive(props = {}) {
function selectMode(mode, breakpoint) {
if (mode === 'reset') {
updateState(initialState);
setMode(initialState.mode);
setBreakpoint(initialState.breakpoint);
return;
}
updateState({mode, breakpoint})
setMode(mode);
setBreakpoint(breakpoint);
}
function isActive(mode) {
return mode === state.mode;
function isActive(requestedMode) {
return mode === requestedMode;
}
function updateController() {
const unit = typeof state.breakpoint === 'string' ? '' : 'px';
previewFrame.style.setProperty('--breakpoint', state.breakpoint + unit);
const unit = typeof breakpoint === 'string' ? '' : 'px';
previewFrame.style.setProperty('--breakpoint', breakpoint + unit);
previewFrame.classList.add('has-breakpoint');
window.postMessage('responsiveUpdate');
window.responsiveState = {mode, breakpoint};
}
}