Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/inc/panel-builder/header/logo/sync.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
import { typographyOption } from '../../../../static/js/customizer/sync/variables/typography'
2
+
import { updateAndSaveEl } from '../../../../static/js/customizer/sync'
3
+
import ctEvents from 'ct-events'
4
+
import {
5
+
responsiveClassesFor,
6
+
getRootSelectorFor,
7
+
assembleSelector,
8
+
mutateSelector,
9
+
} from '../../../../static/js/customizer/sync/helpers'
10
+
11
+
import { getCurrentScreen } from '../../../../static/js/frontend/helpers/current-screen'
12
+
13
+
const getVariables = ({ itemId, panelType }) => ({
14
+
logoMaxHeight: {
15
+
selector: assembleSelector(
16
+
mutateSelector({
17
+
selector: getRootSelectorFor({ itemId, panelType }),
18
+
operation: 'suffix',
19
+
to_add: '.site-logo-container',
20
+
})
21
+
),
22
+
variable: 'logo-max-height',
23
+
responsive: true,
24
+
unit: 'px',
25
+
},
26
+
27
+
...typographyOption({
28
+
id: 'siteTitle',
29
+
selector: assembleSelector(
30
+
mutateSelector({
31
+
selector: getRootSelectorFor({ itemId, panelType }),
32
+
operation: 'suffix',
33
+
to_add: '.site-title',
34
+
})
35
+
),
36
+
}),
37
+
38
+
...typographyOption({
39
+
id: 'siteTagline',
40
+
selector: assembleSelector(
41
+
mutateSelector({
42
+
selector: getRootSelectorFor({ itemId, panelType }),
43
+
operation: 'suffix',
44
+
to_add: '.site-description',
45
+
})
46
+
),
47
+
}),
48
+
49
+
headerLogoMargin: {
50
+
selector: assembleSelector(getRootSelectorFor({ itemId, panelType })),
51
+
type: 'spacing',
52
+
variable: 'margin',
53
+
responsive: true,
54
+
important: true,
55
+
},
56
+
57
+
// default state
58
+
siteTitleColor: [
59
+
{
60
+
selector: assembleSelector(
61
+
mutateSelector({
62
+
selector: getRootSelectorFor({ itemId, panelType }),
63
+
operation: 'suffix',
64
+
to_add: '.site-title',
65
+
})
66
+
),
67
+
variable: 'theme-link-initial-color',
68
+
type: 'color:default',
69
+
responsive: true,
70
+
},
71
+
72
+
{
73
+
selector: assembleSelector(
74
+
mutateSelector({
75
+
selector: getRootSelectorFor({ itemId, panelType }),
76
+
operation: 'suffix',
77
+
to_add: '.site-title',
78
+
})
79
+
),
80
+
variable: 'theme-link-hover-color',
81
+
type: 'color:hover',
82
+
responsive: true,
83
+
},
84
+
],
85
+
86
+
siteTaglineColor: {
87
+
selector: assembleSelector(
88
+
mutateSelector({
89
+
selector: getRootSelectorFor({ itemId, panelType }),
90
+
operation: 'suffix',
91
+
to_add: '.site-description',
92
+
})
93
+
),
94
+
variable: 'theme-text-color',
95
+
type: 'color:default',
96
+
responsive: true,
97
+
},
98
+
99
+
// transparent state
100
+
transparentSiteTitleColor: [
101
+
{
102
+
selector: assembleSelector(
103
+
mutateSelector({
104
+
selector: mutateSelector({
105
+
selector: getRootSelectorFor({ itemId, panelType }),
106
+
operation: 'suffix',
107
+
to_add: '.site-title',
108
+
}),
109
+
to_add: '[data-transparent-row="yes"]',
110
+
})
111
+
),
112
+
113
+
variable: 'theme-link-initial-color',
114
+
type: 'color:default',
115
+
responsive: true,
116
+
},
117
+
118
+
{
119
+
selector: assembleSelector(
120
+
mutateSelector({
121
+
selector: mutateSelector({
122
+
selector: getRootSelectorFor({ itemId, panelType }),
123
+
operation: 'suffix',
124
+
to_add: '.site-title',
125
+
}),
126
+
to_add: '[data-transparent-row="yes"]',
127
+
})
128
+
),
129
+
130
+
variable: 'theme-link-hover-color',
131
+
type: 'color:hover',
132
+
responsive: true,
133
+
},
134
+
],
135
+
136
+
transparentSiteTaglineColor: {
137
+
selector: assembleSelector(
138
+
mutateSelector({
139
+
selector: mutateSelector({
140
+
selector: getRootSelectorFor({ itemId, panelType }),
141
+
operation: 'suffix',
142
+
to_add: '.site-description',
143
+
}),
144
+
to_add: '[data-transparent-row="yes"]',
145
+
})
146
+
),
147
+
148
+
variable: 'theme-text-color',
149
+
type: 'color:default',
150
+
responsive: true,
151
+
},
152
+
153
+
// sticky state
154
+
stickySiteTitleColor: [
155
+
{
156
+
selector: assembleSelector(
157
+
mutateSelector({
158
+
selector: mutateSelector({
159
+
selector: getRootSelectorFor({ itemId, panelType }),
160
+
operation: 'suffix',
161
+
to_add: '.site-title',
162
+
}),
163
+
operation: 'between',
164
+
to_add: '[data-sticky*="yes"]',
165
+
})
166
+
),
167
+
variable: 'theme-link-initial-color',
168
+
type: 'color:default',
169
+
responsive: true,
170
+
},
171
+
172
+
{
173
+
selector: assembleSelector(
174
+
mutateSelector({
175
+
selector: mutateSelector({
176
+
selector: getRootSelectorFor({ itemId, panelType }),
177
+
operation: 'suffix',
178
+
to_add: '.site-title',
179
+
}),
180
+
operation: 'between',
181
+
to_add: '[data-sticky*="yes"]',
182
+
})
183
+
),
184
+
variable: 'theme-link-hover-color',
185
+
type: 'color:hover',
186
+
responsive: true,
187
+
},
188
+
],
189
+
190
+
stickySiteTaglineColor: {
191
+
selector: assembleSelector(
192
+
mutateSelector({
193
+
selector: mutateSelector({
194
+
selector: getRootSelectorFor({ itemId, panelType }),
195
+
operation: 'suffix',
196
+
to_add: '.site-description',
197
+
}),
198
+
operation: 'between',
199
+
to_add: '[data-sticky*="yes"]',
200
+
})
201
+
),
202
+
variable: 'theme-text-color',
203
+
type: 'color:default',
204
+
responsive: true,
205
+
},
206
+
207
+
header_logo_horizontal_alignment: {
208
+
selector: assembleSelector(getRootSelectorFor({ itemId, panelType })),
209
+
variable: 'horizontal-alignment',
210
+
responsive: true,
211
+
unit: '',
212
+
},
213
+
214
+
// footer logo
215
+
footer_logo_horizontal_alignment: {
216
+
selector: assembleSelector(
217
+
mutateSelector({
218
+
selector: getRootSelectorFor({
219
+
itemId,
220
+
panelType: 'footer',
221
+
}),
222
+
operation: 'replace-last',
223
+
to_add: '[data-column="logo"]',
224
+
})
225
+
),
226
+
variable: 'horizontal-alignment',
227
+
responsive: true,
228
+
unit: '',
229
+
},
230
+
231
+
footer_logo_vertical_alignment: {
232
+
selector: assembleSelector(
233
+
mutateSelector({
234
+
selector: getRootSelectorFor({
235
+
itemId,
236
+
panelType: 'footer',
237
+
}),
238
+
operation: 'replace-last',
239
+
to_add: '[data-column="logo"]',
240
+
})
241
+
),
242
+
variable: 'vertical-alignment',
243
+
responsive: true,
244
+
unit: '',
245
+
},
246
+
})
247
+
248
+
ctEvents.on(
249
+
'ct:header:sync:collect-variable-descriptors',
250
+
(variableDescriptors) => {
251
+
variableDescriptors['logo'] = ({ itemId }) =>
252
+
getVariables({ itemId, panelType: 'header' })
253
+
}
254
+
)
255
+
256
+
ctEvents.on(
257
+
'ct:footer:sync:collect-variable-descriptors',
258
+
(variableDescriptors) => {
259
+
variableDescriptors['logo'] = ({ itemId }) =>
260
+
getVariables({ itemId, panelType: 'footer' })
261
+
}
262
+
)
263
+
264
+
ctEvents.on('ct:header:sync:item:logo', ({ itemId, optionId, optionValue }) => {
265
+
const selector = `[data-id="${itemId}"]`
266
+
267
+
if (optionId === 'blogdescription') {
268
+
updateAndSaveEl(selector, (el) => {
269
+
el.querySelector('.site-description') &&
270
+
(el.querySelector('.site-description').innerHTML = optionValue)
271
+
})
272
+
}
273
+
274
+
if (optionId === 'blogname_visibility') {
275
+
updateAndSaveEl(selector, (el) => {
276
+
responsiveClassesFor(
277
+
{ ...optionValue },
278
+
el.querySelector('.site-title')
279
+
)
280
+
})
281
+
}
282
+
283
+
if (optionId === 'blogdescription_visibility') {
284
+
updateAndSaveEl(selector, (el) => {
285
+
responsiveClassesFor(
286
+
{ ...optionValue },
287
+
el.querySelector('.site-description')
288
+
)
289
+
})
290
+
}
291
+
292
+
if (optionId === 'logo_position') {
293
+
updateAndSaveEl(
294
+
selector,
295
+
(el) => {
296
+
if (!optionValue.desktop) {
297
+
optionValue = {
298
+
desktop: optionValue,
299
+
mobile: optionValue,
300
+
}
301
+
}
302
+
303
+
el.dataset.logo = optionValue.desktop
304
+
},
305
+
{ onlyView: 'desktop' }
306
+
)
307
+
308
+
updateAndSaveEl(
309
+
selector,
310
+
(el) => {
311
+
if (!optionValue.desktop) {
312
+
optionValue = {
313
+
desktop: optionValue,
314
+
mobile: optionValue,
315
+
}
316
+
}
317
+
318
+
el.dataset.logo = optionValue.mobile
319
+
},
320
+
{ onlyView: 'mobile' }
321
+
)
322
+
}
323
+
})
324
+
325
+
ctEvents.on('ct:footer:sync:item:logo', ({ itemId, optionId, optionValue }) => {
326
+
const selector = `.ct-footer [data-id="${itemId}"]`
327
+
const el = document.querySelector(selector)
328
+
329
+
if (optionId === 'blogdescription') {
330
+
el.querySelector('.site-description') &&
331
+
(el.querySelector('.site-description').innerHTML = optionValue)
332
+
}
333
+
334
+
if (optionId === 'blogname_visibility') {
335
+
responsiveClassesFor(
336
+
{ ...optionValue },
337
+
el.querySelector('.site-title')
338
+
)
339
+
}
340
+
341
+
if (optionId === 'visibility') {
342
+
responsiveClassesFor(optionValue, el)
343
+
}
344
+
345
+
if (optionId === 'blogdescription_visibility') {
346
+
responsiveClassesFor(
347
+
{ ...optionValue },
348
+
el.querySelector('.site-description')
349
+
)
350
+
}
351
+
352
+
if (optionId === 'logo_position') {
353
+
el.dataset.logo = optionValue
354
+
}
355
+
})
356
+