@total_onion/onion-library 2.0.190 → 2.0.193
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.
|
@@ -63,9 +63,12 @@ export default function carouselmultilayoutv3Js(options = {}) {
|
|
|
63
63
|
Number(dataAttributes.centeractiveslideportrait) === 1;
|
|
64
64
|
const centerActiveSlideMobile =
|
|
65
65
|
Number(dataAttributes.centeractiveslidemobile) === 1;
|
|
66
|
-
const centerSlidesBounds =
|
|
67
|
-
|
|
68
|
-
const
|
|
66
|
+
const centerSlidesBounds =
|
|
67
|
+
Number(dataAttributes.centerslidesbounds) === 1;
|
|
68
|
+
const centerSlidesBoundsPortrait =
|
|
69
|
+
Number(dataAttributes.centerslidesboundsportrait) === 1;
|
|
70
|
+
const centerSlidesBoundsMobile =
|
|
71
|
+
Number(dataAttributes.centerslidesboundsmobile) === 1;
|
|
69
72
|
const centerInsufficientSlidesDesktop =
|
|
70
73
|
Number(dataAttributes.centerinsufficientslidesdesktop) === 1;
|
|
71
74
|
const centerInsufficientSlidesPortrait =
|
|
@@ -197,8 +200,14 @@ export default function carouselmultilayoutv3Js(options = {}) {
|
|
|
197
200
|
loop: totalSlides > 1 ? loopSlides : false
|
|
198
201
|
},
|
|
199
202
|
1440: {
|
|
203
|
+
centeredSlides: centerActiveSlide,
|
|
204
|
+
centerInsufficientSlides:
|
|
205
|
+
centerInsufficientSlidesDesktop,
|
|
206
|
+
centeredSlidesBounds: centerSlidesBounds,
|
|
200
207
|
slidesPerView: slidesDesktopFull,
|
|
201
208
|
spaceBetween: spaceBetweenSlidesDesktopFull,
|
|
209
|
+
slidesOffsetBefore: slidesOffsetDesktopBefore,
|
|
210
|
+
slidesOffsetAfter: slidesOffsetDesktopAfter,
|
|
202
211
|
loop: totalSlides > 1 ? loopSlides : false
|
|
203
212
|
}
|
|
204
213
|
},
|
|
@@ -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
|
}
|