@total_onion/onion-library 2.0.27 → 2.0.30

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.
@@ -11,7 +11,8 @@
11
11
  {{sectionStyles}}
12
12
  }
13
13
  </style>
14
- <section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-parentblockid="{{block.videoIdPrefix}}" data-assetkey="{{blockClassName}}">
14
+ <section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{fields.section_class}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-parentblockid="{{block.videoIdPrefix}}" data-assetkey="{{blockClassName}}">
15
+
15
16
  {% set blockInteractionsEnabled = fields.enable_block_interactions %}
16
17
  {% set enableInteractionsButton = fields.enable_interactions_button %}
17
18
  {% set interactionsButtonType = fields.interactions_button_type %}
@@ -26,7 +27,7 @@
26
27
  {% set enableCtaIcon = ctaData.cta_settings.include_cta_icon %}
27
28
  {% set ctaAnimationStyle = ctaData.cta_settings.cta_animation_style %}
28
29
  {% endif %}
29
-
30
+
30
31
  {% for item in fields.modal_popup_triggers %}
31
32
  {% if item.cta_style|ru matches '/^\\d+$/' %}
32
33
  {% set ctaData = attribute(cta_styles['theme_cta_styles'], item.cta_style|ru - 1) %}
@@ -39,11 +40,12 @@
39
40
  {% if item.modal_popup_trigger_text %}
40
41
  <span class="{{blockClassName}}__popup-trigger-text">{{ item.modal_popup_trigger_text }}</span>
41
42
  {% endif %}
42
- <span class="{{blockClassName}}__popup-trigger-icon">
43
- {# <img src="{{ get_image(options.theme_cta_icons[item.trigger_icon_type|ru]).src }}"> #}
44
- <img src="{{ options.cta_icons[item.trigger_icon_type|ru].src }}" alt="modal trigger icon">
45
-
46
-
43
+ <span
44
+ class="{{blockClassName}}__popup-trigger-icon">
45
+ {# <img src="{{ get_image(options.theme_cta_icons[item.trigger_icon_type|ru]).src }}"> #}
46
+ <img src="{{ options.cta_icons[item.trigger_icon_type|ru].src }}" alt="modal trigger icon">
47
+
48
+
47
49
  </span>
48
50
  </button>
49
51
  {% else %}
@@ -102,7 +102,7 @@
102
102
  {{sectionStyles}}
103
103
  }
104
104
  </style>
105
- <section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{ blockClassName }} lazy-fade {{block.id}} {{block.className}} {{classNameEntryPoint}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} " {{sectionDataAttributes}} data-mobileslidesoffsetbefore="{{carousel_slides_offset_before_mobile}}" data-mobileslidesoffsetafter="{{carousel_slides_offset_after_mobile}}" data-tabletslidesoffsetbefore="{{carousel_slides_offset_before_tablet}}" data-tabletslidesoffsetafter="{{carousel_slides_offset_after_tablet}}" data-desktopslidesoffsetbefore="{{carousel_slides_offset_before_desktop}}" data-desktopslidesoffsetafter="{{carousel_slides_offset_after_desktop}}" data-desktopspacebetweenslides="{{fields.carousel_space_between_slides_desktop}}" data-mobilespacebetweenslides="{{fields.carousel_space_between_slides_mobile}}" data-tabletspacebetweenslides="{{fields.carousel_space_between_slides_tablet}}" data-centeractiveslide="{{fields.carousel_center_active_slide}}" data-centeractiveslideportrait="{{fields.center_active_slide_portrait}}" data-centeractiveslidemobile="{{fields.center_active_slide_mobile}}" data-loopslides="{{fields.loop_slides}}" data-loopslidesportrait="{{fields.loop_slides_portrait}}" data-loopslidesmobile="{{fields.loop_slides_mobile}}" data-paginationstyle="{{carouselPaginationStyle}}" data-assetkey="{{ blockClassName }}">
105
+ <section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{ blockClassName }} lazy-fade {{block.id}} {{fields.section_class}} {{classNameEntryPoint}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} " {{sectionDataAttributes}} data-mobileslidesoffsetbefore="{{carousel_slides_offset_before_mobile}}" data-mobileslidesoffsetafter="{{carousel_slides_offset_after_mobile}}" data-tabletslidesoffsetbefore="{{carousel_slides_offset_before_tablet}}" data-tabletslidesoffsetafter="{{carousel_slides_offset_after_tablet}}" data-desktopslidesoffsetbefore="{{carousel_slides_offset_before_desktop}}" data-desktopslidesoffsetafter="{{carousel_slides_offset_after_desktop}}" data-desktopspacebetweenslides="{{fields.carousel_space_between_slides_desktop}}" data-mobilespacebetweenslides="{{fields.carousel_space_between_slides_mobile}}" data-tabletspacebetweenslides="{{fields.carousel_space_between_slides_tablet}}" data-centeractiveslide="{{fields.carousel_center_active_slide}}" data-centeractiveslideportrait="{{fields.center_active_slide_portrait}}" data-centeractiveslidemobile="{{fields.center_active_slide_mobile}}" data-loopslides="{{fields.loop_slides}}" data-loopslidesportrait="{{fields.loop_slides_portrait}}" data-loopslidesmobile="{{fields.loop_slides_mobile}}" data-paginationstyle="{{carouselPaginationStyle}}" data-assetkey="{{ blockClassName }}">
106
106
 
