@total_onion/onion-library 3.2.0 → 3.2.2

package/components/component-responsive-image-v3/responsive-image-v3.scss

@@ -0,0 +1,63 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../../breakpoints';
+
+@mixin responsiveImage() {
+	&__picture {
+		margin: auto;
+		width: var(--image-width-mobile, 100%);
+		height: 100%;
+		grid-area: var(--image-grid-area, main);
+		position: var(--image-position, relative);
+		translate: var(--image-offset-horiz) var(--image-offset-vert);
+		inset: 0;
+		min-height: 0;
+		display: flex;
+		z-index: var(--image-z-index);
+		border: core-functions-v3.fluidSize(var(--image-border-width), 'static')
+			var(--image-border-style) var(--image-border-colour);
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			width: var(--image-width-portrait, 100%);
+		}
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			width: var(--image-width, 100%);
+		}
+	}
+
+	&__image {
+		position: relative;
+		object-fit: var(--image-fit-style, cover);
+		object-position: var(--image-object-position-align);
+		opacity: var(--image-opacity, 1);
+		aspect-ratio: var(
+			--image-aspect-ratio-mobile,
+			var(--image-aspect-ratio-desktop)
+		);
+		border-radius: var(--image-border-radius);
+		min-height: calc(
+			var(--image-min-height-mobile) -
+				calc(
+					var(--global-site-header-height, 0px) -
+						var(--cancel-header-height)
+				)
+		);
+
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			aspect-ratio: var(--image-aspect-ratio-portrait);
+		}
+
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			aspect-ratio: var(--image-aspect-ratio-desktop);
+			min-height: calc(
+				var(--image-min-height-desktop) -
+					calc(
+						var(--global-site-header-height, 0px) -
+							var(--cancel-header-height)
+					)
+			);
+			// .wp-admin & {
+			// 	min-height: unset;
+			// }
+		}
+	}
+}

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

