117 lines
2.5 KiB
JavaScript
117 lines
2.5 KiB
JavaScript
|
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)
|
||
|
|
})
|
||
|
|
}
|