@total_onion/onion-library 3.2.0 → 3.2.2

package/components/block-accent-image-v3/accent-image-v3.scss

@@ -0,0 +1,4 @@
+@layer base-styles {
+	.accent-image-v3 {
+	}
+}

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

@@ -0,0 +1,137 @@
+{% set blockClassName = "accent-image-v3" %}
+{% set classNameEntryPoint = include('entry-points/entry-point-classes-v3.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-v3.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-v3.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}} cmpl-core-group-container-styles {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
+	{% 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 accentimagestyle>
+				.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>
+
+			<!--pattern-replace-var:accentImageSrc={{accentImage.src}}-->
+
+			<{{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 %}
+</section>

package/components/block-accent-image-v3/group_6890e1233ff2d.json

@@ -0,0 +1,81 @@
+{
+    "key": "group_6890e1233ff2d",
+    "title": "Block: Accent Image V3",
+    "fields": [
+        {
+            "key": "field_6890e1257104e",
+            "label": "Accent Image V3",
+            "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_6890e1f108b98",
+            "label": "Accent Image V3 fields",
+            "name": "accent_image_v3_fields",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 0,
+            "clone": [
+                "group_686cd5547efd2"
+            ],
+            "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": 1762794450
+}

package/components/block-accordion-v3/accordion-v3.js

@@ -0,0 +1,119 @@
+export default function accordionv3Js ( options = {} ) {
+	try {
+		const { block } = options;
+
+		const blockClassName = block.dataset.assetkey;
+		const sections = block.querySelectorAll(
+			`.${blockClassName}-content`
+		);
+		const closeAccordionSections = () => {
+			sections.forEach((section) => {
+				if (section.classList.contains('active')) {
+					const question = section.querySelector(
+						`.${blockClassName}-question-wrapper`
+					);
+					const answer = section.querySelector(
+						`.${blockClassName}-answer-wrapper`
+					);
+					const svg = section.querySelector(
+						`.${blockClassName}-icon`
+					);
+					const iconImage = section.querySelector(
+						`.${blockClassName}-image-wrapper`
+					);
+					const sectionHeight = answer.scrollHeight;
+					answer.animate(
+						[
+							{
+								height: sectionHeight + 'px'
+							},
+							{height: '0px'}
+						],
+						{
+							fill: 'forwards',
+							duration: 200,
+							easing: 'ease-out'
+						}
+					);
+					answer.setAttribute('aria-hidden', 'true');
+					question.classList.remove('active');
+					section.classList.remove('active');
+					if (svg) {
+						svg.classList.remove('active');
+					}
+					if (iconImage) {
+						iconImage.classList.remove('image-icon-active');
+					}
+				}
+			});
+		};
+
+		sections.forEach((section) => {
+			const question = section.querySelector(
+				`.${blockClassName}-question-wrapper`
+			);
+			const answer = section.querySelector(
+				`.${blockClassName}-answer-wrapper`
+			);
+			const svg = section.querySelector(`.${blockClassName}-icon`);
+			const iconImage = section.querySelector(
+				`.${blockClassName}-image-wrapper`
+			);
+			question.addEventListener('click', () => {
+				const isCollapsed = answer.getAttribute('aria-hidden') === 'true';
+				closeAccordionSections();
+				if (isCollapsed) {
+					const sectionHeight = answer.scrollHeight;
+					answer.animate(
+						[
+							{height: '0px'},
+							{
+								height: sectionHeight + 'px'
+							}
+						],
+						{
+							fill: 'forwards',
+							duration: 200,
+							easing: 'ease-out'
+						}
+					);
+					section.classList.add('active');
+					answer.classList.add('active');
+					answer.setAttribute('aria-hidden', 'false');
+					if (svg) {
+						svg.classList.add('active');
+					}
+					if (iconImage) {
+						iconImage.classList.add('image-icon-active');
+					}
+				} else {
+					const sectionHeight = answer.scrollHeight;
+					section.classList.remove('active');
+					answer.animate(
+						[
+							{
+								height: sectionHeight + 'px'
+							},
+							{height: '0px'}
+						],
+						{
+							fill: 'forwards',
+							duration: 200,
+							easing: 'ease-out'
+						}
+					);
+					answer.classList.remove('active');
+					answer.setAttribute('aria-hidden', 'true');
+					if (svg) {
+						svg.classList.remove('active');
+					}
+					if (iconImage) {
+						iconImage.classList.remove('image-icon-active');
+					}
+				}
+			});
+		});
+	} catch ( error ) {
+		console.error( error );
+	}
+}

package/components/block-accordion-v3/accordion-v3.scss

@@ -0,0 +1,197 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../component-content-box-settings-v3/content-box-settings-v3';
+@use '../../breakpoints';
+@layer base-styles {
+	.accordion-v3 {
+		@include content-box-settings-v3.contentBoxSettingsV3();
+		width: 100%;
+		pointer-events: all;
+		display: flex;
+		flex-direction: column;
+		gap: core-functions-v3.fluidSize(var(--title-gap), 'mobile');
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			gap: core-functions-v3.fluidSize(var(--title-gap), 'portrait');
+		}
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			gap: core-functions-v3.fluidSize(var(--title-gap), 'desktop');
+		}
+
+		&-wrapper {
+			text-align: initial;
+			background: var(--background-color);
+		}
+
+		&-question-wrapper {
+			cursor: pointer;
+			place-items: flex-start;
+			button {
+				width: 100%;
+				align-items: center;
+				cursor: pointer;
+				background: unset;
+				padding: unset;
+				border: unset;
+			}
+		}
+
+		&__content-container {
+			padding: core-functions-v3.fluidSize(10, 'static')
+				core-functions-v3.fluidSize(50, 'static')
+				core-functions-v3.fluidSize(10, 'static') 0;
+		}
+
+		&-image-wrapper {
+			grid-area: icon;
+			position: absolute;
+			right: core-functions-v3.fluidSize(2, 'static');
+			width: core-functions-v3.fluidSize(
+				var(--image-icon-size),
+				'mobile'
+			);
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				width: core-functions-v3.fluidSize(
+					var(--image-icon-size),
+					'portrait'
+				);
+			}
+
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				width: core-functions-v3.fluidSize(
+					var(--image-icon-size),
+					'desktop'
+				);
+			}
+
+			img {
+				width: 100%;
+			}
+		}
+
+		&-question {
+			text-align: left;
+			display: grid;
+			grid-template:
+				'question icon'
+				'answer ...' / auto min-content;
+			&--icon-left {
+				grid-template:
+					'icon question'
+					'... answer' / min-content auto;
+				column-gap: core-functions-v3.fluidSize(20, 'static');
+			}
+		}
+
+		&-answer-wrapper {
+			overflow: hidden;
+			height: 0;
+			grid-area: answer;
+
+			p {
+				padding-inline: core-functions-v3.fluidSize(
+					var(--text-padding-horizontal),
+					'mobile'
+				);
+
+				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+					padding-inline: core-functions-v3.fluidSize(
+						var(--text-padding-horizontal),
+						'portrait'
+					);
+				}
+
+				@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+					padding-inline: core-functions-v3.fluidSize(
+						var(--text-padding-horizontal),
+						'desktop'
+					);
+				}
+			}
+		}
+
+		&-answer {
+			font-size: core-functions-v3.fontSize(22, 'static');
+			grid-column: 1/-1;
+			padding-bottom: core-functions-v3.fluidSize(20, 'mobile');
+			padding-top: core-functions-v3.fluidSize(20, 'mobile');
+
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				padding-bottom: core-functions-v3.fluidSize(20, 'portrait');
+				padding-top: core-functions-v3.fluidSize(20, 'portrait');
+			}
+
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				padding-bottom: core-functions-v3.fluidSize(20, 'desktop');
+				padding-top: core-functions-v3.fluidSize(20, 'desktop');
+			}
+
+			&:last-child {
+				padding-bottom: 0;
+			}
+		}
+
+		&-icon {
+			grid-area: icon;
+			background: var(--icon-background-color);
+			display: flex;
+			align-items: center;
+			height: core-functions-v3.fluidSize(50, 'static');
+			width: core-functions-v3.fluidSize(50, 'static');
+
+			&.active {
+				.accordion-v3-animation {
+					&:before {
+						transform: rotate(90deg);
+					}
+
+					&:after {
+						transform: rotate(180deg);
+					}
+				}
+			}
+		}
+
+		.image-icon-active {
+			transform: rotate(var(--image-icon-rotation-deg));
+			transition: transform 0.3s ease;
+		}
+
+		:not(.image-icon-active, .lottie-animations *) {
+			transform: rotate(0deg);
+			transition: transform 0.3s ease;
+		}
+
+		&-animation {
+			height: core-functions-v3.fluidSize(20, 'static');
+			margin: auto;
+			position: relative;
+			transition: transform 0.3s ease;
+			width: core-functions-v3.fluidSize(20, 'static');
+
+			&:before,
+			&:after {
+				background-color: red;
+				content: '';
+				position: absolute;
+				transition: transform 0.25s ease-out;
+			}
+
+			&:before {
+				height: 100%;
+				left: 50%;
+				margin-left: -1px;
+				top: 0;
+				width: 2px;
+			}
+
+			&:after {
+				height: 2px;
+				left: 0;
+				margin-top: -1px;
+				top: 50%;
+				width: 100%;
+			}
+		}
+	}
+}

