@total_onion/onion-library 3.2.0 → 3.2.2

package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.js

@@ -0,0 +1,44 @@
+export default function featuredImagegalleryJs(options = {}) {
+	try {
+		const {block} = options;
+		const featuredImageContainer = block.querySelector(
+			`.featured-image-gallery-v3__featured-image-container`
+		);
+		const featuredImage = block.querySelector(
+			`.featured-image-gallery-v3__featured-image`
+		);
+		const thumbnailImages = block.querySelectorAll(
+			`.featured-image-gallery-v3__image-wrapper`
+		);
+		thumbnailImages.forEach((image) => {
+			image.addEventListener('click', function updateSrc() {
+				thumbnailImages.forEach((wrapper) => {
+					wrapper.classList.remove(
+						'featured-image-gallery-v3__image-wrapper--active'
+					);
+				});
+				image.classList.add(
+					'featured-image-gallery-v3__image-wrapper--active'
+				);
+				featuredImageContainer.classList.add('changing-image');
+				setTimeout(() => {
+					featuredImage.setAttribute(
+						'src',
+						this.querySelector('img').getAttribute('src')
+					);
+					featuredImage.setAttribute(
+						'alt',
+						this.querySelector('img').getAttribute('alt')
+					);
+					featuredImage.setAttribute(
+						'srcset',
+						this.querySelector('img').getAttribute('srcset')
+					);
+					featuredImageContainer.classList.remove('changing-image');
+				}, 800);
+			});
+		});
+	} catch (error) {
+		console.error(error);
+	}
+}

package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss

@@ -0,0 +1,93 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../../breakpoints';
+@layer base-styles {
+	.featured-image-gallery-v3 {
+		display: grid;
+		grid-template:
+			'featured'
+			'other' / 1fr;
+		gap: core-functions-v3.fluidSize(10);
+		@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+			grid-template: 'featured other' / 1fr 1fr;
+			grid-gap: core-functions-v3.fluidSize(20);
+		}
+		&__featured-image-container {
+			perspective: 1000px;
+			grid-area: featured;
+			place-self: stretch;
+			aspect-ratio: 1;
+			&.changing-image
+				.featured-image-gallery-v3__featured-image-inner-container {
+				transform: rotateY(180deg);
+			}
+		}
+		&__featured-image-inner-container {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			text-align: center;
+			transition: transform 0.8s;
+			transform-style: preserve-3d;
+		}
+		&__featured-image-front,
+		&__featured-image-back {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			backface-visibility: hidden;
+		}
+		&__featured-image-front {
+			background-color: var(--bally-blue-dark);
+		}
+		&__featured-image-back {
+			display: grid;
+			place-items: center;
+			background-color: var(--bally-blue-dark);
+			transform: rotateY(180deg);
+			padding: core-functions-v3.fluidSize(20);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				padding: core-functions-v3.fluidSize(120);
+			}
+		}
+		&__featured-image {
+			grid-area: featured;
+			object-fit: cover;
+			aspect-ratio: 1;
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				width: 100%;
+				height: auto;
+			}
+		}
+		&__other-images {
+			grid-area: other;
+			place-self: stretch;
+			display: grid;
+			aspect-ratio: 1;
+			grid-gap: core-functions-v3.fluidSize(8);
+			grid-template-columns: repeat(3, 1fr);
+			grid-template-rows: repeat(3, 1fr);
+			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+				grid-gap: core-functions-v3.fluidSize(10);
+			}
+		}
+		&__image-wrapper {
+			display: flex;
+			overflow: hidden;
+			box-shadow: 0px 0px 8px transparent;
+			transition: box-shadow 0.2s;
+			cursor: pointer;
+			&:hover,
+			&--active {
+				box-shadow: 0px 0px 0px core-functions-v3.fluidSize(2) white;
+			}
+		}
+		&__image {
+			object-fit: cover;
+			aspect-ratio: 1;
+			width: 100%;
+			height: auto;
+			transition: transform 0.5s ease-out;
+		}
+	}
+}

package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.twig

@@ -0,0 +1,43 @@
+{% set blockClassName = "featured-image-gallery-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>
+{% set images = fields.images %}
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{classNameEntryPoint}} lazy-fade {{block.id}}" {{dataAttributeEntryPoint}} data-assetkey="{{blockClassName}}">
+
+	<div class="{{blockClassName}}__featured-image-container">
+		<div class="{{blockClassName}}__featured-image-inner-container">
+			{% set image = get_image(images[0].image) %}
+			{% set srcset = gt_image_srcset(image) %}
+			{% set mainImageSrc = gt_image_mainsrc(image) %}
+			<div class="{{blockClassName}}__featured-image-front">
+				<img loading="lazy" src="{{mainImageSrc}}" class="{{blockClassName}}__featured-image" srcset="{{srcset}}" width="500" height="500" sizes="(min-width: 1366px) 50vw, (min-width: 1024px) 400px, 90vw" alt="{{image.alt}}">
+			</div>
+			<div class="{{blockClassName}}__featured-image-back">
+				<img class="{{blockClassName}}__featured-image-back-logo" src="{{options.site_logos.site_logo.src}}">
+			</div>
+		</div>
+	</div>
+
+	<div class="{{blockClassName}}__other-images">
+		{% for image in images %}
+			<div class="{{blockClassName}}__image-wrapper {{loop.index == 1 ? blockClassName ~ '__image-wrapper--active' : ''}}">
+				{% set image = get_image(image.image) %}
+				{% set srcset = gt_image_srcset(image) %}
+				{% set mainImageSrc = gt_image_mainsrc(image) %}
+				<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}}">
+			</div>
+		{% endfor %}
+	</div>
+</section>

