Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/static/js/options/options/ct-background.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
import {
2
+
Fragment,
3
+
createElement,
4
+
Component,
5
+
useRef,
6
+
useEffect,
7
+
useMemo,
8
+
useCallback,
9
+
createPortal,
10
+
useState,
11
+
} from '@wordpress/element'
12
+
import cls from 'classnames'
13
+
import BackgroundModal from './background/BackgroundModal'
14
+
import OutsideClickHandler from './react-outside-click-handler'
15
+
import { getUrlForPattern } from './background/PatternPicker'
16
+
import { __ } from 'ct-i18n'
17
+
18
+
import usePopoverMaker from '../helpers/usePopoverMaker'
19
+
20
+
/**
21
+
* Support color picker values inside the background picker.
22
+
* Which means transitions from ct-color-picker are made possible thanks to
23
+
* this logic.
24
+
*/
25
+
const maybeConvertFromColorPickerTo = (value) => {
26
+
if (!value.background_type) {
27
+
if (value[Object.keys(value)[0]].color) {
28
+
return {
29
+
background_type: 'color',
30
+
background_pattern: 'type-1',
31
+
background_image: {
32
+
attachment_id: null,
33
+
x: 0,
34
+
y: 0,
35
+
},
36
+
37
+
background_repeat: 'no-repeat',
38
+
background_size: 'auto',
39
+
background_attachment: 'scroll',
40
+
41
+
patternColor: {
42
+
default: {
43
+
color: '#e5e7ea',
44
+
},
45
+
},
46
+
47
+
backgroundColor: {
48
+
default: value[Object.keys(value)[0]],
49
+
},
50
+
}
51
+
}
52
+
}
53
+
54
+
return value
55
+
}
56
+
57
+
const Background = ({ option, value, onChange }) => {
58
+
const [isOpen, setIsOpen] = useState(false)
59
+
const [outsideClickFreezed, setOutsideClickFreezed] = useState(false)
60
+
const backgroundWrapper = useRef()
61
+
62
+
value = maybeConvertFromColorPickerTo(value)
63
+
64
+
const isInherit =
65
+
!option.has_no_color &&
66
+
value.background_type === 'color' &&
67
+
(value.backgroundColor.default.color === 'CT_CSS_SKIP_RULE' ||
68
+
value.backgroundColor.default.color === 'transparent')
69
+
70
+
const isNoColor =
71
+
option.has_no_color &&
72
+
value.background_type === 'color' &&
73
+
(value.backgroundColor.default.color === 'CT_CSS_SKIP_RULE' ||
74
+
value.backgroundColor.default.color === 'transparent')
75
+
76
+
const { styles, popoverProps } = usePopoverMaker({
77
+
ref: backgroundWrapper,
78
+
defaultHeight: 434,
79
+
shouldCalculate: backgroundWrapper && backgroundWrapper.current,
80
+
})
81
+
82
+
return (
83
+
<div
84
+
ref={backgroundWrapper}
85
+
className={cls('ct-background', {
86
+
active: isOpen,
87
+
})}>
88
+
<div
89
+
className={cls('ct-background-preview', {
90
+
'ct-color-inherit': isInherit,
91
+
'ct-no-color': isNoColor,
92
+
})}
93
+
data-tooltip-reveal="top"
94
+
onClick={(e) => {
95
+
e.preventDefault()
96
+
setIsOpen(!isOpen)
97
+
98
+
if (value.background_type === 'color') {
99
+
if (
100
+
value.backgroundColor.default.color ===
101
+
'CT_CSS_SKIP_RULE' ||
102
+
value.backgroundColor.default.color ===
103
+
'transparent'
104
+
) {
105
+
onChange({
106
+
...value,
107
+
backgroundColor: {
108
+
default: {
109
+
color:
110
+
option.default_inherit_color ||
111
+
'#ffffff',
112
+
},
113
+
},
114
+
})
115
+
}
116
+
}
117
+
}}
118
+
data-background-type={value.background_type}
119
+
style={{
120
+
...(value.backgroundColor.default.color.indexOf(
121
+
'CT_CSS_SKIP_RULE'
122
+
) > -1
123
+
? {}
124
+
: {
125
+
backgroundColor:
126
+
value.backgroundColor.default.color,
127
+
}),
128
+
129
+
'--background-position': `${Math.round(
130
+
parseFloat(value.background_image.x) * 100
131
+
)}% ${Math.round(
132
+
parseFloat(value.background_image.y) * 100
133
+
)}%`,
134
+
135
+
'--pattern-mask':
136
+
value.background_type === 'pattern'
137
+
? `url(${getUrlForPattern(
138
+
value.background_pattern
139
+
)})`
140
+
: '',
141
+
142
+
'--background-image':
143
+
value.background_type === 'gradient'
144
+
? value.gradient
145
+
: value.background_image.url
146
+
? `${
147
+
value.overlayColor &&
148
+
value.overlayColor.default.color.indexOf(
149
+
'CT_CSS_SKIP_RULE'
150
+
) === -1
151
+
? `linear-gradient(${value.overlayColor.default.color}, ${value.overlayColor.default.color}), `
152
+
: ''
153
+
}url(${value.background_image.url})`
154
+
: 'none',
155
+
'--pattern-color': value.patternColor.default.color,
156
+
}}>
157
+
<i className="ct-tooltip">
158
+
{
159
+
{
160
+
inherit: __('Inherited', 'blocksy'),
161
+
no_color: __('No Color', 'blocksy'),
162
+
pattern: __('Pattern', 'blocksy'),
163
+
gradient: __('Gradient', 'blocksy'),
164
+
color: __('Color', 'blocksy'),
165
+
image: __('Image', 'blocksy'),
166
+
}[
167
+
isNoColor
168
+
? 'no_color'
169
+
: isInherit
170
+
? 'inherit'
171
+
: value.background_type
172
+
]
173
+
}
174
+
</i>
175
+
176
+
{isInherit && (
177
+
<svg width="25" height="25" viewBox="0 0 30 30">
178
+
<path d="M15 3c-3 0-5.7 1.1-7.8 2.9-.4.3-.5.9-.2 1.4.3.4 1 .5 1.4.2h.1C10.3 5.9 12.5 5 15 5c5.2 0 9.5 3.9 10 9h-3l4 6 4-6h-3.1C26.4 7.9 21.3 3 15 3zM4 10l-4 6h3.1c.5 6.1 5.6 11 11.9 11 3 0 5.7-1.1 7.8-2.9.4-.3.5-1 .2-1.4-.3-.4-1-.5-1.4-.2h-.1c-1.7 1.5-4 2.4-6.5 2.4-5.2 0-9.5-3.9-10-9h3L4 10z" />
179
+
</svg>
180
+
)}
181
+
</div>
182
+
183
+
{backgroundWrapper &&
184
+
backgroundWrapper.current &&
185
+
createPortal(
186
+
<OutsideClickHandler
187
+
useCapture={false}
188
+
display="block"
189
+
disabled={!isOpen || outsideClickFreezed}
190
+
onOutsideClick={(e) => {
191
+
if (e.target.closest('.components-popover')) {
192
+
return
193
+
}
194
+
195
+
setTimeout(() => setIsOpen(false))
196
+
}}
197
+
wrapperProps={{
198
+
style: styles,
199
+
...popoverProps,
200
+
className: cls(
201
+
'ct-option-modal ct-background-modal',
202
+
{
203
+
active: isOpen,
204
+
}
205
+
),
206
+
}}>
207
+
<BackgroundModal
208
+
onChange={onChange}
209
+
value={value}
210
+
option={option}
211
+
isOpen={isOpen}
212
+
setOutsideClickFreezed={setOutsideClickFreezed}
213
+
/>
214
+
</OutsideClickHandler>,
215
+
document.body
216
+
)}
217
+
</div>
218
+
)
219
+
}
220
+
221
+
export default Background
222
+