@total_onion/onion-library 2.0.32 → 2.0.33
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.
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import scrollingbannerJs from 'Assets/js/modules/library-modules/scrolling-banner/scrolling-banner';
|
|
2
1
|
export default function scrollingbannerv3Js(options = {}) {
|
|
3
2
|
try {
|
|
4
3
|
const {block} = options;
|
|
@@ -7,3 +6,124 @@ export default function scrollingbannerv3Js(options = {}) {
|
|
|
7
6
|
console.error(error);
|
|
8
7
|
}
|
|
9
8
|
}
|
|
9
|
+
//import {resizeDebouncer} from '@pernod-ricard-global-cms/jsutils';
|
|
10
|
+
const initializedBanners = new WeakMap(); // key = element, value = { animations } //cleaner way
|
|
11
|
+
function scrollingbannerJs(block) {
|
|
12
|
+
if (!block) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const bannerElement = block.querySelector('.scrolling-banner');
|
|
17
|
+
if (!bannerElement) {
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
try {
|
|
22
|
+
// only if it is not already done
|
|
23
|
+
if (!initializedBanners.has(bannerElement)) {
|
|
24
|
+
bannerInit(bannerElement);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// resize observer instead of resizeDebouncer because the later
|
|
28
|
+
// caused the issue mentionned in MLDB-7
|
|
29
|
+
const wrapper = bannerElement.querySelector(
|
|
30
|
+
'.scrolling-banner__wrapper'
|
|
31
|
+
);
|
|
32
|
+
if (wrapper) {
|
|
33
|
+
if (window.ResizeObserver) {
|
|
34
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
35
|
+
resetBanner(bannerElement);
|
|
36
|
+
bannerInit(bannerElement);
|
|
37
|
+
});
|
|
38
|
+
resizeObserver.observe(wrapper);
|
|
39
|
+
} else {
|
|
40
|
+
// Fallback simple
|
|
41
|
+
window.addEventListener('resize', () => {
|
|
42
|
+
resetBanner(bannerElement);
|
|
43
|
+
bannerInit(bannerElement);
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
} catch (error) {
|
|
48
|
+
console.error(error);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
function bannerInit(bannerElement) {
|
|
52
|
+
if (initializedBanners.has(bannerElement)) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
// console.log('bannerInit');
|
|
56
|
+
|
|
57
|
+
const container = bannerElement.querySelector(
|
|
58
|
+
'.scrolling-banner__container'
|
|
59
|
+
);
|
|
60
|
+
const wrapper = bannerElement.querySelector(
|
|
61
|
+
'.scrolling-banner__wrapper'
|
|
62
|
+
);
|
|
63
|
+
const inner = bannerElement.querySelector('.scrolling-banner__inner');
|
|
64
|
+
const speed = bannerElement.dataset.speed ?? 5;
|
|
65
|
+
|
|
66
|
+
const wrapperWidth = wrapper.clientWidth;
|
|
67
|
+
const innerContentWidth = inner.clientWidth;
|
|
68
|
+
const multiplier = Number(Math.round(wrapperWidth / innerContentWidth));
|
|
69
|
+
|
|
70
|
+
for (let index = 0; index < multiplier; index++) {
|
|
71
|
+
const newInner = inner.cloneNode(true);
|
|
72
|
+
newInner.classList.add('clone');
|
|
73
|
+
container.appendChild(newInner);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
const containerHeight = inner.clientHeight;
|
|
77
|
+
wrapper.setAttribute('style', `min-height: ${containerHeight}px`);
|
|
78
|
+
|
|
79
|
+
const newTickerContainer = container.cloneNode(true);
|
|
80
|
+
newTickerContainer.classList.add('clone');
|
|
81
|
+
wrapper.appendChild(newTickerContainer);
|
|
82
|
+
|
|
83
|
+
const animation = [
|
|
84
|
+
{transform: `translateX(0%)`},
|
|
85
|
+
{transform: `translateX(-200%)`}
|
|
86
|
+
];
|
|
87
|
+
|
|
88
|
+
const time = 100000 / speed;
|
|
89
|
+
|
|
90
|
+
let timing = {
|
|
91
|
+
duration: time,
|
|
92
|
+
iterations: Infinity
|
|
93
|
+
};
|
|
94
|
+
let timing2 = {
|
|
95
|
+
duration: time,
|
|
96
|
+
delay: time / 2,
|
|
97
|
+
iterations: Infinity
|
|
98
|
+
};
|
|
99
|
+
const containers = bannerElement.querySelectorAll(
|
|
100
|
+
'.scrolling-banner__container'
|
|
101
|
+
);
|
|
102
|
+
|
|
103
|
+
const anim1 = containers[0].animate(animation, timing);
|
|
104
|
+
const anim2 = containers[1].animate(animation, timing2);
|
|
105
|
+
|
|
106
|
+
// set as initialized and store animation for a possible cleanup
|
|
107
|
+
initializedBanners.set(bannerElement, {anim1, anim2});
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
function resetBanner(bannerElement) {
|
|
111
|
+
// if already initialized, anims get reset
|
|
112
|
+
const data = initializedBanners.get(bannerElement);
|
|
113
|
+
if (data) {
|
|
114
|
+
data.anim1?.cancel();
|
|
115
|
+
data.anim2?.cancel();
|
|
116
|
+
initializedBanners.delete(bannerElement);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
bannerElement
|
|
120
|
+
.querySelectorAll(
|
|
121
|
+
'.scrolling-banner__container.clone, .scrolling-banner__inner.clone'
|
|
122
|
+
)
|
|
123
|
+
.forEach((el) => el.remove());
|
|
124
|
+
|
|
125
|
+
bannerElement
|
|
126
|
+
.querySelector('.scrolling-banner__wrapper')
|
|
127
|
+
.removeAttribute('style');
|
|
128
|
+
}
|
|
129
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
@use '
|
|
2
|
-
@use '
|
|
3
|
-
@use '
|
|
1
|
+
@use '../fields-core-functions-v3/core-functions-v3';
|
|
2
|
+
@use '../fields-core-mixins-v3/core-mixins-v3';
|
|
3
|
+
@use '../../breakpoints';
|
|
4
4
|
|
|
5
5
|
.scrolling-banner-v3 {
|
|
6
6
|
position: relative;
|
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
text-transform: uppercase;
|
|
15
15
|
height: auto;
|
|
16
16
|
z-index: 99;
|
|
17
|
-
grid-area: main;
|
|
18
17
|
place-self: var(--position);
|
|
19
18
|
|
|
20
19
|
&__wrapper {
|