package/components/block-featured-image-gallery-v3/group_5f91897095b42.json

@@ -0,0 +1,88 @@
+{
+    "key": "group_5f91897095b42",
+    "title": "Block: Featured Image Gallery v3",
+    "fields": [
+        {
+            "key": "field_5f9189e9fb4a9",
+            "label": "Images",
+            "name": "images",
+            "aria-label": "",
+            "type": "repeater",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 3,
+            "collapsed": "",
+            "min": 1,
+            "max": 9,
+            "layout": "table",
+            "button_label": "Add Row",
+            "rows_per_page": 20,
+            "acfe_repeater_stylised_button": 0,
+            "sub_fields": [
+                {
+                    "key": "field_5f918a08fb4aa",
+                    "label": "image",
+                    "name": "image",
+                    "aria-label": "",
+                    "type": "image",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "wpml_cf_preferences": 3,
+                    "uploader": "",
+                    "return_format": "id",
+                    "library": "all",
+                    "upload_folder": "",
+                    "acfe_thumbnail": 0,
+                    "min_width": "",
+                    "min_height": "",
+                    "min_size": "",
+                    "max_width": "",
+                    "max_height": "",
+                    "max_size": "",
+                    "mime_types": "",
+                    "preview_size": "medium",
+                    "parent_repeater": "field_5f9189e9fb4a9"
+                }
+            ]
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "all"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "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": 1762794523
+}

package/components/block-form-selection-v3/form-selection-v3.js

@@ -0,0 +1,78 @@
+export default function formselectionv3Js ( options = {} ) {
+	try {
+		const { block } = options;
+
+		// modal logic
+		const formContainer = block.querySelector('.form-selection-v3__container-modal');
+		const openModal = block.querySelector('.form-selection-v3__modal-open');
+		const closeModal = block.querySelector('.form-selection-v3__modal-close');
+		
+
+		if (formContainer && openModal ) {
+			openModal.addEventListener('click', function (e) {
+				e.preventDefault();
+				document.documentElement.classList.add('lock-position');
+				formContainer.style.display = 'flex';
+			});
+			closeModal.addEventListener('click', function (e) {
+				document.documentElement.classList.remove('lock-position');
+				e.preventDefault();
+				formContainer.style.display = 'none';
+			});
+		} else {
+			return;
+		}
+
+		// form logic
+		function validateFormFields(block) {
+			const inputs = block.querySelectorAll(
+				'.cdb_form_field input, .cdb_form_field select, .cdb_form_gdpr_information input, .cdb_form_privacypolicy_information input'
+			);
+
+			inputs.forEach((input) => {
+				const wrapper = input.closest('.cdb_form_field, .cdb_form_gdpr_information, .cdb_form_privacypolicy_information');
+
+				if (!wrapper) return;
+
+				wrapper.classList.remove('invalid');
+
+				if (!input.hasAttribute('required')) return;
+
+				if (input.type === 'checkbox') {
+					if (!input.checked) {
+						wrapper.classList.add('invalid');
+					}
+
+					input.addEventListener('change', () => {
+						if (input.checked) {
+							wrapper.classList.remove('invalid');
+						}
+					});
+				} else {
+					if (!input.value.trim()) {
+						wrapper.classList.add('invalid');
+					}
+
+					input.addEventListener('input', () => {
+						if (input.value.trim()) {
+							wrapper.classList.remove('invalid');
+						}
+					});
+				}
+			});
+		}
+
+		const submit = block.querySelector(
+			'.cdb-submit'
+		);
+
+		submit.classList.add('cmpl-cta-style-11', 'cmpl-cta-animation-style-1');
+
+		submit.addEventListener('click', (e) => {
+			validateFormFields(block);
+		});
+
+	} catch ( error ) {
+		console.error( error );
+	}
+}

package/components/block-form-selection-v3/form-selection-v3.scss

@@ -0,0 +1,38 @@
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../../breakpoints';
+@layer base-styles {
+	.form-selection-v3 {
+		pointer-events: all;
+
+		&__container-modal {
+			display: none;
+			position: fixed;
+			inset: 0;
+			z-index: 9998;
+			background-color: rgba(0, 0, 0, 0.4);
+		}
+
+		&__inner {
+			overflow-y: scroll;
+			width: 100vw;
+			z-index: 9999;
+			height: 100%;
+		}
+
+		&__modal-open {
+			&--icon {
+				cursor: pointer;
+				appearance: none;
+				border: none;
+				background: transparent;
+			}
+		}
+
+		&__modal-close {
+			position: absolute;
+			top: core-functions-v3.fluidSize(20);
+			right: core-functions-v3.fluidSize(20);
+		}
+	}
+}

package/components/block-form-selection-v3/form-selection-v3.twig

@@ -0,0 +1,84 @@
+{% set blockClassName = "form-selection-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 %}
+
+{% set displaySelector = fields.selector_type|ru %}
+{% set renderDynamic = fields.render_dynamic|default(0) %}
+
+{{previewEntryPoint}}
+
+{% set ctaContent = '' %}
+{% set ctaClasses = blockClassName  ~ '__modal-open--icon' %}
+
+{% if fields.cta_type|ru == 'icon' %}
+	{% set iconType = options.theme_cta_icons.cta_signup_icon %}
+	{% set iconImage = get_image(iconType) %}
+	{% set isSVG = iconImage.post_mime_type == 'image/svg+xml' %}
+	{% set ctaContent =  isSVG ? '<img class="" src="' ~ iconImage.src ~ '">' : '<img class="" src="' ~ gt_image_mainsrc(iconImage) ~ '">' %}
+{% endif %}
+{% if fields.cta_type|ru == 'cta' %}
+	{% set cta_styles = options.theme_cta_styles %}
+	{% set ctaContent = fields.cta_text %}
+	{% if fields.cta_style|ru matches '/^\\d+$/' %}
+		{% set ctaData = attribute(cta_styles, fields.cta_style|ru - 1) %}
+		{% set enableCtaAnimation = ctaData.cta_settings.enable_cta_animation %}
+		{% set enableCtaIcon = ctaData.cta_settings.include_cta_icon %}
+		{% set ctaAnimationStyle = ctaData.cta_settings.cta_animation_style %}
+		{% set ctaClasses = 'cmpl-cta-style-' ~ (fields.cta_style|ru) ~ ' ' ~ 'cmpl-cta-animation-style-' ~ (enableCtaAnimation ? ctaAnimationStyle : '') %}
+	{% endif %}
+{% endif %}
+
+<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" style="{{sectionStyles}}" data-pattern-form-selection data-renderdynamic={{renderDynamic}} data-formid="{{fields.form}}" data-assetkey="{{blockClassName}}">
+	{% if displaySelector == 'modal' %}
+		<div class="{{ blockClassName }}__container-modal">
+			<div class="{{ blockClassName }}__inner">
+				<div class="{{ blockClassName }}__wrapper">
+					{% if fields.enable_title %}
+						{{ include('blocks/standard-content-v3.twig', { fields: fields.form_title, options, block, is_preview, post, nav_menus, site, market_slug, cta_styles, languages, imageSizes}, with_context = false, ignore_missing = true) }}
+					{% endif %}
+					{% if fields.title %}
+						<h2 class="{{ blockClassName }}__title">{{ fields.title }}</h2>
+					{% endif %}
+					{% if fields.description %}
+						<p class="{{ blockClassName }}__description">{{ fields.description }}</p>
+					{% endif %}
+					{% if fields.cta_text and fields.cta_type == 'text' %}
+						<p class="{{ blockClassName }}__cta-text">{{ fields.cta_text }}</p>
+					{% endif %}
+					{% if fields.cta_type == 'icon' and iconImage %}
+						<div class="{{ blockClassName }}__cta-icon">
+							{{ ctaContent|raw }}
+						</div>
+					{% endif %}
+
+					<!-- inline-form -->
+					{{function('do_shortcode', '[cdbform id=' ~ fields.form ~ ']')}}
+					<!-- end-inline-form -->
+					<button class="{{ blockClassName }}__modal-close"></button>
+				</div>
+			</div>
+		</div>
+		<button class="{{ blockClassName }}__modal-open {{ctaClasses}}">{{ctaContent}}</button>
+
+	{% elseif displaySelector == 'inline' %}
+		<div class="{{ blockClassName }}__container-inline">
+			<div class="{{ blockClassName }}__inner">
+				<div class="{{ blockClassName }}__wrapper">
+					{% if fields.title %}
+						{{ fields.title }}
+					{% endif %}
+					<!-- inline-form -->
+					{{function('do_shortcode', '[cdbform id=' ~ fields.form ~ ']')}}
+					<!-- end-inline-form -->
+				</div>
+			</div>
+		</div>
+	{% endif %}
+
+	{{htmlEntryPoint}}
+</section>