@total_onion/onion-library 3.2.0 → 3.2.2

package/components/block-sub-group-container-v3/sub-group-container-v3.js

@@ -0,0 +1,9 @@
+// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
+export default function subgroupcontainerv3Js(options = {}) {
+	// try {
+	// 	const {block} = options;
+	// 	loadCss(block.dataset.assetkey, options).then(() => {});
+	// } catch (error) {
+	// 	console.error(error);
+	// }
+}

package/components/block-sub-group-container-v3/sub-group-container-v3.scss

@@ -0,0 +1,27 @@
+@use '../component-grid-layout-element-v3/grid-layout-element-v3';
+@use '../component-grid-layout-container-v3/grid-layout-container-v3';
+@use '../component-flex-layout-container-v3/flex-layout-container-v3';
+
+@layer base-styles {
+	.sub-group-container-v3 {
+		display: grid;
+		grid-template: 'main' / 1fr;
+		place-items: center;
+		&__grid-container {
+			grid-area: main;
+			place-self: stretch;
+			&.flex-layout-container {
+				@include flex-layout-container-v3.flexLayoutContainer();
+			}
+			&.grid-layout-container {
+				@include grid-layout-container-v3.gridLayoutContainer();
+			}
+		}
+		&__block-container {
+			z-index: 5;
+			pointer-events: none;
+			position: relative;
+			@include grid-layout-element-v3.gridLayoutElement();
+		}
+	}
+}

package/components/block-sub-group-container-v3/sub-group-container-v3.twig

@@ -0,0 +1,59 @@
+{% set blockClassName = "sub-group-container-v3" %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields, block }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields, block, blockClassName, options, cta_styles, environment, is_preview, nav_menus }, with_context = false) %}
+{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields, block }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields: fields, block: block, displaytype: displaytype, is_preview: is_preview }, with_context = false) %}
+{% set imageSizes = '(min-width: 1440px) ' ~ (100 / fields.grid_layout.grid_columns_desktop|default(1))|round ~ 'vw, (min-width: 1024px) ' ~ (100 / fields.grid_layout.grid_columns_desktop|default(1))|round ~ 'vw, (min-width: 768px) ' ~ (100 / fields.grid_layout.grid_columns_portrait|default(1))|round ~ 'vw, (min-width: 300px) ' ~(100 / fields.grid_layout.grid_columns_mobile|default(1))|round ~ 'vw, 100vw' %}
+{% set layoutType = fields.layout_type|ru|default('grid') %}
+{% set layoutStyles = '' %}
+{% if layoutType == 'flex' %}
+	{% set layoutStyles = include('components/flex-layout-container-v3.twig', { fields, block }, with_context = false) %}
+	{% set layoutClass = 'flex-layout-container' %}
+{% elseif layoutType == 'grid' %}
+	{% set layoutStyles = include('components/grid-layout-container-v3.twig', { fields, block }, with_context = false) %}
+	{% set layoutClass = 'grid-layout-container' %}
+{% endif %}
+{% set blockElementType = fields.block_element_type|default('section')|ru %}
+
+{% set sectionStyles =  styleEntryPoint ~ backgroundColour ~ gridLayoutContainer ~ containerOverflowType ~ blockPosition %}
+{% set renderDynamic = fields.render_dynamic %}
+{% set renderDynamicSuffix = fields.render_dynamic_suffix %}
+
+{{previewEntryPoint}}
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+	}
+</style>
+
+<{{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}}">
+	{% if block %}
+		{% set block = block|merge({'videoIdPrefix' : block.id }) %}
+	{% endif %}
+	<style>
+		.{{blockClassName}}__grid-container.{{block.id}}{
+			{{layoutStyles}}
+		}
+	</style>
+	<div class="{{blockClassName}}__grid-container cmpl-core-group-container-styles__grid-container {{layoutClass}} {{block.id}}">
+		{% for section in fields.sections %}
+			{% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: section, block: block }, with_context = false) %}
+			{% if block %}
+				{% set block = block|merge({'anchor' : '','className' : '', 'id': block.id ~ '-' ~ loop.index }) %}
+			{% endif %}
+			<style>
+				.{{blockClassName}}__block-container.{{block.id}}{
+					{{gridLayoutElement}}
+				}
+			</style>
+			<div class="{{blockClassName}}__block-container cmpl-core-group-container-styles__block-container {{block.id}}">
+				{{ include('blocks/' ~ (section.acf_fc_layout|replace({ '_': '-' })) ~ '.twig', { fields: section, options, block, post, is_preview, site, cta_styles, languages, imageSizes, loop: loop.index }, with_context = false, ignore_missing = true) }}
+			</div>
+		{% endfor %}
+	</div>
+	{% if fields.animations.enable_animations %}
+		{{ include('components/animations-style-v3.twig', { fields, block, blockClassName }, with_context = false) }}
+	{% endif %}
+
+</{{blockElementType}}>

