@total_onion/onion-library 2.0.44 → 2.0.45
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-featured-image-gallery-v3/featured-image-gallery-v3.js +29 -0
- package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.php +16 -0
- package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss +75 -0
- package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.twig +30 -0
- package/components/block-featured-image-gallery-v3/group_5f91897095b42.json +88 -0
- package/components/block-scrolling-banner-v3/group_68e67fca1ec80.json +56 -1
- package/components/block-scrolling-banner-v3/scrolling-banner-v3.twig +3 -1
- package/package.json +1 -1
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import {fadeIn} from '@pernod-ricard-global-cms/jsanimations';
|
|
2
|
+
import {loadCss} from '@pernod-ricard-global-cms/jsutils';
|
|
3
|
+
|
|
4
|
+
export default function featuredImagegalleryJs(options = {}) {
|
|
5
|
+
try {
|
|
6
|
+
const {block} = options;
|
|
7
|
+
loadCss(block.dataset.assetkey, options).then(() => {
|
|
8
|
+
fadeIn(block);
|
|
9
|
+
const featuredImage = block.querySelector(
|
|
10
|
+
`.featured-image-gallery-v3__featured-image`
|
|
11
|
+
);
|
|
12
|
+
const otherImages = block.querySelectorAll(
|
|
13
|
+
`.featured-image-gallery-v3__image`
|
|
14
|
+
);
|
|
15
|
+
otherImages.forEach((image) => {
|
|
16
|
+
image.addEventListener('click', function updateSrc() {
|
|
17
|
+
featuredImage.setAttribute(
|
|
18
|
+
'srcset',
|
|
19
|
+
this.getAttribute('srcset')
|
|
20
|
+
);
|
|
21
|
+
featuredImage.setAttribute('src', this.getAttribute('src'));
|
|
22
|
+
featuredImage.setAttribute('alt', this.getAttribute('alt'));
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
});
|
|
26
|
+
} catch (error) {
|
|
27
|
+
console.error(error);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<?php
|
|
2
|
+
acf_register_block_type(
|
|
3
|
+
array(
|
|
4
|
+
'name' => 'featured-image-gallery-v3',
|
|
5
|
+
'title' => __('Featured Image gallery v3', 'Global Theme Admin'),
|
|
6
|
+
'render_callback' => 'athena_block_render_post_object_v3',
|
|
7
|
+
'category' => 'common',
|
|
8
|
+
'icon' => get_svg_icon_content('brick.svg'),
|
|
9
|
+
'keywords' => array('content', 'layout', 'image'),
|
|
10
|
+
'mode' => 'preview',
|
|
11
|
+
'supports' => array(
|
|
12
|
+
'align' => false,
|
|
13
|
+
'anchor' => true,
|
|
14
|
+
),
|
|
15
|
+
)
|
|
16
|
+
);
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
|
|
2
|
+
@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
|
|
3
|
+
@use 'Assets/scss/theme/breakpoints';
|
|
4
|
+
@use 'Assets/scss/theme/mixins';
|
|
5
|
+
|
|
6
|
+
.featured-image-gallery-v3 {
|
|
7
|
+
padding: var(--section-padding-mobile) var(--side-padding-mobile-narrow);
|
|
8
|
+
display: grid;
|
|
9
|
+
grid-template:
|
|
10
|
+
'featured'
|
|
11
|
+
'other' / 1fr;
|
|
12
|
+
grid-gap: core-functions.fluidSize(8, 'mobile');
|
|
13
|
+
|
|
14
|
+
@include core-mixins.device(breakpoints.$tabPortrait) {
|
|
15
|
+
padding: var(--section-padding-desktop-tall) var(--side-padding-desktop);
|
|
16
|
+
grid-template: 'featured other' / 1fr 1fr;
|
|
17
|
+
grid-gap: core-functions.fluidSize(13, 'desktop');
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&__featured-image {
|
|
21
|
+
grid-area: featured;
|
|
22
|
+
height: core-functions.fluidSize(343, 'mobile');
|
|
23
|
+
object-fit: cover;
|
|
24
|
+
|
|
25
|
+
@include core-mixins.device(breakpoints.$tabPortrait) {
|
|
26
|
+
height: core-functions.fluidSize(595, 'desktop');
|
|
27
|
+
width: 100%;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&__other-images {
|
|
32
|
+
grid-area: other;
|
|
33
|
+
display: grid;
|
|
34
|
+
grid-gap: core-functions.fluidSize(8, 'mobile');
|
|
35
|
+
grid-template-columns: 1fr 1fr 1fr;
|
|
36
|
+
grid-template-rows: 1fr;
|
|
37
|
+
grid-auto-rows: 1fr;
|
|
38
|
+
height: 100%;
|
|
39
|
+
|
|
40
|
+
@include core-mixins.device(breakpoints.$tabPortrait) {
|
|
41
|
+
grid-auto-rows: unset;
|
|
42
|
+
grid-gap: core-functions.fluidSize(13, 'desktop');
|
|
43
|
+
grid-template-rows: 1fr 1fr 1fr;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&__image-wrapper {
|
|
48
|
+
display: flex;
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
box-shadow: 0px 0px 8px transparent;
|
|
51
|
+
transition: box-shadow 0.2s;
|
|
52
|
+
|
|
53
|
+
&:hover {
|
|
54
|
+
box-shadow: 0px 0px 8px white;
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&__image {
|
|
60
|
+
object-fit: cover;
|
|
61
|
+
width: 100%;
|
|
62
|
+
height: core-functions.fluidSize(109, 'mobile');
|
|
63
|
+
transition:
|
|
64
|
+
transform 0.5s ease-out,
|
|
65
|
+
filter 0.5s;
|
|
66
|
+
|
|
67
|
+
@include core-mixins.device(breakpoints.$tabPortrait) {
|
|
68
|
+
height: core-functions.fluidSize(189, 'desktop');
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&:hover {
|
|
72
|
+
filter: contrast(105%);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{% set blockId = block.id %}
|
|
2
|
+
{% set images = fields.images %}
|
|
3
|
+
{% set blockClassName = 'feature-image-gallery-v3' %}
|
|
4
|
+
<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} lazy" data-assetkey="{{blockClassName}}">
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
{% if not cloudflare_config.use_cloudflare_images %}
|
|
8
|
+
<img loading="lazy" class="{{blockClassName}}__featured-image" srcset="{{get_image(images[0].image).srcset}}" width="500" height="500" src="{{get_image(images[0]).src}}" sizes="(min-width: 1366px) 50vw, (min-width: 1024px) 400px, 90vw" alt="{{get_image(images[0]).alt}}">
|
|
9
|
+
{% else %}
|
|
10
|
+
{% set image = get_image(images[0].image) %}
|
|
11
|
+
{% set srcset = gt_cf_srcset(image) %}
|
|
12
|
+
{% set mainImageSrc = gt_cf_mainsrc(image) %}
|
|
13
|
+
<img loading="lazy" class="{{blockClassName}}__featured-image" srcset="{{srcset}}" width="500" height="500" src="{{mainImageSrc}}" sizes="(min-width: 1366px) 50vw, (min-width: 1024px) 400px, 90vw" alt="{{image.alt}}">
|
|
14
|
+
{% endif %}
|
|
15
|
+
|
|
16
|
+
<div class="{{blockClassName}}__other-images">
|
|
17
|
+
{% for image in images %}
|
|
18
|
+
<div class="{{blockClassName}}__image-wrapper">
|
|
19
|
+
{% if not cloudflare_config.use_cloudflare_images %}
|
|
20
|
+
<img loading="lazy" class="{{blockClassName}}__image" srcset="{{get_image(image.image).srcset}}" width="500" height="500" src="{{get_image(image.image).src}}" sizes="(min-width: 1366px) 20vw, (min-width: 1024px) 20vw, 50vw " alt="{{get_image(image.image).alt}}">
|
|
21
|
+
{% else %}
|
|
22
|
+
{% set image = get_image(image.image) %}
|
|
23
|
+
{% set srcset = gt_cf_srcset(image) %}
|
|
24
|
+
{% set mainImageSrc = gt_cf_mainsrc(image) %}
|
|
25
|
+
<img loading="lazy" class="{{blockClassName}}__image" srcset="{{srcset}}" width="500" height="500" src="{{mainImageSrc}}" sizes="(min-width: 1366px) 20vw, (min-width: 1024px) 20vw, 50vw " alt="{{image.alt}}">
|
|
26
|
+
{% endif %}
|
|
27
|
+
</div>
|
|
28
|
+
{% endfor %}
|
|
29
|
+
</div>
|
|
30
|
+
</section>
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
{
|
|
2
|
+
"key": "group_5f91897095b42",
|
|
3
|
+
"title": "Block: Featured Image Gallery v3",
|
|
4
|
+
"fields": [
|
|
5
|
+
{
|
|
6
|
+
"key": "field_5f9189e9fb4a9",
|
|
7
|
+
"label": "Images",
|
|
8
|
+
"name": "images",
|
|
9
|
+
"aria-label": "",
|
|
10
|
+
"type": "repeater",
|
|
11
|
+
"instructions": "",
|
|
12
|
+
"required": 0,
|
|
13
|
+
"conditional_logic": 0,
|
|
14
|
+
"wrapper": {
|
|
15
|
+
"width": "",
|
|
16
|
+
"class": "",
|
|
17
|
+
"id": ""
|
|
18
|
+
},
|
|
19
|
+
"wpml_cf_preferences": 3,
|
|
20
|
+
"collapsed": "",
|
|
21
|
+
"min": 1,
|
|
22
|
+
"max": 9,
|
|
23
|
+
"layout": "table",
|
|
24
|
+
"button_label": "Add Row",
|
|
25
|
+
"rows_per_page": 20,
|
|
26
|
+
"acfe_repeater_stylised_button": 0,
|
|
27
|
+
"sub_fields": [
|
|
28
|
+
{
|
|
29
|
+
"key": "field_5f918a08fb4aa",
|
|
30
|
+
"label": "image",
|
|
31
|
+
"name": "image",
|
|
32
|
+
"aria-label": "",
|
|
33
|
+
"type": "image",
|
|
34
|
+
"instructions": "",
|
|
35
|
+
"required": 0,
|
|
36
|
+
"conditional_logic": 0,
|
|
37
|
+
"wrapper": {
|
|
38
|
+
"width": "",
|
|
39
|
+
"class": "",
|
|
40
|
+
"id": ""
|
|
41
|
+
},
|
|
42
|
+
"wpml_cf_preferences": 3,
|
|
43
|
+
"uploader": "",
|
|
44
|
+
"return_format": "id",
|
|
45
|
+
"library": "all",
|
|
46
|
+
"upload_folder": "",
|
|
47
|
+
"acfe_thumbnail": 0,
|
|
48
|
+
"min_width": "",
|
|
49
|
+
"min_height": "",
|
|
50
|
+
"min_size": "",
|
|
51
|
+
"max_width": "",
|
|
52
|
+
"max_height": "",
|
|
53
|
+
"max_size": "",
|
|
54
|
+
"mime_types": "",
|
|
55
|
+
"preview_size": "medium",
|
|
56
|
+
"parent_repeater": "field_5f9189e9fb4a9"
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
],
|
|
61
|
+
"location": [
|
|
62
|
+
[
|
|
63
|
+
{
|
|
64
|
+
"param": "block",
|
|
65
|
+
"operator": "==",
|
|
66
|
+
"value": "acf\/featured-image-gallery-v3"
|
|
67
|
+
}
|
|
68
|
+
]
|
|
69
|
+
],
|
|
70
|
+
"menu_order": 0,
|
|
71
|
+
"position": "normal",
|
|
72
|
+
"style": "default",
|
|
73
|
+
"label_placement": "top",
|
|
74
|
+
"instruction_placement": "label",
|
|
75
|
+
"hide_on_screen": "",
|
|
76
|
+
"active": true,
|
|
77
|
+
"description": "",
|
|
78
|
+
"show_in_rest": 0,
|
|
79
|
+
"acfe_autosync": [
|
|
80
|
+
"json"
|
|
81
|
+
],
|
|
82
|
+
"acfml_field_group_mode": "localization",
|
|
83
|
+
"acfe_form": 0,
|
|
84
|
+
"acfe_display_title": "",
|
|
85
|
+
"acfe_meta": "",
|
|
86
|
+
"acfe_note": "",
|
|
87
|
+
"modified": 1760373775
|
|
88
|
+
}
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
{
|
|
26
26
|
"key": "field_68e6801d43db8",
|
|
27
27
|
"label": "scrolling banner fields",
|
|
28
|
-
"name": "
|
|
28
|
+
"name": "scrolling_banner_fields_1",
|
|
29
29
|
"aria-label": "",
|
|
30
30
|
"type": "clone",
|
|
31
31
|
"instructions": "",
|
|
@@ -50,6 +50,61 @@
|
|
|
50
50
|
"acfe_clone_modal_button": "",
|
|
51
51
|
"acfe_clone_modal_size": "large"
|
|
52
52
|
},
|
|
53
|
+
{
|
|
54
|
+
"key": "field_68e6801d43db9",
|
|
55
|
+
"label": "scrolling banner fields",
|
|
56
|
+
"name": "scrolling_banner_fields_2",
|
|
57
|
+
"aria-label": "",
|
|
58
|
+
"type": "clone",
|
|
59
|
+
"instructions": "",
|
|
60
|
+
"required": 0,
|
|
61
|
+
"conditional_logic": 0,
|
|
62
|
+
"wrapper": {
|
|
63
|
+
"width": "",
|
|
64
|
+
"class": "",
|
|
65
|
+
"id": ""
|
|
66
|
+
},
|
|
67
|
+
"wpml_cf_preferences": 3,
|
|
68
|
+
"clone": [
|
|
69
|
+
"group_626472bf26f5c"
|
|
70
|
+
],
|
|
71
|
+
"display": "seamless",
|
|
72
|
+
"layout": "block",
|
|
73
|
+
"prefix_label": 0,
|
|
74
|
+
"prefix_name": 0,
|
|
75
|
+
"acfe_seamless_style": 0,
|
|
76
|
+
"acfe_clone_modal": 0,
|
|
77
|
+
"acfe_clone_modal_close": 0,
|
|
78
|
+
"acfe_clone_modal_button": "",
|
|
79
|
+
"acfe_clone_modal_size": "large"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"key": "field_68e6801d43db10",
|
|
83
|
+
"label": "size",
|
|
84
|
+
"name": "size",
|
|
85
|
+
"aria-label": "",
|
|
86
|
+
"type": "select",
|
|
87
|
+
"instructions": "",
|
|
88
|
+
"required": 0,
|
|
89
|
+
"conditional_logic": 0,
|
|
90
|
+
"wrapper": {
|
|
91
|
+
"width": "",
|
|
92
|
+
"class": "",
|
|
93
|
+
"id": ""
|
|
94
|
+
},
|
|
95
|
+
"wpml_cf_preferences": 3,
|
|
96
|
+
"options": {
|
|
97
|
+
"large": "Large",
|
|
98
|
+
"small": "Small"
|
|
99
|
+
},
|
|
100
|
+
"default_value": "large",
|
|
101
|
+
"allow_null": 0,
|
|
102
|
+
"multiple": 0,
|
|
103
|
+
"ui": 0,
|
|
104
|
+
"return_format": "value",
|
|
105
|
+
"ajax": 0,
|
|
106
|
+
"placeholder": ""
|
|
107
|
+
},
|
|
53
108
|
{
|
|
54
109
|
"key": "field_68e67fca63368",
|
|
55
110
|
"label": "Block Settings",
|
|
@@ -14,7 +14,9 @@
|
|
|
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 bannerText = fields.
|
|
17
|
+
{% set bannerText = fields.scrolling_banner_text_1 %}
|
|
18
|
+
{% set bannerText2 = fields.scrolling_banner_text_2 %}
|
|
19
|
+
{% set size = fields.scrolling_banner_text_size %}
|
|
18
20
|
{% set enableScrolling = fields.enable_scrolling_banner %}
|
|
19
21
|
{% set bannerSpeed = fields.scrolling_banner_speed %}
|
|
20
22
|
{% set imageSeperator = fields.seperator_as_image %}
|