@total_onion/onion-library 2.0.186 → 2.0.188
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.
- package/components/block-scrolling-banner-v3/group_68e67fca1ec80.json +59 -62
- package/components/block-scrolling-banner-v3/scrolling-banner-v3.js +34 -27
- package/components/block-scrolling-banner-v3/scrolling-banner-v3.scss +83 -76
- package/components/block-scrolling-banner-v3/scrolling-banner-v3.twig +12 -11
- package/package.json +1 -1
|
@@ -47,10 +47,10 @@
|
|
|
47
47
|
},
|
|
48
48
|
{
|
|
49
49
|
"key": "field_62647331056f3",
|
|
50
|
-
"label": "Scrolling Banner
|
|
51
|
-
"name": "
|
|
50
|
+
"label": "Scrolling Banner Texts",
|
|
51
|
+
"name": "scrolling_banner_texts",
|
|
52
52
|
"aria-label": "",
|
|
53
|
-
"type": "
|
|
53
|
+
"type": "repeater",
|
|
54
54
|
"instructions": "",
|
|
55
55
|
"required": 0,
|
|
56
56
|
"conditional_logic": 0,
|
|
@@ -59,59 +59,57 @@
|
|
|
59
59
|
"class": "",
|
|
60
60
|
"id": ""
|
|
61
61
|
},
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
"
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
"acfe_clone_modal_button": "",
|
|
114
|
-
"acfe_clone_modal_size": "large"
|
|
62
|
+
"acfe_repeater_stylised_button": 1,
|
|
63
|
+
"layout": "table",
|
|
64
|
+
"pagination": 0,
|
|
65
|
+
"min": 0,
|
|
66
|
+
"max": 0,
|
|
67
|
+
"collapsed": "",
|
|
68
|
+
"button_label": "Add Row",
|
|
69
|
+
"rows_per_page": 20,
|
|
70
|
+
"sub_fields": [
|
|
71
|
+
{
|
|
72
|
+
"key": "field_6957b235612c0",
|
|
73
|
+
"label": "Scrolling banner text",
|
|
74
|
+
"name": "scrolling_banner_text",
|
|
75
|
+
"aria-label": "",
|
|
76
|
+
"type": "textarea",
|
|
77
|
+
"instructions": "",
|
|
78
|
+
"required": 0,
|
|
79
|
+
"conditional_logic": 0,
|
|
80
|
+
"wrapper": {
|
|
81
|
+
"width": "",
|
|
82
|
+
"class": "",
|
|
83
|
+
"id": ""
|
|
84
|
+
},
|
|
85
|
+
"default_value": "",
|
|
86
|
+
"acfe_textarea_code": 0,
|
|
87
|
+
"maxlength": "",
|
|
88
|
+
"allow_in_bindings": 0,
|
|
89
|
+
"rows": 3,
|
|
90
|
+
"placeholder": "",
|
|
91
|
+
"new_lines": "",
|
|
92
|
+
"parent_repeater": "field_62647331056f3"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"key": "field_6957b50ba192a",
|
|
96
|
+
"label": "Text link",
|
|
97
|
+
"name": "text_link",
|
|
98
|
+
"aria-label": "",
|
|
99
|
+
"type": "link",
|
|
100
|
+
"instructions": "",
|
|
101
|
+
"required": 0,
|
|
102
|
+
"conditional_logic": 0,
|
|
103
|
+
"wrapper": {
|
|
104
|
+
"width": "",
|
|
105
|
+
"class": "",
|
|
106
|
+
"id": ""
|
|
107
|
+
},
|
|
108
|
+
"return_format": "array",
|
|
109
|
+
"allow_in_bindings": 0,
|
|
110
|
+
"parent_repeater": "field_62647331056f3"
|
|
111
|
+
}
|
|
112
|
+
]
|
|
115
113
|
},
|
|
116
114
|
{
|
|
117
115
|
"key": "field_62647361727b8",
|
|
@@ -127,12 +125,11 @@
|
|
|
127
125
|
"class": "",
|
|
128
126
|
"id": ""
|
|
129
127
|
},
|
|
130
|
-
"wpml_cf_preferences": 3,
|
|
131
|
-
"user_roles": ["all"],
|
|
132
128
|
"default_value": 5,
|
|
133
|
-
"min":
|
|
134
|
-
"max":
|
|
135
|
-
"
|
|
129
|
+
"min": 1,
|
|
130
|
+
"max": 25,
|
|
131
|
+
"allow_in_bindings": 1,
|
|
132
|
+
"step": 1,
|
|
136
133
|
"prepend": "",
|
|
137
134
|
"append": ""
|
|
138
135
|
},
|
|
@@ -500,5 +497,5 @@
|
|
|
500
497
|
"acfe_display_title": "",
|
|
501
498
|
"acfe_meta": "",
|
|
502
499
|
"acfe_note": "",
|
|
503
|
-
"modified":
|
|
500
|
+
"modified": 1767368506
|
|
504
501
|
}
|
|
@@ -7,42 +7,40 @@ export default function scrollingbannerv3Js(options = {}) {
|
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
const initializedBanners = new WeakMap(); // key = element, value = { animations } //cleaner way
|
|
11
10
|
function scrollingbannerJs(block) {
|
|
12
11
|
if (!block) {
|
|
13
12
|
return;
|
|
14
13
|
}
|
|
15
14
|
|
|
16
|
-
const bannerElement =
|
|
15
|
+
const bannerElement =
|
|
16
|
+
block.querySelector('.scrolling-banner-v3__banner-container') ??
|
|
17
|
+
block.querySelector('.scrolling-banner-v3');
|
|
18
|
+
|
|
17
19
|
if (!bannerElement) {
|
|
18
20
|
return;
|
|
19
21
|
}
|
|
22
|
+
const initializedBanners = new WeakMap();
|
|
20
23
|
|
|
21
24
|
try {
|
|
22
|
-
// only if it is not already done
|
|
23
25
|
if (!initializedBanners.has(bannerElement)) {
|
|
24
26
|
bannerInit(bannerElement);
|
|
25
27
|
}
|
|
26
28
|
|
|
27
|
-
// resize observer instead of resizeDebouncer because the later
|
|
28
|
-
// caused the issue mentionned in MLDB-7
|
|
29
29
|
const wrapper = bannerElement.querySelector(
|
|
30
30
|
'.scrolling-banner-v3__wrapper'
|
|
31
31
|
);
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
});
|
|
45
|
-
}
|
|
32
|
+
|
|
33
|
+
if (window.ResizeObserver) {
|
|
34
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
35
|
+
resetBanner(bannerElement);
|
|
36
|
+
bannerInit(bannerElement);
|
|
37
|
+
});
|
|
38
|
+
resizeObserver.observe(wrapper);
|
|
39
|
+
} else {
|
|
40
|
+
window.addEventListener('resize', () => {
|
|
41
|
+
resetBanner(bannerElement);
|
|
42
|
+
bannerInit(bannerElement);
|
|
43
|
+
});
|
|
46
44
|
}
|
|
47
45
|
} catch (error) {
|
|
48
46
|
console.error(error);
|
|
@@ -52,7 +50,6 @@ function scrollingbannerJs(block) {
|
|
|
52
50
|
if (initializedBanners.has(bannerElement)) {
|
|
53
51
|
return;
|
|
54
52
|
}
|
|
55
|
-
// console.log('bannerInit');
|
|
56
53
|
|
|
57
54
|
const container = bannerElement.querySelector(
|
|
58
55
|
'.scrolling-banner-v3__container'
|
|
@@ -91,10 +88,13 @@ function scrollingbannerJs(block) {
|
|
|
91
88
|
{transform: 'translateX(0%)'}
|
|
92
89
|
];
|
|
93
90
|
|
|
94
|
-
const
|
|
91
|
+
const bannerLength = Math.floor(
|
|
92
|
+
container.getBoundingClientRect().width
|
|
93
|
+
);
|
|
94
|
+
const singleBannerCycleTime = (bannerLength * 100) / speed;
|
|
95
95
|
|
|
96
96
|
let timing = {
|
|
97
|
-
duration:
|
|
97
|
+
duration: singleBannerCycleTime,
|
|
98
98
|
iterations: Infinity,
|
|
99
99
|
fill: 'both'
|
|
100
100
|
};
|
|
@@ -102,21 +102,28 @@ function scrollingbannerJs(block) {
|
|
|
102
102
|
const containers = bannerElement.querySelectorAll(
|
|
103
103
|
'.scrolling-banner-v3__container'
|
|
104
104
|
);
|
|
105
|
-
|
|
105
|
+
|
|
106
106
|
containers[0].style.transform = 'translateX(0%)';
|
|
107
107
|
containers[1].style.transform = 'translateX(100%)';
|
|
108
|
-
|
|
109
|
-
void containers[0].offsetWidth;
|
|
108
|
+
containers[0].offsetWidth;
|
|
110
109
|
|
|
111
110
|
const anim1 = containers[0].animate(animation1, timing);
|
|
112
111
|
const anim2 = containers[1].animate(animation2, timing2);
|
|
113
112
|
|
|
114
|
-
// set as initialized and store animation for a possible cleanup
|
|
115
113
|
initializedBanners.set(bannerElement, {anim1, anim2});
|
|
114
|
+
if (bannerElement.querySelector('a')) {
|
|
115
|
+
block.addEventListener('mouseover', () => {
|
|
116
|
+
anim1.pause();
|
|
117
|
+
anim2.pause();
|
|
118
|
+
});
|
|
119
|
+
block.addEventListener('mouseleave', () => {
|
|
120
|
+
anim1.play();
|
|
121
|
+
anim2.play();
|
|
122
|
+
});
|
|
123
|
+
}
|
|
116
124
|
}
|
|
117
125
|
|
|
118
126
|
function resetBanner(bannerElement) {
|
|
119
|
-
// if already initialized, anims get reset
|
|
120
127
|
const data = initializedBanners.get(bannerElement);
|
|
121
128
|
if (data) {
|
|
122
129
|
data.anim1?.cancel();
|
|
@@ -2,95 +2,102 @@
|
|
|
2
2
|
@use '../fields-core-mixins-v3/core-mixins-v3';
|
|
3
3
|
@use '../../breakpoints';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
overflow-x: hidden;
|
|
8
|
-
color: var(--banner-text-colour);
|
|
9
|
-
font-weight: var(--weight-extra-bold);
|
|
10
|
-
width: 100%;
|
|
11
|
-
display: flex;
|
|
12
|
-
flex-wrap: nowrap;
|
|
13
|
-
line-height: 1;
|
|
14
|
-
text-transform: uppercase;
|
|
15
|
-
height: auto;
|
|
16
|
-
z-index: 99;
|
|
17
|
-
place-self: var(--position);
|
|
18
|
-
|
|
19
|
-
&__wrapper {
|
|
20
|
-
display: grid;
|
|
21
|
-
grid-template: 'main' / 1fr;
|
|
22
|
-
width: 100%;
|
|
23
|
-
height: auto;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&__container {
|
|
27
|
-
width: auto;
|
|
28
|
-
display: flex;
|
|
29
|
-
justify-content: flex-start;
|
|
30
|
-
grid-area: main;
|
|
31
|
-
position: absolute;
|
|
32
|
-
left: 0;
|
|
33
|
-
height: auto;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
&__inner {
|
|
37
|
-
width: auto;
|
|
38
|
-
height: auto;
|
|
39
|
-
overflow-y: hidden;
|
|
5
|
+
@layer base-styles {
|
|
6
|
+
.scrolling-banner-v3 {
|
|
40
7
|
display: flex;
|
|
8
|
+
overflow-x: hidden;
|
|
41
9
|
flex-wrap: nowrap;
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
var(--
|
|
47
|
-
|
|
48
|
-
|
|
10
|
+
&__banner-container,
|
|
11
|
+
> .scrolling-banner-v3 {
|
|
12
|
+
overflow-x: hidden;
|
|
13
|
+
color: var(--banner-text-colour);
|
|
14
|
+
font-weight: var(--weight-extra-bold);
|
|
15
|
+
width: 100%;
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-wrap: nowrap;
|
|
18
|
+
line-height: 1;
|
|
19
|
+
text-transform: uppercase;
|
|
20
|
+
height: auto;
|
|
21
|
+
z-index: 99;
|
|
22
|
+
place-self: var(--position);
|
|
23
|
+
}
|
|
49
24
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
25
|
+
&__wrapper {
|
|
26
|
+
display: grid;
|
|
27
|
+
grid-template: 'main' / 1fr;
|
|
28
|
+
width: 100%;
|
|
29
|
+
height: auto;
|
|
55
30
|
}
|
|
56
31
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
32
|
+
&__container {
|
|
33
|
+
width: auto;
|
|
34
|
+
display: flex;
|
|
35
|
+
justify-content: flex-start;
|
|
36
|
+
grid-area: main;
|
|
37
|
+
position: absolute;
|
|
38
|
+
left: 0;
|
|
39
|
+
height: auto;
|
|
62
40
|
}
|
|
63
|
-
}
|
|
64
41
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
42
|
+
&__inner {
|
|
43
|
+
width: auto;
|
|
44
|
+
height: auto;
|
|
45
|
+
overflow-y: hidden;
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-wrap: nowrap;
|
|
48
|
+
align-items: center;
|
|
49
|
+
align-self: flex-start;
|
|
50
|
+
white-space: nowrap;
|
|
51
|
+
font-size: core-functions-v3.fontSize(
|
|
52
|
+
var(--text-size-mobile),
|
|
53
|
+
'mobile'
|
|
54
|
+
);
|
|
71
55
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
56
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
57
|
+
font-size: core-functions-v3.fontSize(
|
|
58
|
+
var(--text-size-portrait),
|
|
59
|
+
'portrait'
|
|
60
|
+
);
|
|
61
|
+
}
|
|
75
62
|
|
|
76
|
-
|
|
77
|
-
|
|
63
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
64
|
+
font-size: core-functions-v3.fontSize(
|
|
65
|
+
var(--text-size-desktop),
|
|
66
|
+
'desktop'
|
|
67
|
+
);
|
|
68
|
+
}
|
|
78
69
|
}
|
|
79
70
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
position: absolute;
|
|
71
|
+
&__separator {
|
|
72
|
+
margin: auto core-functions-v3.fluidSize(25, 'mobile');
|
|
73
|
+
position: relative;
|
|
74
|
+
height: 0.3em;
|
|
75
|
+
width: 0.3em;
|
|
86
76
|
display: grid;
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
77
|
+
|
|
78
|
+
@include core-mixins-v3.device(breakpoints.$tabPortrait) {
|
|
79
|
+
margin: auto core-functions-v3.fluidSize(25, 'portrait');
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@include core-mixins-v3.device(breakpoints.$tabLandscape) {
|
|
83
|
+
margin: auto core-functions-v3.fluidSize(25, 'desktop');
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&::before {
|
|
87
|
+
content: '';
|
|
88
|
+
background-color: var(--banner-text-colour);
|
|
89
|
+
width: 100%;
|
|
90
|
+
height: 100%;
|
|
91
|
+
position: absolute;
|
|
92
|
+
display: grid;
|
|
93
|
+
z-index: 1;
|
|
94
|
+
place-self: center;
|
|
95
|
+
border-radius: 50%;
|
|
96
|
+
}
|
|
90
97
|
}
|
|
91
|
-
}
|
|
92
98
|
|
|
93
|
-
|
|
94
|
-
|
|
99
|
+
&--text-shadow {
|
|
100
|
+
@include core-mixins-v3.textShadow();
|
|
101
|
+
}
|
|
95
102
|
}
|
|
96
103
|
}
|
|
@@ -14,9 +14,6 @@
|
|
|
14
14
|
</style>
|
|
15
15
|
<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
|
|
16
16
|
|
|
17
|
-
{% set bannerText1 = fields.scrolling_banner_text_1 %}
|
|
18
|
-
{% set bannerText2 = fields.scrolling_banner_text_2 %}
|
|
19
|
-
{% set enableScrolling = fields.enable_scrolling_banner %}
|
|
20
17
|
{% set bannerSpeed = fields.scrolling_banner_speed %}
|
|
21
18
|
{% set imageSeperator = fields.seperator_as_image %}
|
|
22
19
|
{% set positioning = '--position:' ~ fields.positioning|ru ~ ';' %}
|
|
@@ -31,21 +28,25 @@
|
|
|
31
28
|
{% 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")) ~ ";" %}
|
|
32
29
|
{% endif %}
|
|
33
30
|
|
|
34
|
-
{% if
|
|
35
|
-
<
|
|
31
|
+
{% if fields.enable_scrolling_banner %}
|
|
32
|
+
<style>
|
|
33
|
+
.{{blockClassName}}__banner-container.{{block.id}}{
|
|
34
|
+
{{bannerTextStyles}}
|
|
35
|
+
{{textShadowStyle}}
|
|
36
|
+
}
|
|
37
|
+
</style>
|
|
38
|
+
<div class="{{blockClassName}}__banner-container {{block.id}}" data-speed="{{bannerSpeed}}">
|
|
36
39
|
<div class="{{blockClassName}}__wrapper">
|
|
37
40
|
<div class="{{blockClassName}}__container">
|
|
38
41
|
<div class="{{blockClassName}}__inner">
|
|
39
|
-
|
|
40
|
-
<span class="{{blockClassName}}__text {{textShadowClassName}}">{{bannerText1}}</span>
|
|
41
|
-
{% if bannerText2 %}
|
|
42
|
+
{% for item in fields.scrolling_banner_texts %}
|
|
42
43
|
<span class="{{blockClassName}}__separator"></span>
|
|
43
|
-
|
|
44
|
-
|
|
44
|
+
{% set elementType = item.text_link ? 'a href="' ~ item.text_link.url ~ '"' : 'span' %}
|
|
45
|
+
<{{elementType}} class="{{blockClassName}}__text {{textShadowClassName}}">{{item.scrolling_banner_text}}</{{elementType}}>
|
|
46
|
+
{% endfor %}
|
|
45
47
|
</div>
|
|
46
48
|
</div>
|
|
47
49
|
</div>
|
|
48
50
|
</div>
|
|
49
51
|
{% endif %}
|
|
50
|
-
{# {{htmlEntryPoint}} #}
|
|
51
52
|
</section>
|