Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/static/js/editor.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
import {
2
+
createElement,
3
+
Fragment,
4
+
useRef,
5
+
useEffect,
6
+
useState,
7
+
} from '@wordpress/element'
8
+
import { registerPlugin, withPluginContext } from '@wordpress/plugins'
9
+
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor'
10
+
import { select, withSelect, withDispatch } from '@wordpress/data'
11
+
import { compose } from '@wordpress/compose'
12
+
import { IconButton, Button } from '@wordpress/components'
13
+
import { handleMetaboxValueChange } from './editor/sync'
14
+
15
+
import ctEvents from 'ct-events'
16
+
17
+
import { __, sprintf } from 'ct-i18n'
18
+
19
+
import {
20
+
OptionsPanel,
21
+
getValueFromInput,
22
+
PanelLevel,
23
+
DeviceManagerProvider,
24
+
} from 'blocksy-options'
25
+
26
+
import { SVG, Path } from '@wordpress/primitives'
27
+
28
+
import { getCurrentDevice } from './customizer/components/useDeviceManager'
29
+
30
+
export const dropIframeBodyTransition = () => {
31
+
const maybeIframe = document.querySelector('iframe[name="editor-canvas"]')
32
+
33
+
if (maybeIframe) {
34
+
const maybeBody = maybeIframe.contentDocument.querySelector('body')
35
+
36
+
if (maybeBody) {
37
+
maybeBody.style.transition = 'none'
38
+
}
39
+
}
40
+
}
41
+
42
+
export const revertIframeBodyTransition = () => {
43
+
const maybeIframe = document.querySelector('iframe[name="editor-canvas"]')
44
+
45
+
if (maybeIframe) {
46
+
const maybeBody = maybeIframe.contentDocument.querySelector('body')
47
+
48
+
if (maybeBody) {
49
+
setTimeout(() => {
50
+
maybeBody.removeAttribute('style')
51
+
}, 100)
52
+
}
53
+
}
54
+
}
55
+
56
+
let previousDevice = null
57
+
58
+
const setResponsiveClass = () => {
59
+
let device = getCurrentDevice()
60
+
61
+
if (previousDevice === device) {
62
+
return
63
+
}
64
+
65
+
previousDevice = device
66
+
67
+
document.body.classList.remove(
68
+
'ct-desktop-view',
69
+
'ct-tablet-view',
70
+
'ct-mobile-view'
71
+
)
72
+
73
+
document.body.classList.add(`ct-${device}-view`)
74
+
}
75
+
76
+
setResponsiveClass()
77
+
78
+
wp.data.subscribe(() => {
79
+
setResponsiveClass()
80
+
})
81
+
82
+
const closeSmall = (
83
+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
84
+
<Path d="M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z" />
85
+
</SVG>
86
+
)
87
+
88
+
const starEmpty = (
89
+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
90
+
<Path
91
+
fillRule="evenodd"
92
+
d="M9.706 8.646a.25.25 0 01-.188.137l-4.626.672a.25.25 0 00-.139.427l3.348 3.262a.25.25 0 01.072.222l-.79 4.607a.25.25 0 00.362.264l4.138-2.176a.25.25 0 01.233 0l4.137 2.175a.25.25 0 00.363-.263l-.79-4.607a.25.25 0 01.072-.222l3.347-3.262a.25.25 0 00-.139-.427l-4.626-.672a.25.25 0 01-.188-.137l-2.069-4.192a.25.25 0 00-.448 0L9.706 8.646zM12 7.39l-.948 1.921a1.75 1.75 0 01-1.317.957l-2.12.308 1.534 1.495c.412.402.6.982.503 1.55l-.362 2.11 1.896-.997a1.75 1.75 0 011.629 0l1.895.997-.362-2.11a1.75 1.75 0 01.504-1.55l1.533-1.495-2.12-.308a1.75 1.75 0 01-1.317-.957L12 7.39z"
93
+
clipRule="evenodd"
94
+
/>
95
+
</SVG>
96
+
)
97
+
98
+
const starFilled = (
99
+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
100
+
<Path d="M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z" />
101
+
</SVG>
102
+
)
103
+
104
+
const BlocksyOptions = ({ name, value, options, onChange, isActive }) => {
105
+
const containerRef = useRef()
106
+
const parentContainerRef = useRef()
107
+
const [values, setValues] = useState(null)
108
+
109
+
const [controller, setController] = useState(null)
110
+
111
+
useEffect(() => {
112
+
document.body.classList[isActive ? 'add' : 'remove'](
113
+
'blocksy-sidebar-active'
114
+
)
115
+
}, [isActive])
116
+
117
+
const handleChange = ({ id: key, value: v }) => {
118
+
const futureValue = {
119
+
...(values || getValueFromInput(options, value || {})),
120
+
[key]: v,
121
+
}
122
+
123
+
handleMetaboxValueChange(key, v)
124
+
125
+
onChange({
126
+
...value,
127
+
[key]: v,
128
+
})
129
+
setValues(futureValue)
130
+
}
131
+
132
+
const listenToChange = () => {
133
+
const controller = new AbortController()
134
+
135
+
setController(controller)
136
+
137
+
ctEvents.on('ct:metabox:options:trigger-change', handleChange, {
138
+
signal: controller.signal,
139
+
})
140
+
}
141
+
142
+
useEffect(() => {
143
+
return () => {
144
+
if (controller) {
145
+
controller.abort()
146
+
}
147
+
148
+
setController(null)
149
+
}
150
+
}, [])
151
+
152
+
return (
153
+
<Fragment>
154
+
<PluginSidebarMoreMenuItem target="blocksy" icon="admin-customizer">
155
+
{sprintf(
156
+
__('%s Page Settings', 'blocksy'),
157
+
ct_localizations.product_name
158
+
)}
159
+
</PluginSidebarMoreMenuItem>
160
+
161
+
<PluginSidebar
162
+
name={name}
163
+
icon={
164
+
<span
165
+
style={{
166
+
display: 'flex',
167
+
width: '20px',
168
+
height: '20px',
169
+
}}
170
+
dangerouslySetInnerHTML={{
171
+
__html: ct_editor_localizations.options_panel_svg,
172
+
}}
173
+
/>
174
+
}
175
+
className="ct-components-panel"
176
+
title={sprintf(
177
+
__('%s Page Settings', 'blocksy'),
178
+
ct_localizations.product_name
179
+
)}>
180
+
<div id="ct-page-options" ref={parentContainerRef}>
181
+
<div className="ct-options-container" ref={containerRef}>
182
+
<DeviceManagerProvider>
183
+
<PanelLevel
184
+
containerRef={containerRef}
185
+
parentContainerRef={parentContainerRef}
186
+
useRefsAsWrappers>
187
+
<OptionsPanel
188
+
onChange={(key, v) => {
189
+
const futureValue = {
190
+
...(values ||
191
+
getValueFromInput(
192
+
options,
193
+
value || {}
194
+
)),
195
+
[key]: v,
196
+
}
197
+
198
+
handleMetaboxValueChange(key, v)
199
+
200
+
onChange({
201
+
...value,
202
+
[key]: v,
203
+
})
204
+
setValues(futureValue)
205
+
}}
206
+
onChangeMultiple={(
207
+
nextValues,
208
+
args = {}
209
+
) => {
210
+
// At the moment onChangeMultiple doesnt trigger
211
+
// updates in the dynamic styles, because we need to adapt
212
+
// handleMetaboxValueChange to handle multiple values
213
+
// correctly.
214
+
// For now this is not needed.
215
+
216
+
args = {
217
+
deleteNonExistent: false,
218
+
...args,
219
+
}
220
+
221
+
let futureValue = null
222
+
223
+
if (args.deleteNonExistent) {
224
+
futureValue = {
225
+
...nextValues,
226
+
}
227
+
} else {
228
+
futureValue = {
229
+
...(values ||
230
+
getValueFromInput(
231
+
options,
232
+
value || {}
233
+
)),
234
+
...nextValues,
235
+
}
236
+
}
237
+
238
+
onChange(futureValue)
239
+
setValues(futureValue)
240
+
}}
241
+
value={
242
+
values ||
243
+
getValueFromInput(options, value || {})
244
+
}
245
+
options={options}
246
+
/>
247
+
</PanelLevel>
248
+
</DeviceManagerProvider>
249
+
</div>
250
+
</div>
251
+
</PluginSidebar>
252
+
</Fragment>
253
+
)
254
+
}
255
+
256
+
const BlocksyOptionsComposed = compose(
257
+
withPluginContext((context, { name }) => ({
258
+
sidebarName: `${context.name}/${name}`,
259
+
})),
260
+
261
+
withSelect((select, { sidebarName }) => {
262
+
const value =
263
+
select('core/editor').getEditedPostAttribute('blocksy_meta')
264
+
265
+
const { getActiveGeneralSidebarName, isPluginItemPinned } =
266
+
select('core/edit-post')
267
+
268
+
return {
269
+
isActive: getActiveGeneralSidebarName() === sidebarName,
270
+
value: Array.isArray(value) ? {} : value || {},
271
+
options: ct_editor_localizations.post_options,
272
+
}
273
+
}),
274
+
withDispatch((dispatch, { sidebarName }) => {
275
+
return {
276
+
onChange: (blocksy_meta) => {
277
+
dispatch('core/editor').editPost({
278
+
blocksy_meta,
279
+
})
280
+
},
281
+
}
282
+
})
283
+
)(BlocksyOptions)
284
+
285
+
if (ct_editor_localizations.post_options) {
286
+
registerPlugin('blocksy', {
287
+
render: () => <BlocksyOptionsComposed name="blocksy" />,
288
+
})
289
+
}
290
+