import { createElement, createRoot } from '@wordpress/element'
import OptionsRoot from '../options/OptionsRoot'
import { getValueFromInput } from '../options/helpers/get-value-from-input'
import $ from 'jquery'
import { __ } from 'ct-i18n'
export const initWooVariation = (variationWrapper) => {
let uploadImage = variationWrapper.querySelector('.upload_image')
if (!uploadImage) {
return
}
if (uploadImage.closest('.form-flex-box')) {
uploadImage = uploadImage.closest('.form-flex-box')
} else {
uploadImage = uploadImage.nextElementSibling
}
const div = document.createElement('div')
div.classList.add('form-row')
div.classList.add('form-row-full')
div.classList.add('ct-variation-image-gallery')
uploadImage.insertAdjacentElement('afterend', div)
const maybeWpmlLocked = document.querySelector('.wcml_lock_img')
const input = variationWrapper.querySelector(
'[name*="blocksy_post_meta_options"]'
)
if (!input) {
return
}
const options = {
gallery_source: {
label: __('Variation Gallery', 'blocksy'),
type: maybeWpmlLocked ? 'hidden' : 'ct-radio',
value: 'default',
design: 'inline',
divider: 'bottom',
choices: {
default: __('Default', 'blocksy'),
custom: __('Custom', 'blocksy'),
},
},
...(maybeWpmlLocked
? {
inheritance: {
label: __('Variation Gallery', 'blocksy'),
type: 'ct-notification',
design: 'inline',
text: maybeWpmlLocked.outerHTML
.replace('wcml_lock_img', '')
.replace('display: none;', ''),
},
}
: {}),
condition: maybeWpmlLocked
? {
type: 'hidden',
}
: {
type: 'ct-condition',
condition: {
gallery_source: 'custom',
},
options: {
images: {
label: __('Custom Image Gallery', 'blocksy'),
type: 'ct-multi-image-uploader',
design: ({ value }) =>
value.length === 0 ? 'inline' : 'block',
value: [],
},
},
},
}
const root = createRoot(div)
root.render(
<OptionsRoot
options={options}
value={getValueFromInput(
options,
JSON.parse(input.value),
null,
false
)}
input_id={input.id}
input_name={input.name}
hasRevertButton={false}
/>
)
}
export const initAllWooVariations = () => {
;[
...document.querySelectorAll(
'.woocommerce_variations .woocommerce_variation'
),
].map((variationWrapper) => {
if (variationWrapper.hasBlocksyOptions) {
return
}
variationWrapper.hasBlocksyOptions = true
initWooVariation(variationWrapper)
})
}
|