@total_onion/onion-library 3.0.49 → 3.2.0

package/components/block-cocktail-recipe-v3/cocktail-recipe-v3.js

@@ -1,127 +0,0 @@
-export default function cocktailrecipev3Js(options = {}) {
-	try {
-		const {block} = options;
-		const valueEl = block.querySelector('[data-servings-value]');
-		const decBtn = block.querySelector('[data-servings-dec]');
-		const incBtn = block.querySelector('[data-servings-inc]');
-		const decWrapper = block.querySelector('.dec-btn-wrapper');
-		const amountEls = block.querySelectorAll('[data-ingredients]');
-		const unitToggle = document.querySelector('[data-unit-toggle]');
-		const checkbox = unitToggle?.querySelector('[data-unit-checkbox]');
-
-		amountEls.forEach((el) => {
-			if (!el.dataset.baseAmount) {
-				el.dataset.baseAmount = el.dataset.amount || '';
-			}
-			if (!el.dataset.baseUnit) {
-				el.dataset.baseUnit = el.dataset.unit || '';
-			}
-		});
-
-		let currentUnit = 'ml';
-		const ML_TO_OZ = 0.033814;
-
-		const getServings = () => parseInt(valueEl.textContent, 10) || 1;
-		const setServings = (n) => {
-			valueEl.textContent = `${n}x`;
-			updateInactiveState(n);
-		};
-
-		const updateInactiveState = (value) => {
-			if (!decWrapper) return;
-			if (value <= 1) decWrapper.classList.add('inactive');
-			else decWrapper.classList.remove('inactive');
-		};
-
-		const formatNumber = (num, unit) => {
-			if (unit === 'oz')
-				return (Math.round(num * 100) / 100)
-					.toFixed(2)
-					.replace(/\.?0+$/, '');
-			if (unit === 'ml')
-				return (Math.round(num * 10) / 10)
-					.toString()
-					.replace(/\.0$/, '');
-			if (unit === 'cl')
-				return (Math.round(num * 100) / 100)
-					.toString()
-					.replace(/\.0$/, '');
-			return (Math.round(num * 100) / 100)
-				.toString()
-				.replace(/\.?0+$/, '');
-		};
-
-		const convert = (value, fromUnit, toUnit) => {
-			if (isNaN(value)) return value;
-			if (fromUnit === toUnit) return value;
-
-			if (fromUnit === 'ml' && toUnit === 'oz') return value * ML_TO_OZ;
-			if (fromUnit === 'oz' && toUnit === 'ml') return value / ML_TO_OZ;
-
-			return value;
-		};
-
-		const renderIngredients = () => {
-			const servings = getServings();
-
-			amountEls.forEach((el) => {
-				const baseAmount = parseFloat(el.dataset.baseAmount);
-				const baseUnit = el.dataset.baseUnit || '';
-				const name = el.dataset.name || '';
-
-				if (isNaN(baseAmount)) {
-					el.textContent = name;
-					return;
-				}
-
-				let amount = baseAmount * servings;
-				let displayUnit = baseUnit;
-
-				if (
-					(baseUnit === 'ml' || baseUnit === 'oz') &&
-					currentUnit !== baseUnit
-				) {
-					amount = convert(amount, baseUnit, currentUnit);
-					displayUnit = currentUnit;
-				}
-
-				const numStr = formatNumber(amount, displayUnit);
-				const unitStr = displayUnit ? displayUnit : '';
-
-				el.textContent =
-					`${numStr}${unitStr ? unitStr : ''}${unitStr ? ' ' : ' '}${name}`.trim();
-			});
-		};
-
-		decBtn?.addEventListener('click', () => {
-			const cur = getServings();
-			if (cur > 1) {
-				setServings(cur - 1);
-				renderIngredients();
-			}
-		});
-
-		incBtn?.addEventListener('click', () => {
-			const cur = getServings();
-			if (cur < 99) {
-				setServings(cur + 1);
-				renderIngredients();
-			}
-		});
-
-		if (checkbox) {
-			checkbox.addEventListener('change', (e) => {
-				currentUnit = e.target.checked ? 'oz' : 'ml';
-				renderIngredients();
-			});
-		}
-
-		setServings(getServings() || 1);
-		currentUnit = 'ml';
-		renderIngredients();
-		updateInactiveState(getServings());
-
-	} catch (error) {
-		console.error(error);
-	}
-}

package/components/block-cocktail-recipe-v3/cocktail-recipe-v3.scss

@@ -1,345 +0,0 @@
-@use '../fields-core-mixins-v3/core-mixins-v3';
-@use '../fields-core-functions-v3/core-functions-v3';
-@use '../../breakpoints';
-@layer base-styles {
-	.cocktail-recipe-v3 {
-		pointer-events: all;
-
-		&__ingredients-container {
-			display: flex;
-			flex-direction: column;
-			gap: core-functions-v3.fluidSize(20);
-			padding-bottom: core-functions-v3.fluidSize(50);
-
-			.ingredients-title {
-				padding-block: core-functions-v3.fluidSize(10);
-				font-family: var(--primary-font-family);
-				font-size: core-functions-v3.fontSize(80);
-				font-weight: 500;
-				text-transform: uppercase;
-				text-box-edge: cap alphabetic;
-				text-box-trim: trim-both;
-
-				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-					font-size: core-functions-v3.fontSize(160);
-				}
-			}
-		}
-
-		&__servings {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding-block: core-functions-v3.fluidSize(15);
-			border-bottom: 1px solid #faf8ec4d;
-
-			.servings-title {
-				font-family: var(--secondary-font-family);
-				font-size: core-functions-v3.fontSize(26);
-				font-weight: 500;
-			}
-
-			.servings-control-wrapper {
-				display: flex;
-				align-items: center;
-				gap: core-functions-v3.fluidSize(15);
-
-				.dec-btn-wrapper {
-					width: 40px;
-					height: 40px;
-					border: 1px solid #faf8ec;
-					overflow: hidden;
-
-					// styled within the child block
-
-					// .servings-dec-btn {
-					// 	cursor: pointer;
-					// 	background-color: #0054ff;
-					// 	color: #faf8ec;
-					// 	font-size: 28px;
-					// 	padding-bottom: 4px;
-					// 	width: 100%;
-					// 	height: 100%;
-					// 	border: unset;
-					// 	transform: translateX(0);
-					// 	transition: transform 0.3s ease;
-
-					// 	&::after {
-					// 		content: '\2212';
-					// 		color: #0054ff;
-					// 		padding-top: 4px;
-					// 		width: 38px;
-					// 		height: 38px;
-					// 		position: absolute;
-					// 		top: 0;
-					// 		right: -38px;
-					// 		background-color: #faf8ec;
-					// 	}
-					// }
-
-					&:hover {
-						.servings-dec-btn {
-							transform: translateX(-100%);
-						}
-					}
-				}
-
-				.dec-btn-wrapper.inactive {
-					opacity: 0.4;
-					pointer-events: none;
-				}
-
-				.servings-current {
-					font-family: var(--secondary-font-family);
-					font-size: core-functions-v3.fontSize(26);
-					font-weight: 500;
-					display: inline-block;
-					width: core-functions-v3.fluidSize(60);
-					text-align: center;
-
-					@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-						font-size: core-functions-v3.fontSize(30);
-					}
-				}
-
-				.inc-btn-wrapper {
-					cursor: pointer;
-					width: 40px;
-					height: 40px;
-					border: 1px solid #faf8ec;
-					overflow: hidden;
-
-					// styled within the child block
-
-					// 	.servings-inc-btn {
-					// 		cursor: pointer;
-					// 		color: #0054ff;
-					// 		font-size: 30px;
-					// 		background-color: #faf8ec;
-					// 		width: 100%;
-					// 		height: 100%;
-					// 		border: unset;
-					// 		transform: translateX(-100%);
-					// 		transition: transform 0.3s ease;
-
-					// 		&::after {
-					// 			content: '+';
-					// 			padding-top: 2px;
-					// 			color: #faf8ec;
-					// 			width: 38px;
-					// 			height: 38px;
-					// 			position: absolute;
-					// 			top: 0;
-					// 			right: -38px;
-					// 			background-color: #0054ff;
-					// 		}
-					// 	}
-
-					&:hover {
-						.servings-inc-btn {
-							transform: translateX(0);
-						}
-					}
-				}
-			}
-		}
-
-		&__unit-toggle {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding-top: core-functions-v3.fluidSize(10);
-
-			.unit-text {
-				font-family: var(--tertiary-font-family);
-				font-size: core-functions-v3.fontSize(18);
-				font-weight: 700;
-
-				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-					font-size: core-functions-v3.fontSize(22);
-				}
-			}
-
-			.unit-toggle-wrapper {
-				display: flex;
-				align-items: center;
-				gap: core-functions-v3.fluidSize(20);
-
-				.checkbox-wrapper input[type='checkbox'] {
-					display: none;
-					visibility: hidden;
-				}
-
-				.checkbox-wrapper .block {
-					position: relative;
-					clear: both;
-					float: left;
-				}
-
-				.checkbox-wrapper label {
-					width: 64px;
-					height: 36px;
-					box-sizing: border-box;
-					border: 1px solid;
-					float: left;
-					border-radius: 100px;
-					position: relative;
-					cursor: pointer;
-					transition: 0.3s ease;
-					color: #faf8ec;
-				}
-				.checkbox-wrapper
-					input[type='checkbox']:checked
-					+ label:before {
-					left: 31px;
-				}
-				.checkbox-wrapper label:before {
-					transition: 0.3s ease;
-					content: '';
-					width: 28px;
-					height: 28px;
-					position: absolute;
-					background: #faf8ec;
-					left: 3px;
-					top: 3px;
-					box-sizing: border-box;
-					color: black;
-					border-radius: 50%;
-				}
-			}
-		}
-
-		.ingredients-wrapper {
-			display: flex;
-			align-items: center;
-			gap: core-functions-v3.fluidSize(15);
-
-			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-				gap: core-functions-v3.fluidSize(30);
-			}
-
-			.ingredient-image {
-				max-width: core-functions-v3.fluidSize(50);
-				aspect-ratio: 1;
-				object-fit: cover;
-
-				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-					max-width: core-functions-v3.fluidSize(100);
-				}
-			}
-
-			.ingredient-text {
-				font-size: core-functions-v3.fontSize(18);
-				font-family: var(--tertiary-font-family);
-				font-weight: 400;
-
-				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-					font-size: core-functions-v3.fontSize(22);
-				}
-			}
-		}
-
-		&__equipment-container {
-			display: flex;
-			flex-direction: column;
-			gap: core-functions-v3.fluidSize(20);
-			padding-bottom: core-functions-v3.fluidSize(100);
-
-			@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-				padding-bottom: core-functions-v3.fluidSize(180);
-			}
-
-			.equipments-title {
-				font-family: var(--secondary-font-family);
-				font-size: core-functions-v3.fontSize(26);
-				font-weight: 500;
-				padding-block: core-functions-v3.fluidSize(20);
-				border-bottom: 1px solid #faf8ec4d;
-
-				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-					padding-block: core-functions-v3.fluidSize(10);
-				}
-			}
-
-			.equipments-wrapper {
-				display: flex;
-				align-items: center;
-				gap: core-functions-v3.fluidSize(15);
-
-				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-					gap: core-functions-v3.fluidSize(30);
-				}
-
-				.equipment-image {
-					max-width: core-functions-v3.fluidSize(50);
-					aspect-ratio: 1;
-					object-fit: cover;
-
-					@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-						max-width: core-functions-v3.fluidSize(100);
-					}
-				}
-
-				.equipment-text {
-					font-family: var(--tertiary-font-family);
-					font-size: core-functions-v3.fontSize(18);
-					font-weight: 400;
-
-					@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-						font-size: core-functions-v3.fontSize(22);
-					}
-				}
-			}
-		}
-
-		&__instructions-container {
-			.instructions-title {
-				font-family: var(--primary-font-family);
-				font-size: core-functions-v3.fontSize(70);
-				font-weight: 500;
-				text-transform: uppercase;
-				padding-block: core-functions-v3.fluidSize(10);
-				text-box-edge: cap alphabetic;
-				text-box-trim: trim-both;
-
-				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-					padding-block: core-functions-v3.fluidSize(40);
-					font-size: core-functions-v3.fontSize(160);
-				}
-			}
-
-			.instructions-wrapper {
-				display: flex;
-				align-items: flex-start;
-				gap: core-functions-v3.fluidSize(20);
-				padding-block: core-functions-v3.fluidSize(30);
-				border-top: 1px solid #faf8ec4d;
-
-				@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-					align-items: center;
-				}
-
-				.instructions-number {
-					font-family: var(--secondary-font-family);
-					font-size: core-functions-v3.fontSize(30);
-					padding-inline: core-functions-v3.fluidSize(10);
-					font-weight: 500;
-					text-box-trim: trim-both;
-					text-box-edge: cap alphabetic;
-				}
-
-				.instructions-text {
-					font-family: var(--tertiary-font-family);
-					font-size: core-functions-v3.fontSize(24);
-					font-weight: 300;
-					text-box-trim: trim-both;
-					text-box-edge: cap alphabetic;
-
-					@include core-mixins-v3.device(breakpoints.$tabPortrait) {
-						font-size: core-functions-v3.fontSize(30);
-					}
-				}
-			}
-		}
-	}
-}

package/components/block-cocktail-recipe-v3/cocktail-recipe-v3.twig

@@ -1,93 +0,0 @@
-{% set blockClassName = "cocktail-recipe-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}}
-
-{% set selectedPost = Post(fields.cocktail_select) %}
-{% set ingredients = selectedPost.meta('ingredients_recipe') %}
-{% set equipments = selectedPost.meta('other_equipment') %}
-{% set instructions = selectedPost.meta('instruction_steps') %}
-
-<style>
-	.{{blockClassName}}.{{block.id}}{
-		{{sectionStyles}}
-	}
-</style>
-<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{loop ? block.className.index ~ '-' ~ loop.index : ''}} {{classNameEntryPoint}} {{block.id}} " {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
-	{{htmlEntryPoint}}
-
-	<div class="{{blockClassName}}__ingredients-container">
-		<h1 class="ingredients-title">{{ selectedPost.ingredients_title }}</h1>
-
-		<div class="{{blockClassName}}__servings" data-servings-controls>
-			<h3 class="servings-title">Serve:</h3>
-			<div class="servings-control-wrapper">
-				<div class="dec-btn-wrapper">
-					<button type="button" class="servings-dec-btn" data-servings-dec aria-label="Decrease servings">-</button>
-				</div>
-				<span class="servings-current" data-servings-value>1x</span>
-				<div class="inc-btn-wrapper">
-					<button type="button" class="servings-inc-btn" data-servings-inc aria-label="Increase servings">+</button>
-				</div>
-			</div>
-		</div>
-
-		{% if fields.enable_unit_transform %}
-			<div class="{{blockClassName}}__unit-toggle" data-unit-toggle>
-				<p class="unit-label unit-text">Unit</p>
-				<div class="unit-toggle-wrapper">
-					<span class="unit-option unit-text" data-unit="ml">ml</span>
-					<div class="checkbox-wrapper">
-						<div class="block">
-							<input data-index="0" id="checkbox" data-unit-checkbox type="checkbox"/>
-							<label for="checkbox"></label>
-						</div>
-					</div>
-					<span class="unit-option unit-text" data-unit="{{ fields.unit_transform }}">{{ fields.unit_transform }}</span>
-				</div>
-			</div>
-		{% endif %}
-
-
-		{% for ingredient in ingredients %}
-			<div class="ingredients-wrapper">
-				{% set ingredientSelect = ingredient.ingredients_list %}
-				{% set image = get_image(options.ingredient[ingredientSelect].ingredient_image) %}
-				<img class="ingredient-image" src="{{ image }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}">
-				<p class="ingredient-text" data-ingredients data-amount="{{ ingredient.amount }}" data-unit="{{ ingredient.default_unit }}" data-name="{{ ingredient.name }}">{{ ingredient.amount }}{{ ingredient.default_unit }}
-					{{ ingredient.name }}</p>
-			</div>
-		{% endfor %}
-	</div>
-
-	{% if selectedPost.enable_equipment %}
-		<div class="{{blockClassName}}__equipment-container">
-			<h3 class="equipments-title">{{ selectedPost.equipment_title }}</h3>
-
-			{% for equipment in equipments %}
-				<div class="equipments-wrapper">
-					{% set equipmentSelect = equipment.equipment_list %}
-					{% set image = get_image(options.equipments[equipmentSelect].equipment_image) %}
-					<img class="equipment-image" src="{{ image }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}">
-					<p class="equipment-text">{{ equipment.equipment_name }}</p>
-				</div>
-			{% endfor %}
-		</div>
-	{% endif %}
-
-	<div class="{{blockClassName}}__instructions-container">
-		<h1 class="instructions-title">{{ selectedPost.instructions_title }}</h1>
-
-		{% for index, instruction in instructions %}
-			<div class="instructions-wrapper">
-				<span class="instructions-number">{{index + 1}}</span>
-				<p class="instructions-text">{{ instruction.instruction }}</p>
-			</div>
-		{% endfor %}
-	</div>
-
-</section>