@total_onion/onion-library 2.0.33 → 2.0.34
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.
|
@@ -6,14 +6,14 @@ export default function scrollingbannerv3Js(options = {}) {
|
|
|
6
6
|
console.error(error);
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
-
|
|
9
|
+
|
|
10
10
|
const initializedBanners = new WeakMap(); // key = element, value = { animations } //cleaner way
|
|
11
11
|
function scrollingbannerJs(block) {
|
|
12
12
|
if (!block) {
|
|
13
13
|
return;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
const bannerElement = block.querySelector('.scrolling-banner');
|
|
16
|
+
const bannerElement = block.querySelector('.scrolling-banner-v3');
|
|
17
17
|
if (!bannerElement) {
|
|
18
18
|
return;
|
|
19
19
|
}
|
|
@@ -27,7 +27,7 @@ function scrollingbannerJs(block) {
|
|
|
27
27
|
// resize observer instead of resizeDebouncer because the later
|
|
28
28
|
// caused the issue mentionned in MLDB-7
|
|
29
29
|
const wrapper = bannerElement.querySelector(
|
|
30
|
-
'.scrolling-
|
|
30
|
+
'.scrolling-banner-v3__wrapper'
|
|
31
31
|
);
|
|
32
32
|
if (wrapper) {
|
|
33
33
|
if (window.ResizeObserver) {
|
|
@@ -55,12 +55,14 @@ function scrollingbannerJs(block) {
|
|
|
55
55
|
// console.log('bannerInit');
|
|
56
56
|
|
|
57
57
|
const container = bannerElement.querySelector(
|
|
58
|
-
'.scrolling-
|
|
58
|
+
'.scrolling-banner-v3__container'
|
|
59
59
|
);
|
|
60
60
|
const wrapper = bannerElement.querySelector(
|
|
61
|
-
'.scrolling-
|
|
61
|
+
'.scrolling-banner-v3__wrapper'
|
|
62
|
+
);
|
|
63
|
+
const inner = bannerElement.querySelector(
|
|
64
|
+
'.scrolling-banner-v3__inner'
|
|
62
65
|
);
|
|
63
|
-
const inner = bannerElement.querySelector('.scrolling-banner__inner');
|
|
64
66
|
const speed = bannerElement.dataset.speed ?? 5;
|
|
65
67
|
|
|
66
68
|
const wrapperWidth = wrapper.clientWidth;
|
|
@@ -97,7 +99,7 @@ function scrollingbannerJs(block) {
|
|
|
97
99
|
iterations: Infinity
|
|
98
100
|
};
|
|
99
101
|
const containers = bannerElement.querySelectorAll(
|
|
100
|
-
'.scrolling-
|
|
102
|
+
'.scrolling-banner-v3__container'
|
|
101
103
|
);
|
|
102
104
|
|
|
103
105
|
const anim1 = containers[0].animate(animation, timing);
|
|
@@ -118,12 +120,12 @@ function scrollingbannerJs(block) {
|
|
|
118
120
|
|
|
119
121
|
bannerElement
|
|
120
122
|
.querySelectorAll(
|
|
121
|
-
'.scrolling-
|
|
123
|
+
'.scrolling-banner-v3__container.clone, .scrolling-banner-v3__inner.clone'
|
|
122
124
|
)
|
|
123
125
|
.forEach((el) => el.remove());
|
|
124
126
|
|
|
125
127
|
bannerElement
|
|
126
|
-
.querySelector('.scrolling-
|
|
128
|
+
.querySelector('.scrolling-banner-v3__wrapper')
|
|
127
129
|
.removeAttribute('style');
|
|
128
130
|
}
|
|
129
131
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
{% set blockClassName = "scrolling-banner-v3" %}
|
|
2
2
|
{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
|
|
3
|
-
{# {% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %} #}
|
|
4
3
|
{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
|
|
5
4
|
{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
|
|
6
5
|
{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
|
|
@@ -13,9 +12,8 @@
|
|
|
13
12
|
{{sectionStyles}}
|
|
14
13
|
}
|
|
15
14
|
</style>
|
|
16
|
-
<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{
|
|
15
|
+
<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
|
|
17
16
|
|
|
18
|
-
{% set className = 'scrolling-banner' %}
|
|
19
17
|
{% set bannerText = fields.scrolling_banner_text %}
|
|
20
18
|
{% set enableScrolling = fields.enable_scrolling_banner %}
|
|
21
19
|
{% set bannerSpeed = fields.scrolling_banner_speed %}
|
|
@@ -28,23 +26,19 @@
|
|
|
28
26
|
{% set bannerTextStyles = textSizeDesktop ~ textSizePortrait ~ textSizeMobile ~ positioning ~ textColour %}
|
|
29
27
|
|
|
30
28
|
{% if fields.enable_text_shadow %}
|
|
31
|
-
{% set textShadowClassName =
|
|
29
|
+
{% set textShadowClassName = blockClassName ~ "--text-shadow" %}
|
|
32
30
|
{% set textShadowStyle = "--text-shadow-offset-x:" ~ (fields.text_shadow_horizontal_offset|default(0)) ~ "; --text-shadow-offset-y: " ~ (fields.text_shadow_vertical_offset|default(0)) ~ "; --text-shadow-blur: " ~ (fields.text_shadow_blur|default(0)) ~ "; --text-shadow-colour: " ~ (fields.text_shadow_colour|default("#000000")) ~ ";" %}
|
|
33
31
|
{% endif %}
|
|
34
|
-
|
|
35
32
|
{% if enableScrolling %}
|
|
36
|
-
<div class="{{
|
|
37
|
-
<div class="{{
|
|
38
|
-
<div class="{{
|
|
39
|
-
<div class="{{
|
|
40
|
-
<span class="{{
|
|
41
|
-
<span class="{{
|
|
33
|
+
<div class="{{blockClassName}}" data-speed="{{bannerSpeed}}" style="{{bannerTextStyles ~ textShadowStyle}}">
|
|
34
|
+
<div class="{{blockClassName}}__wrapper">
|
|
35
|
+
<div class="{{blockClassName}}__container">
|
|
36
|
+
<div class="{{blockClassName}}__inner">
|
|
37
|
+
<span class="{{blockClassName}}__separator"></span>
|
|
38
|
+
<span class="{{blockClassName}}__text {{textShadowClassName}}">{{bannerText}}</span>
|
|
42
39
|
</div>
|
|
43
40
|
</div>
|
|
44
41
|
</div>
|
|
45
42
|
</div>
|
|
46
43
|
{% endif %}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
{# {{htmlEntryPoint}} #}
|
|
50
44
|
</section>
|