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

Keine Baseline-Datei – Diff nur gegen leer.
Baseline Vorherige Version
Zur Liste
1 -
1 + import ctEvents from 'ct-events'
2 + import { handleResponsiveSwitch } from '../../../../static/js/customizer/sync/helpers'
3 + import { updateAndSaveEl } from '../../../../static/js/customizer/sync'
4 + import {
5 + responsiveClassesFor,
6 + getRootSelectorFor,
7 + assembleSelector,
8 + mutateSelector,
9 + } from '../../../../static/js/customizer/sync/helpers'
10 + import { typographyOption } from '../../../../static/js/customizer/sync/variables/typography'
11 +
12 + ctEvents.on(
13 + 'ct:header:sync:collect-variable-descriptors',
14 + (variableDescriptors) => {
15 + variableDescriptors['socials'] = ({ itemId }) => ({
16 + socialsIconSize: {
17 + selector: assembleSelector(getRootSelectorFor({ itemId })),
18 + variable: 'theme-icon-size',
19 + responsive: true,
20 + unit: 'px',
21 + },
22 +
23 + socialsIconSpacing: {
24 + selector: assembleSelector(getRootSelectorFor({ itemId })),
25 + variable: 'items-spacing',
26 + responsive: true,
27 + unit: 'px',
28 + },
29 +
30 + headerSocialsMargin: {
31 + selector: assembleSelector(getRootSelectorFor({ itemId })),
32 + type: 'spacing',
33 + variable: 'margin',
34 + responsive: true,
35 + important: true,
36 + },
37 +
38 + ...typographyOption({
39 + id: 'socials_label_font',
40 +
41 + selector: assembleSelector(
42 + mutateSelector({
43 + selector: getRootSelectorFor({ itemId }),
44 + operation: 'suffix',
45 + to_add: '.ct-label',
46 + })
47 + ),
48 + }),
49 +
50 + // default state
51 + header_socials_font_color: [
52 + {
53 + selector: assembleSelector(
54 + mutateSelector({
55 + selector: getRootSelectorFor({ itemId }),
56 + operation: 'suffix',
57 + to_add: 'a',
58 + })
59 + ),
60 + variable: 'theme-link-initial-color',
61 + type: 'color:default',
62 + responsive: true,
63 + },
64 +
65 + {
66 + selector: assembleSelector(
67 + mutateSelector({
68 + selector: getRootSelectorFor({ itemId }),
69 + operation: 'suffix',
70 + to_add: 'a',
71 + })
72 + ),
73 + variable: 'theme-link-hover-color',
74 + type: 'color:hover',
75 + responsive: true,
76 + },
77 + ],
78 +
79 + headerSocialsIconColor: [
80 + {
81 + selector: assembleSelector(
82 + mutateSelector({
83 + selector: getRootSelectorFor({ itemId }),
84 + operation: 'suffix',
85 + to_add: '[data-color="custom"]',
86 + })
87 + ),
88 + variable: 'theme-icon-color',
89 + type: 'color:default',
90 + responsive: true,
91 + },
92 +
93 + {
94 + selector: assembleSelector(
95 + mutateSelector({
96 + selector: getRootSelectorFor({ itemId }),
97 + operation: 'suffix',
98 + to_add: '[data-color="custom"]',
99 + })
100 + ),
101 + variable: 'theme-icon-hover-color',
102 + type: 'color:hover',
103 + responsive: true,
104 + },
105 + ],
106 +
107 + headerSocialsIconBackground: [
108 + {
109 + selector: assembleSelector(
110 + mutateSelector({
111 + selector: getRootSelectorFor({ itemId }),
112 + operation: 'suffix',
113 + to_add: '[data-color="custom"]',
114 + })
115 + ),
116 + variable: 'background-color',
117 + type: 'color:default',
118 + responsive: true,
119 + },
120 +
121 + {
122 + selector: assembleSelector(
123 + mutateSelector({
124 + selector: getRootSelectorFor({ itemId }),
125 + operation: 'suffix',
126 + to_add: '[data-color="custom"]',
127 + })
128 + ),
129 + variable: 'background-hover-color',
130 + type: 'color:hover',
131 + responsive: true,
132 + },
133 + ],
134 +
135 + // transparent state
136 + transparent_header_socials_font_color: [
137 + {
138 + selector: assembleSelector(
139 + mutateSelector({
140 + selector: mutateSelector({
141 + selector: getRootSelectorFor({ itemId }),
142 + operation: 'suffix',
143 + to_add: 'a',
144 + }),
145 +
146 + operation: 'between',
147 + to_add: '[data-transparent-row="yes"]',
148 + })
149 + ),
150 + variable: 'theme-link-initial-color',
151 + type: 'color:default',
152 + responsive: true,
153 + },
154 +
155 + {
156 + selector: assembleSelector(
157 + mutateSelector({
158 + selector: mutateSelector({
159 + selector: getRootSelectorFor({ itemId }),
160 + operation: 'suffix',
161 + to_add: 'a',
162 + }),
163 +
164 + operation: 'between',
165 + to_add: '[data-transparent-row="yes"]',
166 + })
167 + ),
168 + variable: 'theme-link-hover-color',
169 + type: 'color:hover',
170 + responsive: true,
171 + },
172 + ],
173 +
174 + transparentHeaderSocialsIconColor: [
175 + {
176 + selector: assembleSelector(
177 + mutateSelector({
178 + selector: mutateSelector({
179 + selector: getRootSelectorFor({ itemId }),
180 + operation: 'suffix',
181 + to_add: '[data-color="custom"]',
182 + }),
183 +
184 + operation: 'between',
185 + to_add: '[data-transparent-row="yes"]',
186 + })
187 + ),
188 +
189 + variable: 'theme-icon-color',
190 + type: 'color:default',
191 + responsive: true,
192 + },
193 +
194 + {
195 + selector: assembleSelector(
196 + mutateSelector({
197 + selector: mutateSelector({
198 + selector: getRootSelectorFor({ itemId }),
199 + operation: 'suffix',
200 + to_add: '[data-color="custom"]',
201 + }),
202 +
203 + operation: 'between',
204 + to_add: '[data-transparent-row="yes"]',
205 + })
206 + ),
207 +
208 + variable: 'theme-icon-hover-color',
209 + type: 'color:hover',
210 + responsive: true,
211 + },
212 + ],
213 +
214 + transparentHeaderSocialsIconBackground: [
215 + {
216 + selector: assembleSelector(
217 + mutateSelector({
218 + selector: mutateSelector({
219 + selector: getRootSelectorFor({ itemId }),
220 + operation: 'suffix',
221 + to_add: '[data-color="custom"]',
222 + }),
223 +
224 + operation: 'between',
225 + to_add: '[data-transparent-row="yes"]',
226 + })
227 + ),
228 +
229 + variable: 'background-color',
230 + type: 'color:default',
231 + responsive: true,
232 + },
233 +
234 + {
235 + selector: assembleSelector(
236 + mutateSelector({
237 + selector: mutateSelector({
238 + selector: getRootSelectorFor({ itemId }),
239 + operation: 'suffix',
240 + to_add: '[data-color="custom"]',
241 + }),
242 +
243 + operation: 'between',
244 + to_add: '[data-transparent-row="yes"]',
245 + })
246 + ),
247 +
248 + variable: 'background-hover-color',
249 + type: 'color:hover',
250 + responsive: true,
251 + },
252 + ],
253 +
254 + // sticky state
255 + sticky_header_socials_font_color: [
256 + {
257 + selector: assembleSelector(
258 + mutateSelector({
259 + selector: mutateSelector({
260 + selector: getRootSelectorFor({ itemId }),
261 + operation: 'suffix',
262 + to_add: 'a',
263 + }),
264 +
265 + operation: 'between',
266 + to_add: '[data-sticky*="yes"]',
267 + })
268 + ),
269 + variable: 'theme-link-initial-color',
270 + type: 'color:default',
271 + responsive: true,
272 + },
273 +
274 + {
275 + selector: assembleSelector(
276 + mutateSelector({
277 + selector: mutateSelector({
278 + selector: getRootSelectorFor({ itemId }),
279 + operation: 'suffix',
280 + to_add: 'a',
281 + }),
282 +
283 + operation: 'between',
284 + to_add: '[data-sticky*="yes"]',
285 + })
286 + ),
287 + variable: 'theme-link-hover-color',
288 + type: 'color:hover',
289 + responsive: true,
290 + },
291 + ],
292 +
293 + stickyHeaderSocialsIconColor: [
294 + {
295 + selector: assembleSelector(
296 + mutateSelector({
297 + selector: mutateSelector({
298 + selector: getRootSelectorFor({ itemId }),
299 + operation: 'suffix',
300 + to_add: '[data-color="custom"]',
301 + }),
302 +
303 + operation: 'between',
304 + to_add: '[data-sticky*="yes"]',
305 + })
306 + ),
307 + variable: 'theme-icon-color',
308 + type: 'color:default',
309 + responsive: true,
310 + },
311 +
312 + {
313 + selector: assembleSelector(
314 + mutateSelector({
315 + selector: mutateSelector({
316 + selector: getRootSelectorFor({ itemId }),
317 + operation: 'suffix',
318 + to_add: '[data-color="custom"]',
319 + }),
320 +
321 + operation: 'between',
322 + to_add: '[data-sticky*="yes"]',
323 + })
324 + ),
325 + variable: 'theme-icon-hover-color',
326 + type: 'color:hover',
327 + responsive: true,
328 + },
329 + ],
330 +
331 + stickyHeaderSocialsIconBackground: [
332 + {
333 + selector: assembleSelector(
334 + mutateSelector({
335 + selector: mutateSelector({
336 + selector: getRootSelectorFor({ itemId }),
337 + operation: 'suffix',
338 + to_add: '[data-color="custom"]',
339 + }),
340 +
341 + operation: 'between',
342 + to_add: '[data-sticky*="yes"]',
343 + })
344 + ),
345 + variable: 'background-color',
346 + type: 'color:default',
347 + responsive: true,
348 + },
349 +
350 + {
351 + selector: assembleSelector(
352 + mutateSelector({
353 + selector: mutateSelector({
354 + selector: getRootSelectorFor({ itemId }),
355 + operation: 'suffix',
356 + to_add: '[data-color="custom"]',
357 + }),
358 +
359 + operation: 'between',
360 + to_add: '[data-sticky*="yes"]',
361 + })
362 + ),
363 + variable: 'background-hover-color',
364 + type: 'color:hover',
365 + responsive: true,
366 + },
367 + ],
368 + })
369 + }
370 + )
371 +
372 + ctEvents.on(
373 + 'ct:header:sync:item:socials',
374 + ({ itemId, optionId, optionValue, values }) => {
375 + const selector = `[data-id="${itemId}"]`
376 +
377 + if (optionId === 'socialsType' || optionId === 'socialsFillType') {
378 + updateAndSaveEl(selector, (el) => {
379 + const box = el.querySelector('.ct-social-box')
380 +
381 + box.dataset.iconsType = `${values.socialsType}${
382 + values.socialsType === 'simple'
383 + ? ''
384 + : `:${values.socialsFillType || 'solid'}`
385 + }`
386 + })
387 + }
388 +
389 + if (optionId === 'socialsIconSize') {
390 + updateAndSaveEl(
391 + selector,
392 + (el) =>
393 + (el.querySelector('.ct-social-box').dataset.size =
394 + values.socialsIconSize)
395 + )
396 + }
397 +
398 + if (optionId === 'socialsLabelVisibility') {
399 + updateAndSaveEl(selector, (el) => {
400 + ;[...el.querySelectorAll('.ct-label')].map((label) => {
401 + responsiveClassesFor(optionValue, label)
402 + })
403 + })
404 + }
405 +
406 + if (optionId === 'visibility') {
407 + updateAndSaveEl(selector, (el) =>
408 + responsiveClassesFor({ ...optionValue, desktop: true }, el)
409 + )
410 + }
411 + }
412 + )
413 +