Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/inc/panel-builder/footer/sync.js

Keine Baseline-Datei – Diff nur gegen leer.
Zur Liste
1 -
1 + import { handleBackgroundOptionFor } from '../../../static/js/customizer/sync/variables/background'
2 + import { maybePromoteScalarValueIntoResponsive } from 'customizer-sync-helpers/dist/promote-into-responsive'
3 + import {
4 + withKeys,
5 + handleResponsiveSwitch,
6 + } from '../../../static/js/customizer/sync/helpers'
7 + import ctEvents from 'ct-events'
8 +
9 + import {
10 + getRootSelectorFor,
11 + assembleSelector,
12 + mutateSelector,
13 + } from '../../../static/js/customizer/sync/helpers'
14 +
15 + ctEvents.on(
16 + 'ct:footer:sync:collect-variable-descriptors',
17 + (variableDescriptors) => {
18 + variableDescriptors['global'] = () => ({
19 + ...handleBackgroundOptionFor({
20 + id: 'footerBackground',
21 + selector: assembleSelector(
22 + mutateSelector({
23 + selector: getRootSelectorFor({ panelType: 'footer' }),
24 + operation: 'suffix',
25 + to_add: '.ct-footer',
26 + })
27 + ),
28 + responsive: true,
29 + }),
30 +
31 + footer_spacing: {
32 + selector: assembleSelector(
33 + mutateSelector({
34 + selector: getRootSelectorFor({ panelType: 'footer' }),
35 + operation: 'suffix',
36 + to_add: '.ct-footer',
37 + })
38 + ),
39 + type: 'spacing',
40 + variable: 'footer-container-padding',
41 + responsive: true,
42 + },
43 +
44 + footer_boxed_offset: {
45 + selector: assembleSelector(
46 + mutateSelector({
47 + selector: getRootSelectorFor({ panelType: 'footer' }),
48 + operation: 'suffix',
49 + to_add: 'footer.ct-container',
50 + })
51 + ),
52 + variable: 'footer-container-bottom-offset',
53 + responsive: true,
54 + unit: 'px',
55 + },
56 +
57 + footer_boxed_spacing: {
58 + selector: assembleSelector(
59 + mutateSelector({
60 + selector: getRootSelectorFor({ panelType: 'footer' }),
61 + operation: 'suffix',
62 + to_add: 'footer.ct-container',
63 + })
64 + ),
65 + type: 'spacing',
66 + variable: 'footer-container-padding',
67 + responsive: true,
68 + },
69 +
70 + footer_container_border_radius: {
71 + selector: assembleSelector(
72 + mutateSelector({
73 + selector: getRootSelectorFor({ panelType: 'footer' }),
74 + operation: 'suffix',
75 + to_add: '.ct-container',
76 + })
77 + ),
78 + type: 'spacing',
79 + variable: 'footer-container-border-radius',
80 + responsive: true,
81 + },
82 +
83 + ...withKeys(
84 + ['has_reveal_effect', 'footerShadow'],
85 + [
86 + handleResponsiveSwitch({
87 + selector: assembleSelector(
88 + mutateSelector({
89 + selector: mutateSelector({
90 + selector: getRootSelectorFor({
91 + panelType: 'footer',
92 + }),
93 + operation: 'suffix',
94 + to_add: '.ct-footer',
95 + }),
96 + operation: 'container-suffix',
97 + to_add: '[data-footer*="reveal"]',
98 + })
99 + ),
100 + variable: 'position',
101 + on: 'sticky',
102 + off: 'static',
103 + fullValue: true,
104 + extractValue: ({
105 + has_reveal_effect = {
106 + desktop: false,
107 + tablet: false,
108 + mobile: false,
109 + },
110 + }) => has_reveal_effect,
111 + }),
112 +
113 + {
114 + selector: assembleSelector(
115 + mutateSelector({
116 + selector: mutateSelector({
117 + selector: getRootSelectorFor({
118 + panelType: 'footer',
119 + }),
120 + operation: 'suffix',
121 + to_add: '.site-main',
122 + }),
123 + operation: 'container-suffix',
124 + to_add: '[data-footer*="reveal"]',
125 + })
126 + ),
127 + type: 'box-shadow',
128 + variable: 'footer-box-shadow',
129 + responsive: true,
130 + fullValue: true,
131 + forcedOutput: true,
132 + extractValue: ({
133 + has_reveal_effect = {
134 + desktop: false,
135 + tablet: false,
136 + mobile: false,
137 + },
138 +
139 + footerShadow = {
140 + enable: true,
141 + h_offset: 0,
142 + v_offset: 30,
143 + blur: 50,
144 + spread: 0,
145 + inset: false,
146 + color: { color: 'rgba(0, 0, 0, 0.1)' },
147 + },
148 + }) => {
149 + let value =
150 + maybePromoteScalarValueIntoResponsive(
151 + footerShadow
152 + )
153 +
154 + if (
155 + !has_reveal_effect.desktop &&
156 + !has_reveal_effect.tablet &&
157 + !has_reveal_effect.mobile
158 + ) {
159 + return 'CT_CSS_SKIP_RULE'
160 + }
161 +
162 + if (!has_reveal_effect.desktop) {
163 + value.desktop = 'none'
164 + }
165 +
166 + if (!has_reveal_effect.tablet) {
167 + value.tablet = 'none'
168 + }
169 +
170 + if (!has_reveal_effect.mobile) {
171 + value.mobile = 'none'
172 + }
173 +
174 + return value
175 + },
176 + },
177 + ]
178 + ),
179 + })
180 + }
181 + )
182 +
183 + ctEvents.on('ct:footer:sync:item:global', (changeDescriptor) => {
184 + const footer = document.querySelector('.ct-footer')
185 +
186 + if (changeDescriptor.optionId === 'has_reveal_effect') {
187 + let revealComponents = []
188 +
189 + if (changeDescriptor.optionValue.desktop) {
190 + revealComponents.push('desktop')
191 + }
192 +
193 + if (changeDescriptor.optionValue.tablet) {
194 + revealComponents.push('tablet')
195 + }
196 +
197 + if (changeDescriptor.optionValue.mobile) {
198 + revealComponents.push('mobile')
199 + }
200 +
201 + document.body.dataset.footer.replace(':reveal', '')
202 +
203 + if (revealComponents.length > 0) {
204 + document.body.dataset.footer += ':reveal'
205 + }
206 + }
207 +
208 + if (changeDescriptor.optionId === 'footer_container_structure') {
209 + const rows = footer.querySelectorAll('[data-row] > div')
210 +
211 + rows.forEach((row) => {
212 + row.classList.remove('ct-container-auto')
213 + row.classList.remove('ct-container-fluid')
214 + row.classList.add('ct-container')
215 + })
216 +
217 + if (changeDescriptor.optionValue === 'boxed') {
218 + footer.classList.add('ct-container')
219 +
220 + rows.forEach((row) => {
221 + row.classList.remove('ct-container')
222 + row.classList.add('ct-container-auto')
223 + })
224 + } else {
225 + footer.classList.remove('ct-container')
226 + }
227 +
228 + if (changeDescriptor.optionValue === 'fluid') {
229 + rows.forEach((row) => {
230 + row.classList.remove('ct-container')
231 + row.classList.add('ct-container-fluid')
232 + })
233 + }
234 + }
235 + })
236 +