import {
createElement,
Fragment,
useRef,
useEffect,
useState,
} from '@wordpress/element'
import { registerPlugin, withPluginContext } from '@wordpress/plugins'
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor'
import { select, withSelect, withDispatch } from '@wordpress/data'
import { compose } from '@wordpress/compose'
import { IconButton, Button } from '@wordpress/components'
import { handleMetaboxValueChange } from './editor/sync'
import ctEvents from 'ct-events'
import { __, sprintf } from 'ct-i18n'
import {
OptionsPanel,
getValueFromInput,
PanelLevel,
DeviceManagerProvider,
} from 'blocksy-options'
import { SVG, Path } from '@wordpress/primitives'
import { getCurrentDevice } from './customizer/components/useDeviceManager'
export const dropIframeBodyTransition = () => {
const maybeIframe = document.querySelector('iframe[name="editor-canvas"]')
if (maybeIframe) {
const maybeBody = maybeIframe.contentDocument.querySelector('body')
if (maybeBody) {
maybeBody.style.transition = 'none'
}
}
}
export const revertIframeBodyTransition = () => {
const maybeIframe = document.querySelector('iframe[name="editor-canvas"]')
if (maybeIframe) {
const maybeBody = maybeIframe.contentDocument.querySelector('body')
if (maybeBody) {
setTimeout(() => {
maybeBody.removeAttribute('style')
}, 100)
}
}
}
let previousDevice = null
const setResponsiveClass = () => {
let device = getCurrentDevice()
if (previousDevice === device) {
return
}
previousDevice = device
document.body.classList.remove(
'ct-desktop-view',
'ct-tablet-view',
'ct-mobile-view'
)
document.body.classList.add(`ct-${device}-view`)
}
setResponsiveClass()
wp.data.subscribe(() => {
setResponsiveClass()
})
const closeSmall = (
)
const starEmpty = (
)
const starFilled = (
)
const BlocksyOptions = ({ name, value, options, onChange, isActive }) => {
const containerRef = useRef()
const parentContainerRef = useRef()
const [values, setValues] = useState(null)
const [controller, setController] = useState(null)
useEffect(() => {
document.body.classList[isActive ? 'add' : 'remove'](
'blocksy-sidebar-active'
)
}, [isActive])
const handleChange = ({ id: key, value: v }) => {
const futureValue = {
...(values || getValueFromInput(options, value || {})),
[key]: v,
}
handleMetaboxValueChange(key, v)
onChange({
...value,
[key]: v,
})
setValues(futureValue)
}
const listenToChange = () => {
const controller = new AbortController()
setController(controller)
ctEvents.on('ct:metabox:options:trigger-change', handleChange, {
signal: controller.signal,
})
}
useEffect(() => {
listenToChange()
return () => {
if (controller) {
controller.abort()
}
setController(null)
}
}, [])
return (
{sprintf(
__('%s Page Settings', 'blocksy'),
ct_localizations.product_name
)}
}
className="ct-components-panel"
title={sprintf(
__('%s Page Settings', 'blocksy'),
ct_localizations.product_name
)}>
{
const futureValue = {
...(values ||
getValueFromInput(
options,
value || {}
)),
[key]: v,
}
handleMetaboxValueChange(key, v)
onChange({
...value,
[key]: v,
})
setValues(futureValue)
}}
onChangeMultiple={(
nextValues,
args = {}
) => {
// At the moment onChangeMultiple doesnt trigger
// updates in the dynamic styles, because we need to adapt
// handleMetaboxValueChange to handle multiple values
// correctly.
// For now this is not needed.
args = {
deleteNonExistent: false,
...args,
}
let futureValue = null
if (args.deleteNonExistent) {
futureValue = {
...nextValues,
}
} else {
futureValue = {
...(values ||
getValueFromInput(
options,
value || {}
)),
...nextValues,
}
}
onChange(futureValue)
setValues(futureValue)
}}
value={
values ||
getValueFromInput(options, value || {})
}
options={options}
/>
)
}
const BlocksyOptionsComposed = compose(
withPluginContext((context, { name }) => ({
sidebarName: `${context.name}/${name}`,
})),
withSelect((select, { sidebarName }) => {
const value =
select('core/editor').getEditedPostAttribute('blocksy_meta')
const { getActiveGeneralSidebarName, isPluginItemPinned } =
select('core/edit-post')
return {
isActive: getActiveGeneralSidebarName() === sidebarName,
value: Array.isArray(value) ? {} : value || {},
options: ct_editor_localizations.post_options,
}
}),
withDispatch((dispatch, { sidebarName }) => {
return {
onChange: (blocksy_meta) => {
dispatch('core/editor').editPost({
blocksy_meta,
})
},
}
})
)(BlocksyOptions)
if (ct_editor_localizations.post_options) {
registerPlugin('blocksy', {
render: () => ,
})
}