107
107
  {% set arrowData = fields %}
108
108
  <div class="{{ blockClassName }}__inner-container">
@@ -1,6 +1,14 @@
1
1
  export default function groupcontainerv3Js(options = {}) {
2
2
  try {
3
3
  const {block} = options;
4
+
5
+ if (document.documentElement.dataset.athenadevelopment == 'true') {
6
+ import(
7
+ 'Assets/js/blocks/group-container-v3/group-container-v3-extra.js'
8
+ ).then((result) => {
9
+ result.default();
10
+ });
11
+ }
4
12
  } catch (error) {
5
13
  console.error(error);
6
14
  }
@@ -0,0 +1,148 @@
1
+ {
2
+ "key": "group_68e67fca1ec80",
3
+ "title": "Block: Scrolling Banner v3",
4
+ "fields": [
5
+ {
6
+ "key": "field_68e6822690986",
7
+ "label": "Banner Fields",
8
+ "name": "",
9
+ "aria-label": "",
10
+ "type": "tab",
11
+ "instructions": "",
12
+ "required": 0,
13
+ "conditional_logic": 0,
14
+ "wrapper": {
15
+ "width": "",
16
+ "class": "",
17
+ "id": ""
18
+ },
19
+ "wpml_cf_preferences": 3,
20
+ "placement": "top",
21
+ "endpoint": 0,
22
+ "no_preference": 0,
23
+ "selected": 0
24
+ },
25
+ {
26
+ "key": "field_68e6801d43db8",
27
+ "label": "scrolling banner fields",
28
+ "name": "scrolling_banner_fields",
29
+ "aria-label": "",
30
+ "type": "clone",
31
+ "instructions": "",
32
+ "required": 0,
33
+ "conditional_logic": 0,
34
+ "wrapper": {
35
+ "width": "",
36
+ "class": "",
37
+ "id": ""
38
+ },
39
+ "wpml_cf_preferences": 3,
40
+ "clone": [
41
+ "group_626472bf26f5c"
42
+ ],
43
+ "display": "seamless",
44
+ "layout": "block",
45
+ "prefix_label": 0,
46
+ "prefix_name": 0,
47
+ "acfe_seamless_style": 0,
48
+ "acfe_clone_modal": 0,
49
+ "acfe_clone_modal_close": 0,
50
+ "acfe_clone_modal_button": "",
51
+ "acfe_clone_modal_size": "large"
52
+ },
53
+ {
54
+ "key": "field_68e67fca63368",
55
+ "label": "Block Settings",
56
+ "name": "",
57
+ "aria-label": "",
58
+ "type": "tab",
59
+ "instructions": "",
60
+ "required": 0,
61
+ "conditional_logic": 0,
62
+ "wrapper": {
63
+ "width": "",
64
+ "class": "",
65
+ "id": ""
66
+ },
67
+ "wpml_cf_preferences": 3,
68
+ "placement": "top",
69
+ "endpoint": 0,
70
+ "no_preference": 0,
71
+ "selected": 0
72
+ },
73
+ {
74
+ "key": "field_68e68346cb037",
75
+ "label": "Block",
76
+ "name": "",
77
+ "aria-label": "",
78
+ "type": "accordion",
79
+ "instructions": "",
80
+ "required": 0,
81
+ "conditional_logic": 0,
82
+ "wrapper": {
83
+ "width": "",
84
+ "class": "",
85
+ "id": ""
86
+ },
87
+ "wpml_cf_preferences": 0,
88
+ "open": 0,
89
+ "multi_expand": 0,
90
+ "endpoint": 0
91
+ },
92
+ {
93
+ "key": "field_68e6835dcb038",
94
+ "label": "Block Settings",
95
+ "name": "block_settings",
96
+ "aria-label": "",
97
+ "type": "clone",
98
+ "instructions": "",
99
+ "required": 0,
100
+ "conditional_logic": 0,
101
+ "wrapper": {
102
+ "width": "",
103
+ "class": "",
104
+ "id": ""
105
+ },
106
+ "wpml_cf_preferences": 0,
107
+ "clone": [
108
+ "group_689f649af2ac4"
109
+ ],
110
+ "display": "seamless",
111
+ "layout": "block",
112
+ "prefix_label": 0,
113
+ "prefix_name": 0,
114
+ "acfe_seamless_style": 0,
115
+ "acfe_clone_modal": 0,
116
+ "acfe_clone_modal_close": 0,
117
+ "acfe_clone_modal_button": "",
118
+ "acfe_clone_modal_size": "large"
119
+ }
120
+ ],
121
+ "location": [
122
+ [
123
+ {
124
+ "param": "block",
125
+ "operator": "==",
126
+ "value": "acf\/scrolling-banner-v3"
127
+ }
128
+ ]
129
+ ],
130
+ "menu_order": 0,
131
+ "position": "normal",
132
+ "style": "default",
133
+ "label_placement": "left",
134
+ "instruction_placement": "label",
135
+ "hide_on_screen": "",
136
+ "active": true,
137
+ "description": "",
138
+ "show_in_rest": 0,
139
+ "acfe_autosync": [
140
+ "json"
141
+ ],
142
+ "acfml_field_group_mode": "localization",
143
+ "acfe_form": 0,
144
+ "acfe_display_title": "",
145
+ "acfe_meta": "",
146
+ "acfe_note": "",
147
+ "modified": 1759937456
148
+ }
@@ -0,0 +1,9 @@
1
+ import scrollingbannerJs from 'Assets/js/modules/library-modules/scrolling-banner/scrolling-banner';
2
+ export default function scrollingbannerv3Js(options = {}) {
3
+ try {
4
+ const {block} = options;
5
+ scrollingbannerJs(block);
6
+ } catch (error) {
7
+ console.error(error);
8
+ }
9
+ }
@@ -0,0 +1,14 @@
1
+ <?php
2
+
3
+ acf_register_block_type(
4
+ array(
5
+ 'name' => 'scrolling-banner-v3',
6
+ 'title' => __( 'Scrolling banner v3', 'Global-theme Admin' ),
7
+ 'render_callback' => 'athena_block_render_post_object_v3',
8
+ 'category' => 'common',
9
+ 'icon' => get_svg_icon_content('brick.svg'),
10
+ 'keywords' => array('content', 'text' ),
11
+ 'mode' => 'preview',
12
+ 'supports' => array( 'align' => false, 'anchor' => true ),
13
+ )
14
+ );
@@ -0,0 +1,97 @@
1
+ @use 'NodeModules/@total_onion/onion-library/components/fields-core-functions-v3/core-functions-v3';
2
+ @use 'NodeModules/@total_onion/onion-library/components/fields-core-mixins-v3/core-mixins-v3';
3
+ @use 'NodeModules/@total_onion/onion-library/breakpoints';
4
+
5
+ .scrolling-banner-v3 {
6
+ position: relative;
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
+ grid-area: main;
18
+ place-self: var(--position);
19
+
20
+ &__wrapper {
21
+ display: grid;
22
+ grid-template: 'main' / 1fr;
23
+ width: 100%;
24
+ height: auto;
25
+ }
26
+
27
+ &__container {
28
+ width: auto;
29
+ display: flex;
30
+ justify-content: flex-start;
31
+ grid-area: main;
32
+ position: absolute;
33
+ left: 100%;
34
+ height: auto;
35
+ }
36
+
37
+ &__inner {
38
+ width: auto;
39
+ height: auto;
40
+ overflow-y: hidden;
41
+ display: flex;
42
+ flex-wrap: nowrap;
43
+ align-items: center;
44
+ align-self: flex-start;
45
+ white-space: nowrap;
46
+ font-size: core-functions-v3.fontSize(
47
+ var(--text-size-mobile),
48
+ 'mobile'
49
+ );
50
+
51
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
52
+ font-size: core-functions-v3.fontSize(
53
+ var(--text-size-portrait),
54
+ 'portrait'
55
+ );
56
+ }
57
+
58
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
59
+ font-size: core-functions-v3.fontSize(
60
+ var(--text-size-desktop),
61
+ 'desktop'
62
+ );
63
+ }
64
+ }
65
+
66
+ &__separator {
67
+ margin: auto core-functions-v3.fluidSize(25, 'mobile');
68
+ position: relative;
69
+ height: 0.3em;
70
+ width: 0.3em;
71
+ display: grid;
72
+
73
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
74
+ margin: auto core-functions-v3.fluidSize(25, 'portrait');
75
+ }
76
+
77
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
78
+ margin: auto core-functions-v3.fluidSize(25, 'desktop');
79
+ }
80
+
81
+ &::before {
82
+ content: '';
83
+ background-color: var(--banner-text-colour);
84
+ width: 100%;
85
+ height: 100%;
86
+ position: absolute;
87
+ display: grid;
88
+ z-index: 1;
89
+ place-self: center;
90
+ border-radius: 50%;
91
+ }
92
+ }
93
+
94
+ &--text-shadow {
95
+ @include core-mixins-v3.textShadow();
96
+ }
97
+ }
@@ -0,0 +1,50 @@
1
+ {% set blockClassName = "scrolling-banner-v3" %}
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
+ {% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
5
+ {% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
6
+ {% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
7
+
8
+ {% set sectionStyles = styleEntryPoint %}
9
+
10
+ {{previewEntryPoint}}
11
+ <style>
12
+ .{{blockClassName}}.{{block.id}}{
13
+ {{sectionStyles}}
14
+ }
15
+ </style>
16
+ <section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
17
+
18
+ {% set className = 'scrolling-banner' %}
19
+ {% set bannerText = fields.scrolling_banner_text %}
20
+ {% set enableScrolling = fields.enable_scrolling_banner %}
21
+ {% set bannerSpeed = fields.scrolling_banner_speed %}
22
+ {% set imageSeperator = fields.seperator_as_image %}
23
+ {% set positioning = '--position:' ~ fields.positioning|ru ~ ';' %}
24
+ {% set textSizeDesktop = '--text-size-desktop:' ~ fields.font_size_desktop ~ ';' %}
25
+ {% set textSizePortrait = '--text-size-portrait:' ~ fields.font_size_portrait ~ ';' %}
26
+ {% set textSizeMobile = '--text-size-mobile:' ~ fields.font_size_mobile ~ ';' %}
27
+ {% set textColour = '--banner-text-colour:' ~ fields.text_colour ~ ';' %}
28
+ {% set bannerTextStyles = textSizeDesktop ~ textSizePortrait ~ textSizeMobile ~ positioning ~ textColour %}
29
+
30
+ {% if fields.enable_text_shadow %}
31
+ {% set textShadowClassName = className ~ "--text-shadow" %}
32
+ {% 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
+ {% endif %}
34
+
35
+ {% if enableScrolling %}
36
+ <div class="{{className}}" data-speed="{{bannerSpeed}}" style="{{bannerTextStyles ~ textShadowStyle}}">
37
+ <div class="{{className}}__wrapper">
38
+ <div class="{{className}}__container">
39
+ <div class="{{className}}__inner">
40
+ <span class="{{className}}__separator"></span>
41
+ <span class="{{className}}__text {{textShadowClassName}}">{{bannerText}}</span>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ {% endif %}
47
+
48
+
49
+ {# {{htmlEntryPoint}} #}
50
+ </section>
@@ -11,6 +11,6 @@
11
11
  {{sectionStyles}}
12
12
  }
13
13
  </style>
14
- <section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade {{block.id}}" data-jsload="false" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
14
+ <section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{fields.section_class}} {{classNameEntryPoint}} lazy-fade {{block.id}}" data-jsload="false" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
15
15
  {{htmlEntryPoint}}
16
16
  </section>
@@ -27,7 +27,8 @@
27
27
  }
28
28
  </style>
29
29
 
30
- <{{blockElementType}} {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-jsload="false" data-assetkey="sub-group-container-v3" data-render-dynamic="{{renderDynamic}}" data-render-dynamic-suffix="{{renderDynamicSuffix}}">
30
+ <{{blockElementType}} {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{fields.section_class}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-jsload="false" data-assetkey="sub-group-container-v3" data-render-dynamic="{{renderDynamic}}" data-render-dynamic-suffix="{{renderDynamicSuffix}}">
31
+
31
32
  {% if block %}
32
33
  {% set block = block|merge({'videoIdPrefix' : block.id }) %}
33
34
  {% endif %}
@@ -215,12 +215,12 @@
215
215
  .sh-l-fs {
216
216
  &-mobile {
217
217
  @media ( width <= #{breakpoints.$tabPortrait}) {
218
- @include core-typography-mixins-v3.sh-l-size();
218
+ @include core-typography-mixins-v3.sh-l();
219
219
  }
220
220
  }
221
221
  &-portrait {
222
222
  @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
223
- @include core-typography-mixins-v3.sh-l-size();
223
+ @include core-typography-mixins-v3.sh-l();
224
224
  }
225
225
  }
226
226
  &-desktop {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.27",
3
+ "version": "2.0.30",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {