@total_onion/onion-library 1.0.60 → 1.0.62

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

@@ -1,7 +1,7 @@
 export default function blockinteractionsv3Js(options = {}) {
 	try {
 		const { block } = options;
-		
+
 		const blockId = block.dataset.blockid;
 		const parentBlockId = block.dataset.parentblockid;
 
@@ -14,14 +14,23 @@ export default function blockinteractionsv3Js(options = {}) {
 			const shouldStoreCookie = button?.dataset?.storeCookie === 'true';
 			const cookieKey = `blockClosed_${parentBlockId}`;
 			const wrappingSection = document.querySelector(`[data-blockid="${parentBlockId}"]`);
-			
+
 			if (getCookie(cookieKey) === 'true') {
-				wrappingSection.remove();
+				wrappingSection.style.animation = 'none';
+				wrappingSection.style.display = 'none';
 				return;
 			}
 
-			button.addEventListener('click', () => {
-				wrappingSection.remove();
+			button.addEventListener('click', (e) => {
+				console.log(e.currentTarget.dataset);
+				wrappingSection.style.animation = 'none';
+				wrappingSection.offsetHeight; // trigger reflow
+				wrappingSection.style.animation = `${e.currentTarget.dataset.animationname} ${e.currentTarget.dataset.animationduration}s forwards reverse`;
+
+				setTimeout(() => {
+					wrappingSection.style.display = 'none';
+				}, e.currentTarget.dataset.animationduration * 1000);
+
 				if (shouldStoreCookie) {
 					setCookie(cookieKey, 'true', 7);
 				}

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

@@ -16,6 +16,8 @@
 	{% set blockInteractionsEnabled = fields.enable_block_interactions %}
 	{% set enableInteractionsButton = fields.enable_interactions_button %}
 	{% set interactionsButtonType = fields.interactions_button_type %}
+	{% set animationName = fields.animation_name|ru %}
+	{% set animationDuration = fields.animation_duration|ru %}
 
 	{% if blockInteractionsEnabled %}
 
@@ -25,7 +27,7 @@
 				{% set closeButtonIcon = get_image(fields.upload_close_icon) %}
 				{% set closeButtonCookie = fields.enable_closed_cookie %}
 
-				<button class="block-interactions-v3__block-close-button" data-store-cookie="{{closeButtonCookie ? 'true' : 'false' }}">
+				<button class="block-interactions-v3__block-close-button" data-animationname="{{animationName}}" data-animationduration="{{animationDuration}}" data-store-cookie="{{closeButtonCookie ? 'true' : 'false' }}">
 					<img class="block-interactions-v3__block-close-button-icon" src="{{closeButtonIcon.src}}">
 				</button>
 			{% endif %}

package/components/block-block-interactions-v3/group_687e1575ba23d.json

@@ -160,7 +160,9 @@
             "allow_null": 0,
             "ui": 0,
             "ajax": 0,
-            "min": ""
+            "min": "",
+            "create_options": 0,
+            "save_options": 0
         },
         {
             "key": "field_687e40dc485e6",
@@ -229,6 +231,148 @@
             "ui": 1,
             "style": ""
         },
+        {
+            "key": "field_687f8a348086a",
+            "label": "Enable Animations",
+            "name": "enable_animations",
+            "aria-label": "",
+            "type": "true_false",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_687e4099485e5",
+                        "operator": "==",
+                        "value": "__close-block"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 1,
+            "message": "",
+            "default_value": 0,
+            "allow_in_bindings": 1,
+            "ui_on_text": "",
+            "ui_off_text": "",
+            "ui": 1,
+            "style": ""
+        },
+        {
+            "key": "field_687f8a5c8086b",
+            "label": "Close Animations",
+            "name": "",
+            "aria-label": "",
+            "type": "tab",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_687f8a348086a",
+                        "operator": "==",
+                        "value": "1"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 1,
+            "placement": "top",
+            "endpoint": 0,
+            "no_preference": 0,
+            "selected": 0
+        },
+        {
+            "key": "field_687f8ed3e0c7c",
+            "label": "Close Animation Message",
+            "name": "",
+            "aria-label": "",
+            "type": "message",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_687f8a348086a",
+                        "operator": "==",
+                        "value": "1"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 2,
+            "message": "In the parent block, you need to set your fade in animation, what ever that animation name is you need to pop that in here also, and it will play in reverse when the button is clicked",
+            "new_lines": "wpautop",
+            "esc_html": 0
+        },
+        {
+            "key": "field_687f8b348086c",
+            "label": "name",
+            "name": "name",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 1,
+            "clone": [
+                "field_659e9ca0d24cc"
+            ],
+            "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_687f912e94fbc",
+            "label": "Duration",
+            "name": "duration",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "wpml_cf_preferences": 1,
+            "clone": [
+                "field_65ac30dc321c0"
+            ],
+            "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_687e48d871084",
             "label": "Block Padding",
@@ -390,5 +534,5 @@
     "acfe_display_title": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1753106703
+    "modified": 1753190749
 }

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

@@ -1,17 +1,14 @@
-export default function formselectionv3Js(options = {}) {
+export default function formselectionv3Js ( options = {} ) {
 	try {
-		const {block} = options;
+		const { block } = options;
 
 		// modal logic
-		const formContainer = block.querySelector(
-			'.form-selection-v3__container-modal'
-		);
+		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'
-		);
+		const closeModal = block.querySelector('.form-selection-v3__modal-close');
+		
 
-		if (formContainer && openModal) {
+		if (formContainer && openModal ) {
 			openModal.addEventListener('click', function (e) {
 				e.preventDefault();
 				document.documentElement.classList.add('lock-position');
@@ -33,9 +30,7 @@ export default function formselectionv3Js(options = {}) {
 			);
 
 			inputs.forEach((input) => {
-				const wrapper = input.closest(
-					'.cdb_form_field, .cdb_form_gdpr_information, .cdb_form_privacypolicy_information'
-				);
+				const wrapper = input.closest('.cdb_form_field, .cdb_form_gdpr_information, .cdb_form_privacypolicy_information');
 
 				if (!wrapper) return;
 
@@ -67,14 +62,17 @@ export default function formselectionv3Js(options = {}) {
 			});
 		}
 
-		const submit = block.querySelector('.cdb-submit');
+		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);
+
+	} catch ( error ) {
+		console.error( error );
 	}
 }

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

@@ -1,16 +1,16 @@
-@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
+@use 'Assets/scss/modules/library-modules/core-mixins/core-mixins'; 
 @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
 @use 'Assets/scss/theme/breakpoints';
 @use 'Assets/scss/blocks/form-selection-v3/form-selection-v3-extra';
 
 .form-selection-v3 {
 	pointer-events: all;
-
+	
 	&__container-modal {
 		display: none;
 		position: fixed;
 		left: 0;
-		// top: var(--global-site-header-height);
+    	// top: var(--global-site-header-height);
 		top: 74px;
 		width: 100vw;
 		height: calc(100vh - 103px);

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

@@ -8,9 +8,10 @@
 {% set sectionStyles =  styleEntryPoint %}
 
 {% set displaySelector = fields.selector_type|ru %}
+{% set renderDynamic = fields.render_dynamic|default(0) %}
 
 {{previewEntryPoint}}
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" style="{{sectionStyles}}" data-assetkey="{{blockClassName}}">
+<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">
@@ -18,7 +19,9 @@
 					{% if fields.title %}
 						{{ fields.title }}
 					{% endif %}
+					<!-- inline-form -->
 					{{function('do_shortcode', '[cdbform id=' ~ fields.form ~ ']')}}
+					<!-- end-inline-form -->
 					<button class="{{ blockClassName }}__modal-close"></button>
 				</div>
 			</div>
@@ -31,7 +34,9 @@
 					{% if fields.title %}
 						{{ fields.title }}
 					{% endif %}
+					<!-- inline-form -->
 					{{function('do_shortcode', '[cdbform id=' ~ fields.form ~ ']')}}
+					<!-- end-inline-form -->
 				</div>
 			</div>
 		</div>

package/components/block-form-selection-v3/group_68752e7949e53.json

@@ -37,7 +37,9 @@
 				"id": ""
 			},
 			"wpml_cf_preferences": 3,
-			"post_type": ["cdbform"],
+			"post_type": [
+                "cdbform"
+            ],
 			"post_status": "",
 			"taxonomy": "",
 			"return_format": "id",
@@ -244,6 +246,32 @@
 			"allow_custom": 0,
 			"search_placeholder": "",
 			"min": ""
+		},
+		{
+			"key": "field_687f754d463f6",
+			"label": "Child Pattern Settings",
+			"name": "child_pattern_settings",
+			"aria-label": "",
+			"type": "clone",
+			"instructions": "",
+			"required": 0,
+			"conditional_logic": 0,
+			"wrapper": {
+				"width": "",
+				"class": "",
+				"id": ""
+			},
+			"wpml_cf_preferences": 3,
+			"clone": ["group_670b7ac92563c"],
+			"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": [
@@ -264,11 +292,13 @@
 	"active": true,
 	"description": "",
 	"show_in_rest": 0,
-	"acfe_autosync": ["json"],
+	"acfe_autosync": [
+        "json"
+    ],
 	"acfml_field_group_mode": "localization",
 	"acfe_form": 0,
 	"acfe_display_title": "",
 	"acfe_meta": "",
 	"acfe_note": "",
-	"modified": 1752666084
+	"modified": 1752666089
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "1.0.60",
+	"version": "1.0.62",
 	"description": "Component library",
 	"main": "index.js",
 	"scripts": {