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

Display relevant PreviewImages on ResponsiveModes changed.

pull/1/head
Roman Axelrod 3 years ago
parent
fe95eb0ef3
commit
5672912f04
5 changed files with 125 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 88
      layouts/scripts/dist/index.min.js
  2. 2
      layouts/scripts/dist/index.min.js.map
  3. 29
      layouts/scripts/toolbar/data-options/DataOptions.jsx
  4. 28
      layouts/scripts/toolbar/data-options/DesignPreview.jsx
  5. 26
      layouts/scripts/toolbar/responsive.jsx

88
layouts/scripts/dist/index.min.js
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) {

2
layouts/scripts/dist/index.min.js.map
View File

File diff suppressed because one or more lines are too long

29
layouts/scripts/toolbar/data-options/DataOptions.jsx
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) {

28
layouts/scripts/toolbar/data-options/DesignPreview.jsx
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});
}
}
}

26
layouts/scripts/toolbar/responsive.jsx
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};
}
}

Write Preview
Loading…
Cancel
Save