@@ -0,0 +1,71 @@
+{% if fields.enable_image|default(fields.image_enabled) %}
+
+	{% set desktopImage = get_image(fields.desktop_image) %}
+	{% set tabletImage = get_image(fields.tablet_image)|default(desktopImage) %}
+	{% set mobileImage = get_image(fields.mobile_image) %}
+
+	{% set renderDynamic = fields.child_patterns.render_dynamic|default(0) %}
+	{% set suffix = fields.child_patterns.suffix %}
+
+	{% set selectedAspectRatioDesktop = fields.desktop_custom_aspect_ratio|default(desktopImage.width ~ '/' ~ desktopImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+	{% set selectedAspectRatioTablet = fields.tablet_custom_aspect_ratio|default(desktopImage.width ~ '/' ~ desktopImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+	{% set selectedAspectRatioMobile = fields.mobile_custom_aspect_ratio|default(desktopImage.width ~ '/' ~ desktopImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+
+	{% set imageSizes = fields.custom_image_sizes %}
+	{% set sizes = imageSizes|default('auto, (min-width: 1440px) 100vw, (min-width: 1024px) 1024px, (min-width: 768px) 768px, (min-width: 500px) 100vw, 250px') %}
+
+	{% set imageFitStyle = '--image-fit-style:' ~ (fields.image_fit_style|ru|default('cover')) ~ ';' %}
+	{% set imageObjectPositionAlign = '--image-object-position-align:' ~ (fields.image_object_position_align|ru) ~ ';' %}
+	{% set imageWidth = '--image-width:' ~ fields.image_width|default(100) ~ '%;' %}
+	{% set imageWidthMobile = '--image-width-mobile:' ~ fields.image_width_mobile|default(100) ~ '%;' %}
+	{% set imageWidthPortrait = '--image-width-portrait:' ~ fields.image_width_portrait|default(100) ~ '%;' %}
+	{% set imageOpacity = '--image-opacity:' ~ fields.image_opacity|default(1) ~ ';' %}
+	{% set imageZIndex = '--image-z-index:' ~ fields.image_z_index|default(0) ~ ';' %}
+	{% set imagePosition = '--image-position:' ~ fields.image_position|ru ~ ';' %}
+	{% set imageGridArea = '--image-grid-area:' ~ fields.image_grid_area|ru|default('main') ~ ';' %}
+	{% set imageBorderRadius = '--image-border-radius:' ~ fields.image_border_radius ~ ';' %}
+	{% set imageOffsetVert = '--image-offset-vert:' ~ fields.image_offset_vertical ~ '%;' %}
+	{% set imageOffsetHoriz = '--image-offset-horiz:' ~ fields.image_offset_horizontal ~ '%;' %}
+	{% set enableImageBorder = fields.enable_image_border %}
+	{% if enableImageBorder %}
+		{% set imageBorderColour = '--image-border-colour:' ~ (fields.image_border_colour|ru|default(000)) ~ ';' %}
+		{% set imageBorderWidth = '--image-border-width:' ~ (fields.image_border_width|ru|default(1)) ~ ';' %}
+		{% set imageBorderStyle = '--image-border-style:' ~ (fields.image_border_style|ru|default('solid')) ~ ';' %}
+	{% endif %}
+	{% set imageMinHeightMobile = '--image-min-height-mobile:' ~ (fields.image_min_height_mobile|ru|default('auto')) ~ ';' %}
+	{% set imageMinHeightDesktop = '--image-min-height-desktop:' ~ (fields.image_min_height_desktop|ru|default('auto')) ~ ';' %}
+	{% set subtractHeaderHeight = '--cancel-header-height:' ~ (fields.subtract_header_height ? '0px' : 'var(--global-site-header-height, 0px)') ~ ';' %}
+	{% set imageBorderString = imageBorderColour ~ imageBorderWidth ~ imageBorderStyle %}
+	{% set pictureStylesString = imageFitStyle ~ imageObjectPositionAlign ~ imageWidth ~ imageWidthMobile ~ imageWidthPortrait ~ imageOpacity ~ imageAspectRatioDesktop ~ imageAspectRatioPortrait ~ imageAspectRatioMobile ~ imageOffsetVert ~ imageOffsetHoriz ~ imageBorderRadius ~ imagePosition ~ imageGridArea ~ imageMinHeightMobile ~ imageMinHeightDesktop ~ subtractHeaderHeight ~ imageZIndex %}
+	{% set enableEagerLoading = fields.enable_eager_image_loading ? 'loading="eager" fetchpriority="high"' : 'loading="lazy"' %}
+
+	{% set parallaxEnabled = fields.parallax_enabled %}
+	{% if parallaxEnabled %}
+		{% set parallaxDepth = 'data-depth=' ~ fields.parallax_depth ~ " " %}
+		{% set parallaxOffsetY = 'data-y-offset=' ~ fields.parallax_offset_y ~ " " %}
+	{% endif %}
+	{% set picture_id = block.id %}
+
+	<style>
+		.single-responsive-image-v3__picture.{{picture_id|default(block.id)}}{
+			{{pictureStylesString}}
+			{{imageBorderString}}
+			--image-aspect-ratio-desktop: {{selectedAspectRatioDesktop|replace({'x': '/'})}}
+			;
+			--image-aspect-ratio-portrait: {{selectedAspectRatioTablet|replace({'x': '/'})}}
+			;
+			--image-aspect-ratio-mobile: {{selectedAspectRatioMobile|replace({'x': '/'})}}
+			;
+		}
+	</style>
+
+	<!--pattern-replace-var:selectedAspectRatioDesktop={{selectedAspectRatioDesktop}}-->
+	<!--pattern-replace-var:selectedAspectRatioTablet={{selectedAspectRatioTablet}}-->
+	<!--pattern-replace-var:selectedAspectRatioMobile={{selectedAspectRatioMobile}}-->
+	<!--pattern-replace-var:sizes={{sizes}}-->
+	<!--pattern-replace-var:picture_id={{picture_id}}-->
+
+	<!--pattern-include-start:components/responsive-picture-element-v3-->
+{{ include('components/responsive-picture-element-v3.twig') }}
+	<!--pattern-include-end:components/responsive-picture-element-v3-->
+{% endif %}

package/components/component-responsive-picture-element-v3/responsive-picture-element-v3.twig

@@ -0,0 +1,35 @@
+{% set desktopImage = get_image(fields.image_desktop|default(fields.desktop_image)) %}
+{% set tabletImage = get_image(fields.image_portrait|default(fields.tablet_image))|default(desktopImage) %}
+
+{% set mobileImage = get_image(fields.image_mobile|default(fields.mobile_image)) %}
+
+
+{% set isSVG = desktopImage.post_mime_type == 'image/svg+xml' %}
+{% set customAspectRatioDesktop = selectedAspectRatioDesktop %}
+{% set aspectRatioParamDesktop = {"aspect_ratio": customAspectRatioDesktop} %}
+{% set mainImageSrc = isSVG ? desktopImage.src : gt_image_mainsrc(desktopImage, aspectRatioParamDesktop) %}
+{% set desktopSrcset = isSVG ? desktopImage.src : gt_image_srcset(desktopImage, aspectRatioParamDesktop) %}
+
+{% set isSVG = tabletImage.post_mime_type == 'image/svg+xml' %}
+{% set customAspectRatioTablet = selectedAspectRatioTablet|default(tabletImage.width ~ '/' ~ tabletImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+
+{% set aspectRatioParamTablet = {"aspect_ratio": customAspectRatioTablet} %}
+{% set tabletSrcset = isSVG ? tabletImage.src : gt_image_srcset(tabletImage, aspectRatioParamTablet) %}
+
+{% set isSVG = mobileImage.post_mime_type == 'image/svg+xml' %}
+{% set customAspectRatioMobile = selectedAspectRatioMobile|default(mobileImage.width ~ '/' ~ mobileImage.height)|replace({'/' : 'x', ':' : 'x'}) %}
+{% set aspectRatioParamMobile = {"aspect_ratio": customAspectRatioMobile} %}
+{% set mobileSrcset = isSVG ? mobileImage.src : gt_image_srcset(mobileImage, aspectRatioParamMobile) %}
+
+<picture class="single-responsive-image-v3__picture {{picture_id|default(block.id)}}" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" data-assetkey="responsive-image" data-enableparallax="{{ parallaxEnabled }}">
+	{% if desktopImage %}
+		<source data-type="srcSetDesktop" data-pattern-suffix="{{suffix}}" media="(min-width: 1024px)" class="single-responsive-image-v3__source single-responsive-image-v3--desktop" width="{{ desktopImage.width }}" height="{{ desktopImage.height }}" srcset="{{desktopSrcset}}"/>
+	{% endif %}
+	{% if tabletImage %}
+		<source data-type="srcSetTablet" data-pattern-suffix="{{suffix}}" media="(min-width: 768px)" width="{{ tabletImage.width }}" height="{{ tabletImage.height }}" class="single-responsive-image-v3__source single-responsive-image-v3--tablet" srcset="{{ tabletSrcset }}"/>
+	{% endif %}
+	{% if mobileImage %}
+		<source data-type="srcSetMobile" data-pattern-suffix="{{suffix}}" class="single-responsive-image-v3__source single-responsive-image-v3__source--mobile" width="{{ mobileImage.width }}" height="{{ mobileImage.height }}" srcset="{{ mobileSrcset }}"/>
+	{% endif %}
+	<img data-type="srcGeneral" data-elementname="main-image" data-pattern-suffix="{{suffix}}" data-pattern-dynamic="{{renderDynamic}}" {{ enableEagerLoading }} sizes="{{ sizes }}" class="single-responsive-image-v3__image" src="{{mainImageSrc}}" alt="{{ desktopImage.alt }}" {{ parallaxDepth }} {{ parallaxOffsetY }}/>
+</picture>

package/components/component-responsive-show-hide/responsive-show-hide-v3.twig

@@ -0,0 +1,9 @@
+{# Do not edit this file outside of the component library as your changes will be lost with future updates. #}
+{% if fields.show_on_desktop or fields.show_on_tablet_portrait or fields.show_on_mobile %}
+	{% set display = displaytype ? displaytype : 'block' %}
+	{% set showOnDesktop = '--display-desktop: ' ~ (fields.show_on_desktop ? display : 'none') ~ ';' %}
+	{% set showOnPortrait = '--display-portrait: ' ~ (fields.show_on_tablet_portrait ? display : 'none') ~ ';' %}
+	{% set showOnMobile = '--display-mobile: ' ~ (fields.show_on_mobile ? display : 'none') ~  ';' %}
+	{% set showHide = showOnDesktop ~ showOnPortrait ~ showOnMobile %}
+	{{showHide}}
+{% endif %}

package/components/component-social-media-share-v3/social-media-share-v3-extra.scss

@@ -0,0 +1,6 @@
+// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+// @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
+// @use '../../breakpoints';
+
+@mixin additionalStyles() {
+}

package/components/component-social-media-share-v3/social-media-share-v3.scss

@@ -0,0 +1,131 @@
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../component-grid-layout-element-v3/grid-layout-element-v3';
+@use '../../breakpoints';
+// @use './social-media-share-v3-extra';
+
+@mixin social-media-share() {
+	.social-media-share-popup {
+		@include grid-layout-element-v3.gridLayoutElement();
+		.social-media-page-content {
+			display: grid;
+			grid-template-areas: ' left right ';
+			grid-template-columns: fit-content(100%) fit-content(100%);
+			grid-gap: var(--social-media-share-grid-gap);
+			place-content: var(--social-media-share-horizontal-align);
+			align-items: center;
+
+			.social-media-share-text {
+				grid-area: var(--social-media-share-col1);
+				color: var(--theme-primary-text-colour);
+				text-decoration-line: underline;
+				font-size: core-functions-v3.fontSize(16, 'static');
+				cursor: pointer;
+			}
+
+			.social-media-share-icon {
+				grid-area: var(--social-media-share-col2);
+				padding-top: core-functions-v3.fluidSize(9, 'static');
+
+				.share-icon-img {
+					transform: rotate(var(--social-share-icon-rotate));
+					cursor: pointer;
+				}
+			}
+		}
+
+		dialog::backdrop {
+			backdrop-filter: blur(10px);
+		}
+
+		dialog {
+			min-width: core-functions-v3.fluidSize(334, 'static');
+			width: calc(100% - 30px);
+			max-width: core-functions-v3.fluidSize(330, 'static');
+			overflow: visible;
+			box-shadow: var(--social-share-popup-shadow);
+			background-color: var(--social-share-popup-background-colour);
+			border-radius: core-functions-v3.fluidSize(20, 'static');
+			border: none;
+			padding: core-functions-v3.fluidSize(40, 'static')
+				core-functions-v3.fluidSize(20, 'static');
+			height: -moz-fit-content;
+			height: fit-content;
+			font-size: core-functions-v3.fontSize(50, 'static');
+			line-height: 1em;
+			text-transform: uppercase;
+
+			.icon-close {
+				background-color: white;
+				width: core-functions-v3.fluidSize(48, 'static');
+				height: core-functions-v3.fluidSize(48, 'static');
+				border-radius: 50%;
+				position: absolute;
+				top: core-functions-v3.fluidSize(-25, 'static');
+				right: core-functions-v3.fluidSize(20, 'static');
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+			}
+
+			.dialog-actions {
+				text-align: center;
+
+				h3 {
+					font-size: core-functions-v3.fontSize(50, 'static');
+					font-family: var(--primary-font-family);
+					color: var(--social-share-popup-font-colour);
+				}
+
+				.wrapper-content-icons {
+					display: flex;
+					justify-content: center;
+					column-gap: 1rem;
+					padding-top: core-functions-v3.fluidSize(20, 'static');
+
+					a {
+						background-color: #ffffff;
+						border-radius: 50%;
+						height: core-functions-v3.fluidSize(
+							var(--social-media-share-a-size, 40),
+							'static'
+						);
+
+						svg {
+							padding-top: core-functions-v3.fluidSize(
+								5,
+								'static'
+							);
+						}
+
+						svg:hover {
+							fill: purple;
+						}
+
+						svg:hover rect {
+							fill: purple;
+						}
+
+						svg:hover path {
+							fill: purple;
+						}
+					}
+
+					a:focus-visible {
+						outline: unset;
+					}
+				}
+
+				.social-media-message {
+					display: none;
+					color: white;
+					font-size: core-functions-v3.fontSize(16, 'static');
+					justify-content: center;
+					align-items: center;
+				}
+			}
+		}
+
+		// @include social-media-share-v3-extra.additionalStyles();
+	}
+}

package/components/component-social-networks-v3/social-networks-v3.scss

@@ -0,0 +1,73 @@
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../../breakpoints';
+
+@mixin socialNetworksV3() {
+	.component-social-networks-v3 {
+		display: flex;
+		width: 100%;
+		justify-content: var(--alignment-mobile);
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			justify-content: var(--alignment-portrait);
+		}
+		@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+			justify-content: var(--alignment-desktop);
+		}
+		&__inner-container {
+			display: flex;
+			width: max-content;
+			gap: core-functions-v3.fluidSize(var(--gap-mobile), 'mobile');
+			flex-direction: var(--direction-mobile);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				gap: core-functions-v3.fluidSize(var(--gap-portrait), 'portrait');
+				flex-direction: var(--direction-portrait);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				gap: core-functions-v3.fluidSize(var(--gap-desktop), 'desktop');
+				flex-direction: var(--direction-desktop);
+			}
+		}
+
+		&__image {
+			display: block;
+			width: core-functions-v3.fluidSize(var(--width-mobile), 'mobile');
+			height: core-functions-v3.fluidSize(var(--width-mobile), 'mobile');
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				width: core-functions-v3.fluidSize(
+					var(--width-portrait),
+					'portrait'
+				);
+				height: core-functions-v3.fluidSize(
+					var(--width-portrait),
+					'portrait'
+				);
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				width: core-functions-v3.fluidSize(
+					var(--width-desktop),
+					'desktop'
+				);
+				height: core-functions-v3.fluidSize(
+					var(--width-desktop),
+					'desktop'
+				);
+			}
+		}
+		&__link-container {
+			display: flex;
+			align-items: center;
+			gap: core-functions-v3.fluidSize(15);
+		}
+
+		&__image {
+			height: auto;
+			width: core-functions-v3.fluidSize(var(--width-mobile));
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				width: core-functions-v3.fluidSize(var(--width-portrait));
+			}
+			@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+				width: core-functions-v3.fluidSize(var(--width-desktop));
+			}
+		}
+	}
+}

package/components/component-social-networks-v3/social-networks-v3.twig

@@ -0,0 +1,43 @@
+{% set direction = '--direction-desktop: ' ~ fields.menu_direction|ru ~ ';' %}
+{% set directionPortrait = '--direction-portrait: ' ~ fields.menu_direction_portrait|ru ~ ';' %}
+{% set directionMobile = '--direction-mobile: ' ~ fields.menu_direction_mobile|ru ~ ';' %}
+{% set socialIconSize = '--width-desktop: ' ~ fields.width_desktop|ru ~ ';' %}
+{% set socialIconSizePortrait = '--width-portrait: ' ~ fields.width_portrait|ru ~ ';' %}
+{% set socialIconSizeMobile = '--width-mobile: ' ~ fields.width_mobile|ru ~ ';' %}
+{% set gapDesktop = '--gap-desktop: ' ~ fields.gap_desktop|ru ~ ';' %}
+{% set gapPortrait = '--gap-portrait: ' ~ fields.gap_portrait|ru ~ ';' %}
+{% set gapMobile = '--gap-mobile: ' ~ fields.gap_mobile|ru ~ ';' %}
+{% set alignmentDesktop = '--alignment-desktop: ' ~ fields.alignment_desktop|ru ~ ';' %}
+{% set alignmentPortrait = '--alignment-portrait: ' ~ fields.alignment_portrait|ru ~ ';' %}
+{% set alignmentMobile = '--alignment-mobile: ' ~ fields.alignment_mobile|ru ~ ';' %}
+{% set showSocialName = fields.show_social_name %}
+
+{% set sectionStyles = direction ~ alignmentDesktop ~ alignmentPortrait ~ alignmentMobile ~ directionPortrait ~ directionMobile ~ gapDesktop ~ gapPortrait ~ gapMobile ~ socialIconSize ~ socialIconSizePortrait ~ socialIconSizeMobile %}
+
+<style>
+	.component-social-networks-v3 {
+		{{sectionStyles}}
+	}
+</style>
+
+<div class="component-social-networks-v3">
+	<div class="component-social-networks-v3__inner-container">
+		{% for social in options.social_networks.networks %}
+			{% if social.enabled %}
+				{% set image = options.cta_icons[social.social_network] %}
+				{% set isSVG = image.post_mime_type == 'image/svg+xml' %}
+				{% set target = social.social_link.target is not empty ? social.social_link.target : "_self" %}
+				<a class="component-social-networks-v3__link-container" href="{{social.social_link.url}}" aria-label="social-network-link-{{social.social_network}}" target="{{target}}">
+					{% if showSocialName %}
+						<span class="component-social-networks-v3__social-name">{{social.social_network}}</span>
+					{% endif %}
+					{% if isSVG and false %}
+						{{get_raw_svg(image.id)}}
+					{% else %}
+						<img class="component-social-networks-v3__image" src="{{image.src}}" loading="lazy" width="30" height="30" alt="{{ image.alt }}">
+					{% endif %}
+				</a>
+			{% endif %}
+		{% endfor %}
+	</div>
+</div>

package/components/component-text-editor-settings-container-classes-v3/text-editor-settings-container-classes-v3.twig

@@ -0,0 +1,9 @@
+{% if fields.enable_wysiwyg_decoration %}
+	{% set wysiwygDecorationStyle = ' ' ~ blockClassName ~ '__' ~ fields.wysiwyg_decoration_style|ru %}
+{% endif %}
+{% if fields.enable_text_shadow %}
+	{% set textShadowClass = ' ' ~ blockClassName ~ "--text-shadow" %}
+{% endif %}
+{% set styleClasses = 'cmpl-text-editor-settings' ~ wysiwygDecorationStyle  ~  textShadowClass %}
+
+{{styleClasses}}

package/components/component-text-editor-settings-element-classes-v3/text-editor-settings-element-classes-v3.twig

@@ -0,0 +1,13 @@
+{% set typographicStyle = '' %}
+{% if typographicStyleDesktop %}
+	{% set typographicStyleDesktop = ' ' ~ fields.font_size_desktop|ru %}
+{% endif %}
+{% if typographicStylePortrait %}
+	{% set typographicStylePortrait = ' ' ~ fields.font_size_portrait|ru %}
+{% endif %}
+{% if typographicStyleMobile %}
+	{% set typographicStyleMobile = ' ' ~ fields.font_size_mobile|ru %}
+{% endif %}
+{% set typographicStyle = fields.typographic_style|ru %}
+{% set styleClasses = typographicStyle ~ typographicStyleDesktop ~ typographicStylePortrait ~ typographicStyleMobile %}
+{{styleClasses}}