Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/static/js/customizer/sync/variables.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
import { getHeroVariables } from './hero-section'
2
+
import { getPostListingVariables } from './template-parts/content-loop'
3
+
import { getTypographyVariablesFor } from './variables/typography'
4
+
import { getBackgroundVariablesFor } from './variables/background'
5
+
import { getWooVariablesFor } from './variables/woocommerce'
6
+
import { getFormsVariablesFor } from './variables/forms'
7
+
import { getPaginationVariables } from './pagination'
8
+
import { getCommentsVariables } from './comments'
9
+
10
+
import { getSingleContentVariablesFor } from './single/structure'
11
+
12
+
import {
13
+
getPostRelatedVariables,
14
+
getSingleElementsVariables,
15
+
} from './variables/single/related-posts'
16
+
17
+
import { updateVariableInStyleTags } from 'customizer-sync-helpers'
18
+
import { makeVariablesWithCondition } from './helpers/variables-with-conditions'
19
+
20
+
import { isFunction } from './builder'
21
+
22
+
import ctEvents from 'ct-events'
23
+
24
+
import { maybePromoteScalarValueIntoResponsive } from 'customizer-sync-helpers/dist/promote-into-responsive'
25
+
26
+
let variablesCache = null
27
+
28
+
const getAllVariables = () => {
29
+
if (variablesCache) {
30
+
return variablesCache
31
+
}
32
+
33
+
let allVariables = {
34
+
result: {
35
+
colorPalette: (value) =>
36
+
Object.keys(value).reduce(
37
+
(acc, key) => [
38
+
...acc,
39
+
{
40
+
variable: value[key].variable
41
+
? value[key].variable
42
+
: `theme-palette-color-${key.replace(
43
+
'color',
44
+
''
45
+
)}`,
46
+
type: `color:${key}`,
47
+
},
48
+
],
49
+
[]
50
+
),
51
+
52
+
background_pattern: [
53
+
{
54
+
variable: 'backgroundPattern',
55
+
},
56
+
],
57
+
58
+
...getSingleContentVariablesFor(),
59
+
60
+
// Page Hero
61
+
...getHeroVariables(),
62
+
63
+
...getPostRelatedVariables(),
64
+
65
+
...getPostListingVariables(),
66
+
...getPaginationVariables(),
67
+
68
+
...getTypographyVariablesFor(),
69
+
...getBackgroundVariablesFor(),
70
+
...getFormsVariablesFor(),
71
+
...getCommentsVariables(),
72
+
...getWooVariablesFor(),
73
+
74
+
// Single
75
+
...getSingleElementsVariables(),
76
+
77
+
// Colors
78
+
fontColor: {
79
+
selector: ':root',
80
+
variable: 'theme-text-color',
81
+
type: 'color',
82
+
},
83
+
84
+
linkColor: [
85
+
{
86
+
selector: ':root',
87
+
variable: 'theme-link-initial-color',
88
+
type: 'color:default',
89
+
},
90
+
91
+
{
92
+
selector: ':root',
93
+
variable: 'theme-link-hover-color',
94
+
type: 'color:hover',
95
+
},
96
+
],
97
+
98
+
selectionColor: [
99
+
{
100
+
selector: ':root',
101
+
variable: 'theme-selection-text-color',
102
+
type: 'color:default',
103
+
},
104
+
105
+
{
106
+
selector: ':root',
107
+
variable: 'theme-selection-background-color',
108
+
type: 'color:hover',
109
+
},
110
+
],
111
+
112
+
border_color: {
113
+
variable: 'theme-border-color',
114
+
type: 'color',
115
+
selector: ':root',
116
+
},
117
+
118
+
// Headings
119
+
headingColor: {
120
+
variable: 'theme-headings-color',
121
+
type: 'color',
122
+
selector: ':root',
123
+
},
124
+
125
+
heading_1_color: {
126
+
variable: 'theme-heading-1-color',
127
+
type: 'color',
128
+
selector: ':root',
129
+
},
130
+
131
+
heading_2_color: {
132
+
variable: 'theme-heading-2-color',
133
+
type: 'color',
134
+
selector: ':root',
135
+
},
136
+
137
+
heading_3_color: {
138
+
variable: 'theme-heading-3-color',
139
+
type: 'color',
140
+
selector: ':root',
141
+
},
142
+
143
+
heading_4_color: {
144
+
variable: 'theme-heading-4-color',
145
+
type: 'color',
146
+
selector: ':root',
147
+
},
148
+
149
+
heading_5_color: {
150
+
variable: 'theme-heading-5-color',
151
+
type: 'color',
152
+
selector: ':root',
153
+
},
154
+
155
+
heading_6_color: {
156
+
variable: 'theme-heading-6-color',
157
+
type: 'color',
158
+
selector: ':root',
159
+
},
160
+
161
+
// Content spacing
162
+
contentSpacing: [
163
+
{
164
+
selector: ':root',
165
+
variable: 'theme-content-spacing',
166
+
extractValue: (value) =>
167
+
({
168
+
none: '0px',
169
+
compact: '0.8em',
170
+
comfortable: '1.5em',
171
+
spacious: '2em',
172
+
}[value]),
173
+
},
174
+
175
+
{
176
+
selector: ':root',
177
+
variable: 'has-theme-content-spacing',
178
+
extractValue: (value) => {
179
+
return value === 'none' ? '0' : '1'
180
+
},
181
+
},
182
+
],
183
+
184
+
// Buttons
185
+
buttonMinHeight: {
186
+
selector: ':root',
187
+
variable: 'theme-button-min-height',
188
+
responsive: true,
189
+
unit: 'px',
190
+
},
191
+
192
+
buttonHoverEffect: [
193
+
{
194
+
selector: ':root',
195
+
variable: 'theme-button-shadow',
196
+
extractValue: (value) =>
197
+
value === 'yes' ? 'CT_CSS_SKIP_RULE' : 'none',
198
+
},
199
+
200
+
{
201
+
selector: ':root',
202
+
variable: 'theme-button-transform',
203
+
extractValue: (value) =>
204
+
value === 'yes' ? 'CT_CSS_SKIP_RULE' : 'none',
205
+
},
206
+
],
207
+
208
+
buttonTextColor: [
209
+
{
210
+
selector: ':root',
211
+
variable: 'theme-button-text-initial-color',
212
+
type: 'color:default',
213
+
},
214
+
215
+
{
216
+
selector: ':root',
217
+
variable: 'theme-button-text-hover-color',
218
+
type: 'color:hover',
219
+
},
220
+
],
221
+
222
+
buttonColor: [
223
+
{
224
+
selector: ':root',
225
+
variable: 'theme-button-background-initial-color',
226
+
type: 'color:default',
227
+
},
228
+
229
+
{
230
+
selector: ':root',
231
+
variable: 'theme-button-background-hover-color',
232
+
type: 'color:hover',
233
+
},
234
+
],
235
+
236
+
buttonBorder: [
237
+
{
238
+
selector: ':root',
239
+
variable: 'theme-button-border',
240
+
type: 'border',
241
+
},
242
+
243
+
{
244
+
selector: ':root',
245
+
variable: 'theme-button-border-hover-color',
246
+
type: 'color:default',
247
+
extractValue: ({ style, secondColor }) => ({
248
+
default: {
249
+
...secondColor,
250
+
...(style === 'none'
251
+
? {
252
+
color: 'CT_CSS_SKIP_RULE',
253
+
}
254
+
: {}),
255
+
},
256
+
}),
257
+
},
258
+
],
259
+
260
+
buttonRadius: {
261
+
selector: ':root',
262
+
type: 'spacing',
263
+
variable: 'theme-button-border-radius',
264
+
responsive: true,
265
+
emptyValue: 3,
266
+
},
267
+
268
+
buttonPadding: {
269
+
selector: ':root',
270
+
type: 'spacing',
271
+
variable: 'theme-button-padding',
272
+
responsive: true,
273
+
},
274
+
275
+
// Layout
276
+
maxSiteWidth: {
277
+
selector: ':root',
278
+
variable: 'theme-normal-container-max-width',
279
+
unit: 'px',
280
+
},
281
+
282
+
contentAreaSpacing: {
283
+
selector: ':root',
284
+
variable: 'theme-content-vertical-spacing',
285
+
responsive: true,
286
+
unit: '',
287
+
},
288
+
289
+
contentEdgeSpacing: {
290
+
selector: ':root',
291
+
variable: 'theme-container-edge-spacing',
292
+
responsive: true,
293
+
unit: 'vw',
294
+
extractValue: (value) => {
295
+
value = maybePromoteScalarValueIntoResponsive(value)
296
+
297
+
return {
298
+
desktop: 100 - parseFloat(value.desktop) * 2,
299
+
tablet: 100 - parseFloat(value.tablet) * 2,
300
+
mobile: 100 - parseFloat(value.mobile) * 2,
301
+
}
302
+
},
303
+
},
304
+
305
+
narrowContainerWidth: {
306
+
selector: ':root',
307
+
variable: 'theme-narrow-container-max-width',
308
+
unit: 'px',
309
+
},
310
+
311
+
wideOffset: {
312
+
selector: ':root',
313
+
variable: 'theme-wide-offset',
314
+
unit: 'px',
315
+
},
316
+
317
+
// Sidebar
318
+
sidebarWidth: [
319
+
{
320
+
selector: '[data-sidebar]',
321
+
variable: 'sidebar-width',
322
+
unit: '%',
323
+
},
324
+
{
325
+
selector: '[data-sidebar]',
326
+
variable: 'sidebar-width-no-unit',
327
+
unit: '',
328
+
},
329
+
],
330
+
331
+
sidebarGap: {
332
+
selector: '[data-sidebar]',
333
+
variable: 'sidebar-gap',
334
+
unit: '',
335
+
},
336
+
337
+
sidebarOffset: {
338
+
selector: '[data-sidebar]',
339
+
variable: 'sidebar-offset',
340
+
unit: 'px',
341
+
},
342
+
343
+
mobile_sidebar_position: [
344
+
{
345
+
selector: ':root',
346
+
variable: 'sidebar-order',
347
+
responsive: true,
348
+
extractValue: (value) => ({
349
+
desktop: 'CT_CSS_SKIP_RULE',
350
+
tablet: value === 'top' ? '-1' : 'CT_CSS_SKIP_RULE',
351
+
mobile: value === 'top' ? '-1' : 'CT_CSS_SKIP_RULE',
352
+
}),
353
+
},
354
+
],
355
+
356
+
sidebarWidgetsTitleColor: {
357
+
selector: '.ct-sidebar .widget-title',
358
+
variable: 'theme-heading-color',
359
+
type: 'color',
360
+
responsive: true,
361
+
},
362
+
363
+
sidebarWidgetsFontColor: [
364
+
{
365
+
selector: '.ct-sidebar > *',
366
+
variable: 'theme-text-color',
367
+
type: 'color:default',
368
+
responsive: true,
369
+
},
370
+
371
+
{
372
+
selector: '.ct-sidebar',
373
+
variable: 'theme-link-initial-color',
374
+
type: 'color:link_initial',
375
+
responsive: true,
376
+
},
377
+
378
+
{
379
+
selector: '.ct-sidebar',
380
+
variable: 'theme-link-hover-color',
381
+
type: 'color:link_hover',
382
+
responsive: true,
383
+
},
384
+
],
385
+
386
+
sidebarBackgroundColor: {
387
+
selector: '[data-sidebar] > aside',
388
+
variable: 'sidebar-background-color',
389
+
type: 'color',
390
+
responsive: true,
391
+
},
392
+
393
+
sidebarBorder: {
394
+
selector: 'aside[data-type="type-2"]',
395
+
variable: 'theme-border',
396
+
type: 'border',
397
+
responsive: true,
398
+
},
399
+
400
+
sidebarDivider: {
401
+
selector: 'aside[data-type="type-3"]',
402
+
variable: 'theme-border',
403
+
type: 'border',
404
+
responsive: true,
405
+
},
406
+
407
+
sidebarWidgetsSpacing: {
408
+
selector: '.ct-sidebar',
409
+
variable: 'sidebar-widgets-spacing',
410
+
responsive: true,
411
+
unit: 'px',
412
+
},
413
+
414
+
sidebarInnerSpacing: {
415
+
selector: '[data-sidebar] > aside',
416
+
variable: 'sidebar-inner-spacing',
417
+
responsive: true,
418
+
unit: 'px',
419
+
},
420
+
421
+
sidebarRadius: {
422
+
selector: 'aside[data-type="type-2"]',
423
+
type: 'spacing',
424
+
variable: 'theme-border-radius',
425
+
responsive: true,
426
+
},
427
+
428
+
sidebarShadow: {
429
+
selector: 'aside[data-type="type-2"]',
430
+
type: 'box-shadow',
431
+
variable: 'theme-box-shadow',
432
+
responsive: true,
433
+
},
434
+
435
+
// To top button
436
+
topButtonSize: {
437
+
selector: '.ct-back-to-top .ct-icon',
438
+
variable: 'theme-icon-size',
439
+
responsive: true,
440
+
unit: 'px',
441
+
},
442
+
443
+
topButtonOffset: {
444
+
selector: '.ct-back-to-top',
445
+
variable: 'back-top-bottom-offset',
446
+
responsive: true,
447
+
unit: 'px',
448
+
},
449
+
450
+
sideButtonOffset: {
451
+
selector: '.ct-back-to-top',
452
+
variable: 'back-top-side-offset',
453
+
responsive: true,
454
+
unit: 'px',
455
+
},
456
+
457
+
topButtonIconColor: [
458
+
{
459
+
selector: '.ct-back-to-top',
460
+
variable: 'theme-icon-color',
461
+
type: 'color:default',
462
+
},
463
+
464
+
{
465
+
selector: '.ct-back-to-top',
466
+
variable: 'theme-icon-hover-color',
467
+
type: 'color:hover',
468
+
},
469
+
],
470
+
471
+
topButtonShapeBackground: [
472
+
{
473
+
selector: '.ct-back-to-top',
474
+
variable: 'top-button-background-color',
475
+
type: 'color:default',
476
+
},
477
+
478
+
{
479
+
selector: '.ct-back-to-top',
480
+
variable: 'top-button-background-hover-color',
481
+
type: 'color:hover',
482
+
},
483
+
],
484
+
485
+
topButtonRadius: {
486
+
selector: '.ct-back-to-top',
487
+
type: 'spacing',
488
+
variable: 'theme-border-radius',
489
+
emptyValue: 2,
490
+
},
491
+
492
+
topButtonShadow: {
493
+
selector: '.ct-back-to-top',
494
+
type: 'box-shadow',
495
+
variable: 'theme-box-shadow',
496
+
responsive: true,
497
+
},
498
+
499
+
// Passepartout
500
+
...makeVariablesWithCondition('has_passepartout', {
501
+
passepartoutSize: {
502
+
selector: ':root',
503
+
variable: 'theme-frame-size',
504
+
responsive: true,
505
+
unit: 'px',
506
+
},
507
+
508
+
passepartoutColor: {
509
+
selector: ':root',
510
+
variable: 'theme-frame-color',
511
+
type: 'color',
512
+
},
513
+
}),
514
+
515
+
// Breadcrumbs
516
+
breadcrumbsFontColor: [
517
+
{
518
+
selector: '.ct-breadcrumbs',
519
+
variable: 'theme-text-color',
520
+
type: 'color:default',
521
+
},
522
+
523
+
{
524
+
selector: '.ct-breadcrumbs',
525
+
variable: 'theme-link-initial-color',
526
+
type: 'color:initial',
527
+
},
528
+
529
+
{
530
+
selector: '.ct-breadcrumbs',
531
+
variable: 'theme-link-hover-color',
532
+
type: 'color:hover',
533
+
},
534
+
],
535
+
536
+
breadcrumbs_home_icon_size: {
537
+
selector: '.ct-breadcrumbs .ct-home-icon',
538
+
variable: 'theme-icon-size',
539
+
responsive: true,
540
+
unit: 'px',
541
+
},
542
+
543
+
breadcrumbs_separator_size: {
544
+
selector: '.ct-breadcrumbs .ct-separator-custom',
545
+
variable: 'theme-icon-size',
546
+
responsive: true,
547
+
unit: 'px',
548
+
},
549
+
},
550
+
}
551
+
552
+
ctEvents.trigger(
553
+
'ct:customizer:sync:collect-variable-descriptors',
554
+
allVariables
555
+
)
556
+
557
+
variablesCache = allVariables.result
558
+
559
+
return variablesCache
560
+
}
561
+
562
+
wp.customize.bind('change', (e) => {
563
+
let allVariables = getAllVariables()
564
+
565
+
if (!allVariables[e.id]) {
566
+
return
567
+
}
568
+
569
+
updateVariableInStyleTags({
570
+
variableDescriptor: allVariables[e.id],
571
+
value: e(),
572
+
})
573
+
})
574
+