26 changed files with 18750 additions and 11446 deletions
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 970 B After Width: | Height: | Size: 970 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 446 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,31 @@ |
|||||
|
'use strict'; |
||||
|
|
||||
|
import {setupResponsiveness} from './toolbar/responsive.jsx'; |
||||
|
|
||||
|
const rootAttributes = { |
||||
|
previewFrame: document.getElementById('preview_frame'), |
||||
|
} |
||||
|
|
||||
|
setupResponsiveness(rootAttributes); |
||||
|
|
||||
|
// const responsiveness = connectResponsiveness(rootAttributes);
|
||||
|
// setTimeout(() => responsiveness.selectMode('tablet'), 5000)
|
||||
|
// setTimeout(() => responsiveness.selectMode('mobile'), 10000)
|
||||
|
|
||||
|
const previewFrame = rootAttributes.previewFrame; |
||||
|
initDataOptions(); |
||||
|
|
||||
|
/** |
||||
|
* Functions |
||||
|
*/ |
||||
|
|
||||
|
function initDataOptions() { |
||||
|
const dataOptionsSelect = document.getElementById('data-options'); |
||||
|
if (!dataOptionsSelect) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
dataOptionsSelect.addEventListener('change', function () { |
||||
|
previewFrame.src = window.previewFrameUrl + '?data=' + this.value; |
||||
|
}); |
||||
|
} |
||||
@ -1,38 +0,0 @@ |
|||||
(function () { |
|
||||
|
|
||||
const previewFrame = document.getElementById('preview_frame'); |
|
||||
|
|
||||
initDataOptions(); |
|
||||
initResponsiveMode(); |
|
||||
|
|
||||
/** |
|
||||
* Functions |
|
||||
*/ |
|
||||
|
|
||||
function initDataOptions() { |
|
||||
const dataOptionsSelect = document.getElementById('data-options'); |
|
||||
if (!dataOptionsSelect) { |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
dataOptionsSelect.addEventListener('change', function () { |
|
||||
previewFrame.src = window.previewFrameUrl + '?data=' + this.value; |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
function initResponsiveMode() { |
|
||||
|
|
||||
document.querySelectorAll('input[name="responsive_mode"]').forEach((input) => { |
|
||||
input.addEventListener('change', (event) => { |
|
||||
const mode = event.target.value; |
|
||||
|
|
||||
previewFrame.classList.remove('breakpoint--desktop'); |
|
||||
previewFrame.classList.remove('breakpoint--tablet'); |
|
||||
previewFrame.classList.remove('breakpoint--mobile'); |
|
||||
|
|
||||
previewFrame.classList.add('breakpoint--' + mode); |
|
||||
}); |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
})(); |
|
||||
|
After Width: | Height: | Size: 970 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 446 B |
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,94 @@ |
|||||
|
import React, {useCallback, useEffect, useState} from "react"; |
||||
|
import {ButtonStyling, ResponsiveButtonStyle, ResponsiveOptionsDropdown} from "./responsive-button.style.js"; |
||||
|
|
||||
|
const responsiveOptions = { |
||||
|
desktop: [1920, 1800, 1680, 1440, 1360, 1280, 1024], |
||||
|
tablet: [992, 768, 600], |
||||
|
mobile: [480, 414, 375, 360], |
||||
|
} |
||||
|
|
||||
|
const defaultResponsiveOptions = { |
||||
|
reset: '100%', |
||||
|
desktop: responsiveOptions.desktop[0], |
||||
|
tablet: responsiveOptions.tablet[1], |
||||
|
mobile: responsiveOptions.mobile[2], |
||||
|
} |
||||
|
|
||||
|
export function ResponsiveButton({mode, active, onSelect}) { |
||||
|
// active = true; |
||||
|
const [state, setState] = useState({open: true, breakpoint: defaultResponsiveOptions[mode]}); |
||||
|
const updateState = (update) => { |
||||
|
// update.open = true; |
||||
|
setState(Object.assign({}, state, update)); |
||||
|
} |
||||
|
|
||||
|
useEffect(() => { |
||||
|
const closeDropdown = (e) => isEscHit(e) ? updateState({open: false}) : null; |
||||
|
|
||||
|
if (state.open) { |
||||
|
document.addEventListener("keydown", closeDropdown); |
||||
|
} |
||||
|
|
||||
|
// Unsubscribe from ESC listener. |
||||
|
return () => { |
||||
|
document.removeEventListener("keydown", closeDropdown); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// Blur event / Outside click |
||||
|
const outsideClickAction = async (e) => await isClickOutside(e) ? updateState({open: false}) : null; |
||||
|
const handleBlur = useCallback(outsideClickAction, []); |
||||
|
|
||||
|
return <ResponsiveButtonStyle tabIndex='0' onBlur={handleBlur}> |
||||
|
<ButtonStyling data-mode={mode} data-active={active} onClick={() => select()}>{mode}</ButtonStyling> |
||||
|
{active && state.open && responsiveOptions[mode] && |
||||
|
<ResponsiveOptionsDropdown> |
||||
|
{responsiveOptions[mode].map((breakpoint) => { |
||||
|
return <li> |
||||
|
<a className={state.breakpoint === breakpoint ? 'active' : ''} onClick={() => select(breakpoint)}>{breakpoint}</a> |
||||
|
</li>; |
||||
|
})} |
||||
|
</ResponsiveOptionsDropdown> |
||||
|
} |
||||
|
</ResponsiveButtonStyle>; |
||||
|
|
||||
|
// |
||||
|
// Actions |
||||
|
// |
||||
|
|
||||
|
function select(breakpoint = null) { |
||||
|
// Click on option in Dropdown. |
||||
|
if (breakpoint) { |
||||
|
updateState({open: false, breakpoint}); |
||||
|
onSelect(breakpoint); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Click on device button. |
||||
|
if (!active) { |
||||
|
onSelect(state.breakpoint) |
||||
|
updateState({open: false}); |
||||
|
} else { |
||||
|
updateState({open: true}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function update(state, update) { |
||||
|
return Object.assign({}, state, update); |
||||
|
} |
||||
|
|
||||
|
export async function isClickOutside(e) { |
||||
|
const currentTarget = e.currentTarget; |
||||
|
|
||||
|
return new Promise(resolve => { |
||||
|
setTimeout(() => { |
||||
|
resolve(!currentTarget.contains(document.activeElement)); |
||||
|
}, 100); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function isEscHit(event) { |
||||
|
return event.key === 'Escape' |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,73 @@ |
|||||
|
import styled from "styled-components"; |
||||
|
|
||||
|
export const ButtonStyling = styled.button` |
||||
|
--size: 1.5rem; |
||||
|
cursor: pointer; |
||||
|
border: 0; |
||||
|
background-image: url("/scripts/dist/toolbar/images/icon-desktop.svg"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: calc(var(--size) - 0.15rem); |
||||
|
background-position: center; |
||||
|
background-color: initial; |
||||
|
font-size: 1px; |
||||
|
color: rgba(0, 0, 0, 0); |
||||
|
line-height: 1; |
||||
|
display: block; |
||||
|
width: var(--size); |
||||
|
height: var(--size); |
||||
|
border-radius: 0.25rem; |
||||
|
outline: none; |
||||
|
|
||||
|
&[data-mode='tablet'] { |
||||
|
background-image: url("/scripts/dist/toolbar/images/icon-tablet.svg"); |
||||
|
} |
||||
|
|
||||
|
&[data-mode='mobile'] { |
||||
|
background-image: url("/scripts/dist/toolbar/images/icon-mobile.svg"); |
||||
|
} |
||||
|
|
||||
|
&[data-mode='reset'] { |
||||
|
background-image: url("/scripts/dist/toolbar/images/icon-reset.svg"); |
||||
|
} |
||||
|
|
||||
|
&[data-active='true'] { |
||||
|
background-color: #CBD5E0; |
||||
|
} |
||||
|
`;
|
||||
|
|
||||
|
export const ResponsiveOptionsDropdown = styled.ul` |
||||
|
list-style: none; |
||||
|
padding: 4px; |
||||
|
position: absolute; |
||||
|
background-color: white; |
||||
|
border: 1px solid rgba(0, 0, 0, 0.25); |
||||
|
box-shadow: 2px 2px 4px 0 #ccc; |
||||
|
border-radius: 4px; |
||||
|
transform: translateX(-50%); |
||||
|
left: 50%; |
||||
|
margin: 0.25rem 0 0; |
||||
|
|
||||
|
li { |
||||
|
margin-bottom: 2px; |
||||
|
|
||||
|
a { |
||||
|
display: block; |
||||
|
padding: 0.5rem 1rem; |
||||
|
cursor: pointer; |
||||
|
color: #14181F; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
&:hover, &:focus { |
||||
|
background-color: #EDF2F7; |
||||
|
} |
||||
|
|
||||
|
&.active { |
||||
|
background-color: #cbd5e0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
`;
|
||||
|
|
||||
|
export const ResponsiveButtonStyle = styled.div` |
||||
|
position: relative; |
||||
|
`;
|
||||
@ -0,0 +1,81 @@ |
|||||
|
// export function connectResponsiveness(rootAttributes) { |
||||
|
// // API |
||||
|
// return { |
||||
|
// selectMode: (mode) => selectMode(mode), |
||||
|
// } |
||||
|
// } |
||||
|
// |
||||
|
|
||||
|
import React, {useEffect, useState} from 'react'; |
||||
|
import * as ReactDOM from 'react-dom/client'; |
||||
|
import {WrapperStyling} from "./responsive.style.js"; |
||||
|
import {ResponsiveButton} from "./responsive-button/ResponsiveButton.jsx"; |
||||
|
|
||||
|
const modes = [ |
||||
|
'reset', |
||||
|
'desktop', |
||||
|
'tablet', |
||||
|
'mobile' |
||||
|
]; |
||||
|
|
||||
|
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)); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
// Update the document title using the browser API |
||||
|
updateController(state); |
||||
|
}); |
||||
|
|
||||
|
const previewFrame = props.rootAttributes.previewFrame; |
||||
|
return render(); |
||||
|
|
||||
|
// |
||||
|
// Functions |
||||
|
// |
||||
|
|
||||
|
function render() { |
||||
|
return <WrapperStyling> |
||||
|
{modes.map((mode) => { |
||||
|
return <ResponsiveButton mode={mode} |
||||
|
active={isActive(mode)} |
||||
|
onSelect={(breakpoint) => selectMode(mode, breakpoint)}/> |
||||
|
})} |
||||
|
</WrapperStyling>; |
||||
|
} |
||||
|
|
||||
|
function selectMode(mode, breakpoint) { |
||||
|
if (mode === 'reset') { |
||||
|
updateState(initialState); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
updateState({mode, breakpoint}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
function isActive(mode) { |
||||
|
return mode === state.mode; |
||||
|
} |
||||
|
|
||||
|
function updateController() { |
||||
|
const unit = typeof state.breakpoint === 'string' ? '' : 'px'; |
||||
|
previewFrame.style.setProperty('--breakpoint', state.breakpoint + unit); |
||||
|
previewFrame.classList.add('has-breakpoint'); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
export function setupResponsiveness(rootAttributes) { |
||||
|
// INIT |
||||
|
const wrapper = document.createElement('div'); |
||||
|
document.querySelector('.page_toolbar').prepend(wrapper) |
||||
|
|
||||
|
const root = ReactDOM.createRoot(wrapper); |
||||
|
const html = (<Responsive rootAttributes={rootAttributes}/>); |
||||
|
root.render(html); |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
import styled from "styled-components"; |
||||
|
|
||||
|
export const WrapperStyling = styled.div` |
||||
|
display: flex; |
||||
|
gap: 0.5rem; |
||||
|
`;
|
||||
@ -1,38 +0,0 @@ |
|||||
|
|
||||
&__responsive_mode { |
|
||||
display: flex; |
|
||||
gap: 0.5rem; |
|
||||
|
|
||||
input[type='radio'] { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
label { |
|
||||
--size: 1.5rem; |
|
||||
cursor: pointer; |
|
||||
background-image: url("../images/icon-desktop.svg"); |
|
||||
background-repeat: no-repeat; |
|
||||
background-size: calc(var(--size) - 0.15rem); |
|
||||
background-position: center; |
|
||||
font-size: 1px; |
|
||||
color: rgba(0, 0, 0, 0); |
|
||||
line-height: 1; |
|
||||
display: block; |
|
||||
width: var(--size); |
|
||||
height: var(--size); |
|
||||
border-radius: 0.25rem; |
|
||||
|
|
||||
&[for="responsive_mode__tablet"] { |
|
||||
background-image: url("../images/icon-tablet.svg"); |
|
||||
} |
|
||||
|
|
||||
&[for="responsive_mode__mobile"] { |
|
||||
background-image: url("../images/icon-mobile.svg"); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
input[type='radio']:checked + label { |
|
||||
background-color: #CBD5E0; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1 +1 @@ |
|||||
{"version":3,"sourceRoot":"","sources":["page--main.scss","_page--main--responsive-mode.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;ACxDN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;;;AClCJ;EACE;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EACA;;AAGA;EACE;;AAGF;EACE","file":"page--main.css"} |
{"version":3,"sourceRoot":"","sources":["page--main.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EAEA;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;;ACnDN;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"page--main.css"} |
||||
File diff suppressed because it is too large
@ -0,0 +1,35 @@ |
|||||
|
import babel from '@rollup/plugin-babel'; |
||||
|
import {nodeResolve} from '@rollup/plugin-node-resolve'; |
||||
|
import commonjs from '@rollup/plugin-commonjs'; |
||||
|
import replace from '@rollup/plugin-replace'; |
||||
|
import css from "@modular-css/rollup"; |
||||
|
import copy from 'rollup-plugin-copy' |
||||
|
|
||||
|
export default { |
||||
|
input: 'layouts/scripts/index.js', |
||||
|
output: { |
||||
|
file: 'layouts/scripts/dist/index.min.js', |
||||
|
sourcemap: true |
||||
|
}, |
||||
|
plugins: [ |
||||
|
nodeResolve({ |
||||
|
extensions: [".js"], |
||||
|
}), |
||||
|
replace({ |
||||
|
'process.env.NODE_ENV': JSON.stringify('production'), |
||||
|
preventAssignment: true, |
||||
|
}), |
||||
|
css(), |
||||
|
babel({ |
||||
|
compact: false, |
||||
|
babelHelpers: 'bundled', |
||||
|
presets: ["@babel/preset-react"], |
||||
|
}), |
||||
|
commonjs(), |
||||
|
copy({ |
||||
|
targets: [ |
||||
|
{ src: 'layouts/scripts/toolbar/images/**/*', dest: 'layouts/scripts/dist/toolbar/images' } |
||||
|
] |
||||
|
}) |
||||
|
], |
||||
|
} |
||||
Loading…
Reference in new issue