import {
createElement,
Fragment,
useRef,
Component,
useEffect,
useMemo,
createPortal,
useState,
useCallback,
createContext,
useReducer,
} from '@wordpress/element'
import { __ } from 'ct-i18n'
import ColumnsBuilder from '../../customizer/panels-builder/columns/ColumnsBuilder'
import AvailableItems from '../../customizer/panels-builder/columns/AvailableItems'
import { builderReducer } from '../../customizer/panels-builder/columns/builderReducer'
export const DragDropContext = createContext({})
const getDocument = (x) =>
x.document || x.contentDocument || x.contentWindow.document
export const fetchCurrentFooter = () => {
const document = getDocument(
wp.customize.previewer.container.find('iframe')[0]
)
if (
wp.customize.previewer.container
.find('iframe')[0]
.contentDocument.querySelector('footer.ct-footer')
) {
return wp.customize.previewer.container
.find('iframe')[0]
.contentDocument.querySelector('footer.ct-footer').dataset.id
}
return null
}
const FooterBuilder = ({
value: allBuilderSections,
option,
onChange: onBuilderValueChange,
}) => {
const currentFooter = useRef(null)
if (currentFooter.current === null) {
currentFooter.current = (
allBuilderSections.sections.find(
({ id }) => id.indexOf(fetchCurrentFooter()) > -1
) || allBuilderSections.sections[0]
).id
}
useEffect(() => {
return () => {
const { __forced_static_footer__, ...old } =
wp.customize('footer_placements')()
if (__forced_static_footer__) {
wp.customize('footer_placements')({
__should_refresh__: true,
[Math.random()]: 'update',
...old,
})
}
}
}, [])
const [builderValueCollection, builderValueDispatchInternal] = useReducer(
builderReducer,
{
...allBuilderSections,
...(currentFooter.current
? {
__forced_static_footer__: currentFooter.current,
}
: {}),
}
)
const [builderCollapsed, setBuilderCollapsed] = useState(false)
const builderValue = useMemo(
() =>
builderValueCollection.sections.find(
({ id }) =>
id === builderValueCollection.__forced_static_footer__
) || builderValueCollection.sections[0],
[builderValueCollection]
)
const [isDragging, setIsDragging] = useState(false)
const inlinedItemsFromBuilder = builderValue.rows.reduce(
(currentItems, { columns }) => [
...currentItems,
...(columns || []).reduce((c, items) => [...c, ...items], []),
],
[]
)
const builderValueDispatch = useCallback(
(action) => {
let newState = builderReducer(builderValueCollection, action)
if (
action.type === 'BUILDER_GLOBAL_SETTING_ON_CHANGE' &&
wp.customize.previewer
) {
const builderValue =
newState.sections.find(
({ id }) => id === newState.__forced_static_footer__
) || newState.sections[0]
const { optionId, optionValue, values = {} } = action.payload
wp.customize.previewer.send('ct:footer:receive-value-update', {
itemId: 'global',
optionId,
optionValue,
values: {
...builderValue.settings,
[optionId]: optionValue,
},
})
}
if (
action.type === 'ITEM_VALUE_ON_CHANGE' &&
wp.customize.previewer
) {
const {
id,
optionId,
optionValue,
values = {},
} = action.payload
const builderValue =
newState.sections.find(
({ id }) => id === newState.__forced_static_footer__
) || newState.sections[0]
let items = builderValue.items
const currentItem = items[id] || { values: {} }
wp.customize.previewer.send('ct:footer:receive-value-update', {
itemId: id,
optionId,
optionValue,
values: {
...currentItem.values,
...values,
...(id === 'top-row' ||
id === 'middle-row' ||
id === 'bottom-row'
? {
items_per_row: builderValue.rows.find(
({ id: _id }) => id === _id
).columns.length,
}
: {}),
...((id === 'top-row' ||
id === 'middle-row' ||
id === 'bottom-row') &&
optionId === 'items_per_row'
? {
items_per_row: parseInt(optionValue, 10),
}
: {}),
[optionId]: optionValue,
},
})
}
onBuilderValueChange(newState)
builderValueDispatchInternal(action)
},
[
builderValueDispatchInternal,
onBuilderValueChange,
builderValueCollection,
]
)
const setList = (lists) =>
builderValueDispatch({
type: 'SET_LIST',
onBuilderValueChange,
payload: {
lists,
},
})
useEffect(() => {
return () => {
document
.querySelector('.wp-full-overlay')
.classList.remove('ct-builder-collapsed')
}
}, [])
return (
setList({ [id]: value }),
}}>
{createPortal(
- {
setBuilderCollapsed(!builderCollapsed)
if (builderCollapsed) {
document
.querySelector('.wp-full-overlay')
.classList.remove(
'ct-builder-collapsed'
)
} else {
document
.querySelector('.wp-full-overlay')
.classList.add(
'ct-builder-collapsed'
)
}
}}>
{builderCollapsed
? __('Show Builder', 'blocksy')
: __('Hide Builder', 'blocksy')}
,
document.querySelector('.ct-panel-builder')
)}
)
}
FooterBuilder.renderingConfig = { design: 'none' }
export default FooterBuilder