package/components/block-video-content-v3/group_687190b8d26df.json

@@ -0,0 +1,169 @@
+{
+	"key": "group_687190b8d26df",
+	"title": "Block: Video Content v3",
+	"fields": [
+		{
+			"key": "field_687190faf3f3c",
+			"label": "Video",
+			"name": "",
+			"aria-label": "",
+			"type": "tab",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"placement": "top",
+			"endpoint": 0,
+			"no_preference": 0,
+			"selected": 0
+		},
+		{
+			"key": "field_687190baf3f3b",
+			"label": "Video fields",
+			"name": "video_fields",
+			"aria-label": "",
+			"type": "clone",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"clone": ["group_6872282f44634"],
+			"display": "seamless",
+			"layout": "block",
+			"prefix_label": 0,
+			"prefix_name": 0,
+			"acfe_seamless_style": 0,
+			"acfe_clone_modal": 0,
+			"acfe_clone_modal_close": 0,
+			"acfe_clone_modal_button": "",
+			"acfe_clone_modal_size": "large"
+		},
+		{
+			"key": "field_68719139f3f3f",
+			"label": "Block Padding",
+			"name": "",
+			"aria-label": "",
+			"type": "tab",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"placement": "top",
+			"endpoint": 0,
+			"no_preference": 0,
+			"selected": 0
+		},
+		{
+			"key": "field_68719142f3f40",
+			"label": "block padding fields",
+			"name": "block_padding_fields",
+			"aria-label": "",
+			"type": "clone",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"clone": ["group_689f66f3e26df"],
+			"display": "seamless",
+			"layout": "block",
+			"prefix_label": 0,
+			"prefix_name": 0,
+			"acfe_seamless_style": 0,
+			"acfe_clone_modal": 0,
+			"acfe_clone_modal_close": 0,
+			"acfe_clone_modal_button": "",
+			"acfe_clone_modal_size": "large"
+		},
+		{
+			"key": "field_6871910af3f3d",
+			"label": "Block Settings",
+			"name": "",
+			"aria-label": "",
+			"type": "tab",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"placement": "top",
+			"endpoint": 0,
+			"no_preference": 0,
+			"selected": 0
+		},
+		{
+			"key": "field_6871911af3f3e",
+			"label": "block settings fields",
+			"name": "block_settings_fields",
+			"aria-label": "",
+			"type": "clone",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"clone": ["group_689f649af2ac4"],
+			"display": "seamless",
+			"layout": "block",
+			"prefix_label": 0,
+			"prefix_name": 0,
+			"acfe_seamless_style": 0,
+			"acfe_clone_modal": 0,
+			"acfe_clone_modal_close": 0,
+			"acfe_clone_modal_button": "",
+			"acfe_clone_modal_size": "large"
+		}
+	],
+	"location": [
+		[
+			{
+				"param": "block",
+				"operator": "==",
+				"value": "all"
+			}
+		]
+	],
+	"menu_order": 0,
+	"position": "normal",
+	"style": "default",
+	"label_placement": "left",
+	"instruction_placement": "label",
+	"hide_on_screen": "",
+	"active": false,
+	"description": "",
+	"show_in_rest": 0,
+	"display_title": "",
+	"acfe_autosync": ["json"],
+	"acfe_form": 0,
+	"acfe_display_title": "",
+	"acfe_meta": "",
+	"acfe_note": "",
+	"modified": 1763475209
+}

package/components/block-video-content-v3/video-content-v3.js

@@ -0,0 +1,12 @@
+import videocontroller from '../../onion-videocontroller/onion-videocontroller.js';
+
+export default function videocontentv3Js(options = {}) {
+	try {
+		const {block} = options;
+		if (!document.body.classList.contains('wp-admin')) {
+			const videoController = new videocontroller(block);
+		}
+	} catch (error) {
+		console.error(error);
+	}
+}

package/components/block-video-content-v3/video-content-v3.scss

