@total_onion/onion-library 3.2.0 → 3.2.2

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

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

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

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