Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/static/js/options/options/ct-typography.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
import {
2
+
Fragment,
3
+
createElement,
4
+
createPortal,
5
+
Component,
6
+
useRef,
7
+
useReducer,
8
+
useEffect,
9
+
useMemo,
10
+
useCallback,
11
+
useState,
12
+
} from '@wordpress/element'
13
+
import classnames from 'classnames'
14
+
import TypographyModal from './typography/TypographyModal'
15
+
import OutsideClickHandler from './react-outside-click-handler'
16
+
import { humanizeVariations, familyForDisplay } from './typography/helpers'
17
+
import { maybePromoteScalarValueIntoResponsive } from '../../customizer/components/responsive-controls'
18
+
19
+
import usePopoverMaker from '../helpers/usePopoverMaker'
20
+
21
+
import { Transition } from 'react-spring'
22
+
import bezierEasing from 'bezier-easing'
23
+
24
+
import { __ } from 'ct-i18n'
25
+
26
+
const getLeftForEl = (modal, el) => {
27
+
if (!modal) return
28
+
if (!el) return
29
+
30
+
let style = getComputedStyle(modal)
31
+
32
+
let wrapperLeft = parseFloat(style.left)
33
+
34
+
el = el.getBoundingClientRect()
35
+
36
+
return {
37
+
'--option-modal-arrow-position': `${
38
+
el.left + el.width / 2 - wrapperLeft - 6
39
+
}px`,
40
+
}
41
+
}
42
+
43
+
const Typography = ({
44
+
option: { label = '', desc = '', attr = {} },
45
+
option,
46
+
value,
47
+
device,
48
+
onChange,
49
+
}) => {
50
+
// const [isOpen, setIsOpen] = useState(false)
51
+
52
+
// options | fonts | variations | search
53
+
const [currentViewCache, setCurrentViewCache] = useState('_:_')
54
+
55
+
const [isConfirmingGdpr, setIsConfirmingGdpr] = useState(false)
56
+
57
+
const typographyWrapper = useRef()
58
+
59
+
let [currentView, previousView] = useMemo(
60
+
() => currentViewCache.split(':'),
61
+
[currentViewCache]
62
+
)
63
+
64
+
const setCurrentView = useCallback(
65
+
(newView) => setCurrentViewCache(`${newView}:${currentView}`),
66
+
[currentView]
67
+
)
68
+
69
+
const [{ isOpen, isTransitioning }, setModalState] = useState({
70
+
isOpen: false,
71
+
isTransitioning: false,
72
+
})
73
+
74
+
const { styles, popoverProps } = usePopoverMaker({
75
+
ref: typographyWrapper,
76
+
defaultHeight: 430,
77
+
shouldCalculate: isTransitioning || isOpen,
78
+
})
79
+
80
+
const setIsOpen = (isOpen) => {
81
+
setModalState((state) => ({
82
+
...state,
83
+
isOpen,
84
+
isTransitioning: true,
85
+
}))
86
+
}
87
+
88
+
const stopTransitioning = () =>
89
+
setModalState((state) => ({
90
+
...state,
91
+
isTransitioning: false,
92
+
}))
93
+
94
+
const fontFamilyRef = useRef()
95
+
const fontSizeRef = useRef()
96
+
const fontWeightRef = useRef()
97
+
const dotsRef = useRef()
98
+
99
+
const confirmationRef = useRef()
100
+
101
+
const arrowLeft = useMemo(() => {
102
+
const view = currentView
103
+
104
+
const futureRef =
105
+
view === 'options'
106
+
? fontSizeRef.current
107
+
: view === 'fonts'
108
+
? fontFamilyRef.current
109
+
: view === 'variations'
110
+
? fontWeightRef.current
111
+
: fontSizeRef.current
112
+
113
+
return (
114
+
popoverProps.ref &&
115
+
popoverProps.ref.current &&
116
+
getLeftForEl(popoverProps.ref.current, futureRef)
117
+
)
118
+
}, [
119
+
isOpen,
120
+
currentView,
121
+
popoverProps.ref,
122
+
popoverProps.ref && popoverProps.ref.current,
123
+
fontFamilyRef && fontFamilyRef.current,
124
+
fontWeightRef && fontWeightRef.current,
125
+
fontSizeRef && fontSizeRef.current,
126
+
dotsRef && dotsRef.current,
127
+
])
128
+
129
+
let visualFontSize =
130
+
maybePromoteScalarValueIntoResponsive(value['size'])[device] ===
131
+
'CT_CSS_SKIP_RULE'
132
+
? __('Default Size', 'blocksy')
133
+
: maybePromoteScalarValueIntoResponsive(value['size'])[device]
134
+
135
+
let currentFontSizeUnit = maybePromoteScalarValueIntoResponsive(
136
+
value['size']
137
+
)
138
+
[device].toString()
139
+
.replace(/[0-9]/g, '')
140
+
.replace(/\-/g, '')
141
+
.replace(/\./g, '')
142
+
.replace('CT_CSS_SKIP_RULE', '')
143
+
144
+
let unitsList = ['px', 'em', 'rem', 'pt', 'vw']
145
+
146
+
if (
147
+
maybePromoteScalarValueIntoResponsive(value['size'])[device] !==
148
+
'CT_CSS_SKIP_RULE' &&
149
+
unitsList.indexOf(currentFontSizeUnit) === -1
150
+
) {
151
+
visualFontSize = __('Custom', 'blocksy')
152
+
}
153
+
154
+
return (
155
+
<div className={classnames('ct-typography', {})}>
156
+
<OutsideClickHandler
157
+
disabled={!isOpen}
158
+
useCapture={false}
159
+
className="ct-typohraphy-value"
160
+
additionalRefs={[popoverProps.ref, confirmationRef]}
161
+
onOutsideClick={() => {
162
+
if (isConfirmingGdpr) {
163
+
return
164
+
}
165
+
setIsOpen(false)
166
+
}}
167
+
wrapperProps={{
168
+
ref: typographyWrapper,
169
+
onClick: (e) => {
170
+
e.preventDefault()
171
+
172
+
if (isOpen) {
173
+
setCurrentView('options')
174
+
return
175
+
}
176
+
177
+
setCurrentViewCache('options:_')
178
+
setIsOpen('options')
179
+
},
180
+
}}>
181
+
<div>
182
+
<span
183
+
onClick={(e) => {
184
+
e.stopPropagation()
185
+
186
+
if (isOpen) {
187
+
setCurrentView('fonts')
188
+
return
189
+
}
190
+
191
+
setCurrentViewCache('fonts:_')
192
+
setIsOpen('fonts')
193
+
}}
194
+
className="ct-font"
195
+
ref={fontFamilyRef}>
196
+
<span>
197
+
{value.family === 'Default'
198
+
? __('Default Family', 'blocksy')
199
+
: familyForDisplay(value.family)}
200
+
</span>
201
+
</span>
202
+
<i>/</i>
203
+
<span
204
+
onClick={(e) => {
205
+
e.stopPropagation()
206
+
207
+
if (isOpen) {
208
+
setCurrentView('options')
209
+
return
210
+
}
211
+
212
+
setCurrentViewCache('options:_')
213
+
setIsOpen('font_size')
214
+
}}
215
+
ref={fontSizeRef}
216
+
className="ct-size">
217
+
<span>{visualFontSize}</span>
218
+
</span>
219
+
<i>/</i>
220
+
<span
221
+
ref={fontWeightRef}
222
+
onClick={(e) => {
223
+
e.stopPropagation()
224
+
225
+
if (isOpen) {
226
+
setCurrentView('variations')
227
+
return
228
+
}
229
+
230
+
setCurrentViewCache('variations:_')
231
+
setIsOpen('variations')
232
+
}}
233
+
className="ct-weight">
234
+
<span>{humanizeVariations(value.variation)}</span>
235
+
</span>
236
+
</div>
237
+
238
+
<a ref={dotsRef} />
239
+
</OutsideClickHandler>
240
+
241
+
{(isTransitioning || isOpen) &&
242
+
createPortal(
243
+
<Transition
244
+
items={isOpen}
245
+
onRest={(isOpen) => {
246
+
stopTransitioning()
247
+
}}
248
+
config={{
249
+
duration: 100,
250
+
easing: bezierEasing(0.25, 0.1, 0.25, 1.0),
251
+
}}
252
+
from={
253
+
isOpen
254
+
? {
255
+
transform: 'scale3d(0.95, 0.95, 1)',
256
+
opacity: 0,
257
+
}
258
+
: { opacity: 1 }
259
+
}
260
+
enter={
261
+
isOpen
262
+
? {
263
+
transform: 'scale3d(1, 1, 1)',
264
+
opacity: 1,
265
+
}
266
+
: {
267
+
opacity: 1,
268
+
}
269
+
}
270
+
leave={
271
+
!isOpen
272
+
? {
273
+
transform: 'scale3d(0.95, 0.95, 1)',
274
+
opacity: 0,
275
+
}
276
+
: {
277
+
opacity: 1,
278
+
}
279
+
}>
280
+
{(style, item) => {
281
+
if (!item) {
282
+
return null
283
+
}
284
+
285
+
return (
286
+
<TypographyModal
287
+
isConfirmingGdpr={isConfirmingGdpr}
288
+
setIsConfirmingGdpr={setIsConfirmingGdpr}
289
+
confirmationRef={confirmationRef}
290
+
wrapperProps={{
291
+
style: {
292
+
...style,
293
+
...styles,
294
+
...arrowLeft,
295
+
},
296
+
...popoverProps,
297
+
}}
298
+
onChange={onChange}
299
+
value={value}
300
+
option={option}
301
+
initialView={item}
302
+
setInititialView={(initialView) =>
303
+
setIsOpen(initialView)
304
+
}
305
+
currentView={currentView}
306
+
previousView={previousView}
307
+
setCurrentView={setCurrentView}
308
+
/>
309
+
)
310
+
311
+
/*
312
+
isOpen &&
313
+
((props) => (
314
+
<TypographyModal
315
+
wrapperProps={{
316
+
style: {
317
+
...props,
318
+
...styles,
319
+
...arrowLeft,
320
+
},
321
+
...popoverProps,
322
+
}}
323
+
onChange={onChange}
324
+
value={value}
325
+
option={option}
326
+
initialView={isOpen}
327
+
setInititialView={(initialView) =>
328
+
setIsOpen(initialView)
329
+
}
330
+
currentView={currentView}
331
+
previousView={previousView}
332
+
setCurrentView={setCurrentView}
333
+
/>
334
+
))
335
+
*/
336
+
}}
337
+
</Transition>,
338
+
document.body
339
+
)}
340
+
</div>
341
+
)
342
+
}
343
+
344
+
export default Typography
345
+