@@ -0,0 +1,123 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../../breakpoints';
+
+@layer base-styles {
+	.video-content-v3 {
+		display: grid;
+		grid-template: 'main' / 1fr;
+		// @include vc-styles.basic();
+		&__video-container {
+			display: grid;
+			grid-template: 'video' / 1fr;
+			grid-area: main;
+			opacity: 0;
+			pointer-events: none;
+			height: 100%;
+			width: 100%;
+			background-color: black;
+			transition: opacity 0.5s, background-color 1s;
+			z-index: -1;
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				object-fit: cover;
+				grid-area: main;
+			}
+
+			&.video-playing {
+				pointer-events: all;
+				opacity: 1;
+				z-index: 10;
+			}
+
+			&.lock-video-aspect-to-image {
+				iframe,
+				video {
+					position: absolute;
+					inset: 0;
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			&.set-video-to-cover {
+				iframe,
+				video {
+					object-fit: cover;
+					object-position: center;
+				}
+			}
+
+			.loading-wrapper {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				width: core-functions-v3.fluidSize(84, 'static');
+				height: core-functions-v3.fluidSize(84, 'static');
+
+				--spinner-bg-colour: #ffffff54;
+				--spinner-colour: white;
+
+				&:before {
+					content: '';
+					top: 0;
+					left: 0;
+					width: core-functions-v3.fluidSize(84, 'static');
+					height: core-functions-v3.fluidSize(84, 'static');
+					position: absolute;
+					border-radius: 50%;
+					border-right: solid core-functions-v3.fluidSize(5, 'static')
+						var(--spinner-bg-colour);
+					border-left: solid core-functions-v3.fluidSize(5, 'static')
+						var(--spinner-bg-colour);
+					border-top: solid core-functions-v3.fluidSize(5, 'static')
+						var(--spinner-bg-colour);
+					border-bottom: solid
+						core-functions-v3.fluidSize(5, 'static')
+						var(--spinner-colour);
+					animation: rotate 1s linear infinite;
+				}
+			}
+		}
+
+		&__video-play-button {
+			grid-area: main;
+			place-self: center;
+			// @include playButtonDefault();
+			transform: scale(1);
+			transition: transform 0.3s 0.5s;
+
+			&.video-playing {
+				transform: scale(0);
+				transition: transform 0.5s;
+				opacity: 0;
+				pointer-events: none;
+				max-height: 0px;
+			}
+		}
+
+		&__video-inner-container {
+			grid-area: video;
+			display: flex;
+			width: 100%;
+			position: relative;
+
+			iframe {
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		&__video-player {
+			height: auto;
+			object-fit: contain;
+			width: 100%;
+		}
+		&:has(.video-playing) {
+			z-index: 99;
+		}
+	}
+}

package/components/block-video-content-v3/video-content-v3.twig

@@ -0,0 +1,26 @@
+{% set blockClassName = "video-content-v3" %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
+{% set htmlEntryPoint = include('entry-points/entry-point-html-v3.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
+{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
+{% set styleEntryPoint = include('entry-points/entry-point-style-v3.twig', { fields: fields, block: block, is_preview }, with_context = false) %}
+{% set previewEntryPoint = include('entry-points/entry-point-preview-info.twig', { fields, block, displaytype, is_preview }, with_context = false) %}
+{% set sectionStyles =  styleEntryPoint %}
+
+{{previewEntryPoint}}
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+	}
+</style>
+<section
+	{{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
+
+	<!--pattern-replace-start:component/video-component-v3 -->
+	{{include('components/video-component-v3.twig',{ fields, block, blockClassName }, with_context = false)}}
+	<!--pattern-replace-end:component/video-component-v3 -->
+
+	{% if fields.animations.enable_animations %}
+		{{ include('components/animations-style-v3.twig', { fields, block, blockClassName }, with_context = false) }}
+	{% endif %}
+
+</section>

package/components/component-accent-image-v3/accent-image-v3.twig

@@ -0,0 +1,119 @@
+{% if fields.accent_image_v3.enable_accent_image_v3 %}
+	{% for image in fields.accent_image_v3.accent_images %}
+		{% set accentImage = get_image(image.accent_image_v3_image) %}
+		{% set rotationDesktop = image.desktop_positioning.image_rotation_desktop|default(0) %}
+		{% set rotationMobile = image.mobile_positioning.image_rotation_mobile|default(rotationDesktop) %}
+		{% set opacity = image.accent_image_opacity|default(1) %}
+		{% set borderRadius = image.accent_image_border_radius|default('0px') %}
+		{% set zIndex = image.accent_z_index %}
+		{% set mobileSettings = image.mobile_positioning %}
+		{% set oneHundredWidth = image.set_width_and_height_to_100 %}
+		{% set imageFitStyle = image.image_fit_style|ru %}
+		{% if image.use_desktop_positioning_for_mobile %}
+			{% set mobileSettings = image.desktop_positioning %}
+		{% endif %}
+		{% set mobilePositioning = mobileSettings.horizontal_offset ~ '% ' ~ mobileSettings.vertical_offset ~ '%' %}
+		{% set desktopPositioning = image.desktop_positioning.horizontal_offset ~ '% ' ~ image.desktop_positioning.vertical_offset ~ '%' %}
+		{% set desktopWidth = 'calc(' ~ image.desktop_accent_image_width ~ '/ var(--desktop-design-reference) * var(--screen-width-desktop))' %}
+		{% set mobileWidth = 'calc(' ~ image.mobile_accent_image_width ~ '/ var(--mobile-design-reference) * var(--screen-width-mobile))' %}
+		{% if oneHundredWidth %}
+			{% set desktopWidth = '100%' %}
+			{% set mobileWidth = '100%' %}
+		{% endif %}
+		{% set accentImageContainerElement = 'div' %}
+		{% set accentImageCtaType = image.accent_image_cta_type|ru %}
+		{% if image.enable_accent_image_cta %}
+			{% if image.accent_image_cta_type|ru == 'link' %}
+				{% set accentImageContainerElement = 'a' %}
+			{% endif %}
+		{% endif %}
+		{% set suffix = block.id ~ '-' ~ loop.index %}
+		{% if image.animations.enable_animations %}
+			{{include('components/animations-style-v3.twig', { fields: image, suffix }, with_context = false)}}
+		{% endif %}
+		<style>
+			.loaded .{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
+				{{include('components/animations-v3.twig', { fields: image, block: block, blockClassName: blockClassName, suffix }, with_context = false)}}
+				animation: var(--animation-name) var(--animation-duration) var(--animation-delay) var(--animation-easing) var(--animation-repeat) var(--animation-fill-mode) var(--animation-direction);
+			}
+			.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
+				z-index: {{zIndex}}
+				;
+				grid-area: main;
+				pointer-events: {{image.enable_accent_image_cta ? 'all' : 'none'}};
+				position: absolute;
+				place-self: {{mobileSettings.vertical_snap|ru}}
+				{{mobileSettings.horizontal_snap|ru}}
+				;
+				width: {{mobileWidth}}
+				;
+				height: {{mobileWidth}}
+				;
+				translate: {{mobilePositioning}}
+				;
+			}
+			.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image .{{blockClassName}}__image-element.element {
+				width: 100%;
+				height: 100%;
+				display: flex;
+				object-fit: {{imageFitStyle}}
+				;
+				border-radius: {{borderRadius}}
+				;
+				border: 0 solid transparent;
+				opacity: {{opacity}}
+				;
+				rotate: {{rotationMobile ~ 'deg'}};
+			}
+			.{{blockClassName}}__image-number {
+					z-index: 99;
+					position: absolute;
+					font-size: 40px;
+					left: 50%;
+					top: 50%;
+					transform: translate(-50%, -50%);
+					color: white;
+					text-shadow: 1px 1px 1px blue;
+			}
+			@media screen and (min-width: 768px) {
+				.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image {
+					place-self: {{image.desktop_positioning.vertical_snap|ru}}
+					{{image.desktop_positioning.horizontal_snap|ru}};
+					width: {{desktopWidth}};
+					height: {{desktopWidth}};
+					translate: {{desktopPositioning}};
+				}
+				.{{block.id}}-{{loop.index}}.{{blockClassName}}__accent-image .{{blockClassName}}__image-element.element {
+					width: 100%;
+					height: 100%;
+					display: flex;
+					object-fit: {{imageFitStyle}};
+					border-radius: {{borderRadius}};
+					border: 0 solid transparent;
+					opacity: {{opacity}};
+					rotate: {{rotationDesktop ~ 'deg'}};
+				}
+			}
+		</style>
+		<{{accentImageContainerElement}}
+			{{accentImageCtaType == 'link' ? 'href="' ~ image.accent_image_link.url ~ '" ' ~ 'target="' ~ image.accent_image_link.target ~ '" ' : ''}}
+            class="{{block.id}}-{{ loop.index }} {{blockClassName}}__accent-image">
+			{% if image.inline_raw_svg %}
+				{{fn('get_raw_svg', accentImage.id, blockClassName ~ '__image-element element')}}
+			{% else %}
+            <img
+                class="{{block.id}}-{{ loop.index }} {{blockClassName}}__image-element element"
+                src="{{ accentImage.src }}"
+                width="{{ accentImage.width }}"
+                height="{{ accentImage.height }}"
+                alt="{{ accentImage.alt }}"
+				loading="lazy"
+            />
+			{% endif %}
+			
+			{% if fields.accent_image_v3.show_image_number and is_preview %}
+				<div class="{{blockClassName}}__image-number">{{ loop.index }}</div>
+			{% endif %}
+       	</{{accentImageContainerElement}}>
+	{% endfor %}
+{% endif %}