@total_onion/onion-library 2.0.189 → 2.0.192
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -23,7 +23,7 @@ function scrollingbannerJs(block) {
|
|
|
23
23
|
|
|
24
24
|
try {
|
|
25
25
|
if (!initializedBanners.has(bannerElement)) {
|
|
26
|
-
bannerInit(bannerElement);
|
|
26
|
+
bannerInit(bannerElement, initializedBanners, block);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
const wrapper = bannerElement.querySelector(
|
|
@@ -32,115 +32,110 @@ function scrollingbannerJs(block) {
|
|
|
32
32
|
|
|
33
33
|
if (window.ResizeObserver) {
|
|
34
34
|
const resizeObserver = new ResizeObserver(() => {
|
|
35
|
-
resetBanner(bannerElement);
|
|
36
|
-
bannerInit(bannerElement);
|
|
35
|
+
resetBanner(bannerElement, initializedBanners);
|
|
36
|
+
bannerInit(bannerElement, initializedBanners, block);
|
|
37
37
|
});
|
|
38
38
|
resizeObserver.observe(wrapper);
|
|
39
39
|
} else {
|
|
40
40
|
window.addEventListener('resize', () => {
|
|
41
|
-
resetBanner(bannerElement);
|
|
42
|
-
bannerInit(bannerElement);
|
|
41
|
+
resetBanner(bannerElement, initializedBanners);
|
|
42
|
+
bannerInit(bannerElement, initializedBanners, block);
|
|
43
43
|
});
|
|
44
44
|
}
|
|
45
45
|
} catch (error) {
|
|
46
46
|
console.error(error);
|
|
47
47
|
}
|
|
48
|
+
}
|
|
49
|
+
function bannerInit(bannerElement, initializedBanners, block) {
|
|
50
|
+
if (initializedBanners.has(bannerElement)) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
48
53
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const multiplier = Number(Math.round(wrapperWidth / innerContentWidth));
|
|
68
|
-
|
|
69
|
-
for (let index = 0; index < multiplier; index++) {
|
|
70
|
-
const newInner = inner.cloneNode(true);
|
|
71
|
-
newInner.classList.add('clone');
|
|
72
|
-
container.appendChild(newInner);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
const containerHeight = inner.clientHeight;
|
|
76
|
-
wrapper.setAttribute('style', `min-height: ${containerHeight}px`);
|
|
77
|
-
|
|
78
|
-
const newTickerContainer = container.cloneNode(true);
|
|
79
|
-
newTickerContainer.classList.add('clone');
|
|
80
|
-
wrapper.appendChild(newTickerContainer);
|
|
81
|
-
|
|
82
|
-
const animation1 = [
|
|
83
|
-
{transform: 'translateX(0%)'},
|
|
84
|
-
{transform: 'translateX(-100%)'}
|
|
85
|
-
];
|
|
86
|
-
const animation2 = [
|
|
87
|
-
{transform: 'translateX(100%)'},
|
|
88
|
-
{transform: 'translateX(0%)'}
|
|
89
|
-
];
|
|
90
|
-
|
|
91
|
-
const bannerLength = Math.floor(
|
|
92
|
-
container.getBoundingClientRect().width
|
|
93
|
-
);
|
|
94
|
-
const singleBannerCycleTime = (bannerLength * 100) / speed;
|
|
95
|
-
|
|
96
|
-
let timing = {
|
|
97
|
-
duration: singleBannerCycleTime,
|
|
98
|
-
iterations: Infinity,
|
|
99
|
-
fill: 'both'
|
|
100
|
-
};
|
|
101
|
-
let timing2 = timing;
|
|
102
|
-
const containers = bannerElement.querySelectorAll(
|
|
103
|
-
'.scrolling-banner-v3__container'
|
|
104
|
-
);
|
|
105
|
-
|
|
106
|
-
containers[0].style.transform = 'translateX(0%)';
|
|
107
|
-
containers[1].style.transform = 'translateX(100%)';
|
|
108
|
-
containers[0].offsetWidth;
|
|
109
|
-
|
|
110
|
-
const anim1 = containers[0].animate(animation1, timing);
|
|
111
|
-
const anim2 = containers[1].animate(animation2, timing2);
|
|
54
|
+
const container = bannerElement.querySelector(
|
|
55
|
+
'.scrolling-banner-v3__container'
|
|
56
|
+
);
|
|
57
|
+
const wrapper = bannerElement.querySelector(
|
|
58
|
+
'.scrolling-banner-v3__wrapper'
|
|
59
|
+
);
|
|
60
|
+
const inner = bannerElement.querySelector('.scrolling-banner-v3__inner');
|
|
61
|
+
const speed = bannerElement.dataset.speed ?? 3;
|
|
62
|
+
|
|
63
|
+
const wrapperWidth = wrapper.clientWidth;
|
|
64
|
+
const innerContentWidth = inner.clientWidth;
|
|
65
|
+
const multiplier = Number(Math.round(wrapperWidth / innerContentWidth));
|
|
66
|
+
|
|
67
|
+
for (let index = 0; index < multiplier; index++) {
|
|
68
|
+
const newInner = inner.cloneNode(true);
|
|
69
|
+
newInner.classList.add('clone');
|
|
70
|
+
container.appendChild(newInner);
|
|
71
|
+
}
|
|
112
72
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
}
|
|
73
|
+
const containerHeight = inner.clientHeight;
|
|
74
|
+
wrapper.setAttribute('style', `min-height: ${containerHeight}px`);
|
|
75
|
+
|
|
76
|
+
const newTickerContainer = container.cloneNode(true);
|
|
77
|
+
newTickerContainer.classList.add('clone');
|
|
78
|
+
wrapper.appendChild(newTickerContainer);
|
|
79
|
+
|
|
80
|
+
const animation1 = [
|
|
81
|
+
{transform: 'translateX(0%)'},
|
|
82
|
+
{transform: 'translateX(-100%)'}
|
|
83
|
+
];
|
|
84
|
+
const animation2 = [
|
|
85
|
+
{transform: 'translateX(100%)'},
|
|
86
|
+
{transform: 'translateX(0%)'}
|
|
87
|
+
];
|
|
88
|
+
|
|
89
|
+
const bannerLength = Math.floor(container.getBoundingClientRect().width);
|
|
90
|
+
const singleBannerCycleTime = (bannerLength * 100) / speed;
|
|
91
|
+
|
|
92
|
+
let timing = {
|
|
93
|
+
duration: singleBannerCycleTime,
|
|
94
|
+
iterations: Infinity,
|
|
95
|
+
fill: 'both'
|
|
96
|
+
};
|
|
97
|
+
let timing2 = timing;
|
|
98
|
+
const containers = bannerElement.querySelectorAll(
|
|
99
|
+
'.scrolling-banner-v3__container'
|
|
100
|
+
);
|
|
101
|
+
|
|
102
|
+
containers[0].style.transform = 'translateX(0%)';
|
|
103
|
+
containers[1].style.transform = 'translateX(100%)';
|
|
104
|
+
containers[0].offsetWidth;
|
|
105
|
+
|
|
106
|
+
const anim1 = containers[0].animate(animation1, timing);
|
|
107
|
+
const anim2 = containers[1].animate(animation2, timing2);
|
|
108
|
+
|
|
109
|
+
initializedBanners.set(bannerElement, {anim1, anim2});
|
|
110
|
+
function pauseAnimations() {
|
|
111
|
+
anim1.pause();
|
|
112
|
+
anim2.pause();
|
|
113
|
+
}
|
|
114
|
+
function resumeAnimations() {
|
|
115
|
+
anim1.play();
|
|
116
|
+
anim2.play();
|
|
126
117
|
}
|
|
118
|
+
if (bannerElement.querySelector('a')) {
|
|
119
|
+
block.addEventListener('mouseover', pauseAnimations);
|
|
120
|
+
block.addEventListener('mouseleave', resumeAnimations);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
127
123
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
124
|
+
function resetBanner(bannerElement, initializedBanners) {
|
|
125
|
+
const data = initializedBanners.get(bannerElement);
|
|
126
|
+
if (data) {
|
|
127
|
+
data.anim1?.cancel();
|
|
128
|
+
data.anim2?.cancel();
|
|
129
|
+
initializedBanners.delete(bannerElement);
|
|
130
|
+
}
|
|
135
131
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
132
|
+
bannerElement
|
|
133
|
+
.querySelectorAll(
|
|
134
|
+
'.scrolling-banner-v3__container.clone, .scrolling-banner-v3__inner.clone'
|
|
135
|
+
)
|
|
136
|
+
.forEach((el) => el.remove());
|
|
141
137
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
}
|
|
138
|
+
bannerElement
|
|
139
|
+
.querySelector('.scrolling-banner-v3__wrapper')
|
|
140
|
+
.removeAttribute('style');
|
|
146
141
|
}
|
|
@@ -401,6 +401,29 @@
|
|
|
401
401
|
"button_label": "Add Row",
|
|
402
402
|
"rows_per_page": 20,
|
|
403
403
|
"sub_fields": [
|
|
404
|
+
{
|
|
405
|
+
"key": "field_6957f5abf3029",
|
|
406
|
+
"label": "Instruction Label",
|
|
407
|
+
"name": "instruction_label",
|
|
408
|
+
"aria-label": "",
|
|
409
|
+
"type": "text",
|
|
410
|
+
"instructions": "",
|
|
411
|
+
"required": 0,
|
|
412
|
+
"conditional_logic": 0,
|
|
413
|
+
"wrapper": {
|
|
414
|
+
"width": "30",
|
|
415
|
+
"class": "",
|
|
416
|
+
"id": ""
|
|
417
|
+
},
|
|
418
|
+
"wpml_cf_preferences": 0,
|
|
419
|
+
"default_value": "",
|
|
420
|
+
"maxlength": "",
|
|
421
|
+
"allow_in_bindings": 0,
|
|
422
|
+
"placeholder": "",
|
|
423
|
+
"prepend": "",
|
|
424
|
+
"append": "",
|
|
425
|
+
"parent_repeater": "field_68ffeea1ee9f4"
|
|
426
|
+
},
|
|
404
427
|
{
|
|
405
428
|
"key": "field_68ffeec3ee9f5",
|
|
406
429
|
"label": "Instruction",
|
|
@@ -411,13 +434,14 @@
|
|
|
411
434
|
"required": 0,
|
|
412
435
|
"conditional_logic": 0,
|
|
413
436
|
"wrapper": {
|
|
414
|
-
"width": "",
|
|
437
|
+
"width": "70",
|
|
415
438
|
"class": "",
|
|
416
439
|
"id": ""
|
|
417
440
|
},
|
|
418
441
|
"wpml_cf_preferences": 2,
|
|
419
442
|
"default_value": "",
|
|
420
443
|
"maxlength": "",
|
|
444
|
+
"allow_in_bindings": 1,
|
|
421
445
|
"placeholder": "",
|
|
422
446
|
"prepend": "",
|
|
423
447
|
"append": "",
|
|
@@ -459,7 +483,7 @@
|
|
|
459
483
|
"class": "",
|
|
460
484
|
"id": ""
|
|
461
485
|
},
|
|
462
|
-
"wpml_cf_preferences":
|
|
486
|
+
"wpml_cf_preferences": 3,
|
|
463
487
|
"post_type": [
|
|
464
488
|
"product"
|
|
465
489
|
],
|
|
@@ -571,5 +595,5 @@
|
|
|
571
595
|
"acfe_display_title": "",
|
|
572
596
|
"acfe_meta": "",
|
|
573
597
|
"acfe_note": "",
|
|
574
|
-
"modified":
|
|
598
|
+
"modified": 1767372238
|
|
575
599
|
}
|