package/components/block-accordion-v3/accordion-v3.twig

@@ -0,0 +1,51 @@
+{% set blockClassName = "accordion-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 backgroundColor = '--background-color: ' ~ fields.accordion_title.background_color ~ ';' %}
+{% set iconBackgroundColor = '--icon-background-color: ' ~ fields.accordion_title.icon_background_color ~ ';' %}
+{% set textPaddingHorizontal = '--text-padding-horizontal: ' ~ fields.accordion_text.text_padding_horizontal ~ ';' %}
+{% set enableCustomIcon = fields.accordion_title.enable_custom_icon %}
+{% set imageIcon = get_image(options.theme_cta_icons.cta_accordion_icon) %}
+{% set imageIconSize = '--image-icon-size: ' ~ fields.accordion_title.image_icon_size ~ ';' %}
+{% set imageIconRotationDeg = '--image-icon-rotation-deg: ' ~ fields.accordion_title.image_icon_rotation_deg ~ 'deg;' %}
+
+{% set sectionStyles = styleEntryPoint ~ backgroundColor ~ iconBackgroundColor ~ textPaddingHorizontal ~ titleGap ~ imageIconSize ~ imageIconRotationDeg %}
+
+{{previewEntryPoint}}
+<style>
+	.{{blockClassName}}.{{block.id}}{
+		{{sectionStyles}}
+	}
+</style>
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
+
+	<div class="{{ blockClassName }}-wrapper">
+		<div class="{{ blockClassName }}-content">
+			<h3 class="{{ blockClassName }}-question-wrapper">
+				<button class="{{ blockClassName }}-question">
+					{% set block = block|merge({'id': block.id ~ '-' ~ 1 }) %}
+					{{ include('components/wysiwyg-editor-v3.twig', { fields: fields.title, block, blockClassName}, with_context = false, ignore_missing = true) }}
+					{% if enableCustomIcon %}
+						<div class="{{ blockClassName }}-image-wrapper">
+							<img class="{{ blockClassName }}-image-icon" src="{{imageIcon.src}}" alt="{{imageIcon.alt}}" width="{{imageIcon.width}}" height="{{imageIcon.height}}">
+						</div>
+					{% else %}
+						<div class="{{ blockClassName }}-icon">
+							<div class="{{ blockClassName }}-animation"></div>
+						</div>
+					{% endif %}
+					<div class="{{ blockClassName }}-answer-wrapper" aria-hidden="true">
+						{% set block = block|merge({'id': block.id ~ '-' ~ 2 }) %}
+						{{ include('components/wysiwyg-editor-v3.twig', { fields: fields.text, block, blockClassName}, with_context = false, ignore_missing = true) }}
+					</div>
+				</button>
+			</h3>
+		</div>
+	</div>
+
+	{{htmlEntryPoint}}
+</section>