@total_onion/onion-library 3.1.0 → 3.2.0

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

@@ -1,44 +0,0 @@
-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

@@ -1,93 +0,0 @@
-@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

@@ -1,43 +0,0 @@
-{% 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

@@ -1,88 +0,0 @@
-{
-    "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

@@ -1,78 +0,0 @@
-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

@@ -1,38 +0,0 @@
-@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

@@ -1,84 +0,0 @@
-{% 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>