make yeast swapper bilingual with case-insensitive detection

This commit is contained in:
2025-12-26 21:41:37 +01:00
parent 442b2a3145
commit 715f86d26d
3 changed files with 22 additions and 17 deletions

View File

@@ -3,15 +3,18 @@
import { browser } from '$app/environment';
import { enhance } from '$app/forms';
import { page } from '$app/stores';
export let item;
export let multiplier = 1;
export let yeastId = 0;
let { item, multiplier = 1, yeastId = 0, lang = 'de' } = $props();
const dispatch = createEventDispatcher();
const isEnglish = $derived(lang === 'en');
const toggleTitle = $derived(isEnglish
? 'Switch between fresh yeast and dry yeast'
: 'Zwischen Frischhefe und Trockenhefe wechseln');
// Get all current URL parameters to preserve state
$: currentParams = browser ? new URLSearchParams(window.location.search) : $page.url.searchParams;
const currentParams = $derived(browser ? new URLSearchParams(window.location.search) : $page.url.searchParams);
function toggleHefe(event) {
// If JavaScript is available, prevent form submission and handle client-side
@@ -54,7 +57,7 @@
{#each Array.from(currentParams.entries()) as [key, value]}
<input type="hidden" name="currentParam_{key}" value={value} />
{/each}
<button type="submit" on:click={toggleHefe} title="Zwischen Frischhefe und Trockenhefe wechseln">
<button type="submit" on:click={toggleHefe} title={toggleTitle}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>
</button>
</form>

View File

@@ -25,8 +25,9 @@ const yeastIds = $derived.by(() => {
if (list.list) {
for (let ingredientIndex = 0; ingredientIndex < list.list.length; ingredientIndex++) {
const ingredient = list.list[ingredientIndex];
if (ingredient.name === "Frischhefe" || ingredient.name === "Trockenhefe" ||
ingredient.name === "Fresh Yeast" || ingredient.name === "Dry Yeast") {
const nameLower = ingredient.name.toLowerCase();
if (nameLower === "frischhefe" || nameLower === "trockenhefe" ||
nameLower === "fresh yeast" || nameLower === "dry yeast") {
ids[`${listIndex}-${ingredientIndex}`] = yeastCounter++;
}
}
@@ -408,9 +409,9 @@ span
<div class=amount>{@html adjust_amount(item.amount, multiplier)} {item.unit}</div>
<div class=name>
{@html item.name.replace("{{multiplier}}", isNaN(parseFloat(item.amount)) ? multiplier : multiplier * parseFloat(item.amount))}
{#if item.name === "Frischhefe" || item.name === "Trockenhefe" || item.name === "Fresh Yeast" || item.name === "Dry Yeast"}
{#if item.name.toLowerCase() === "frischhefe" || item.name.toLowerCase() === "trockenhefe" || item.name.toLowerCase() === "fresh yeast" || item.name.toLowerCase() === "dry yeast"}
{@const yeastId = yeastIds[`${listIndex}-${ingredientIndex}`] ?? 0}
<HefeSwapper {item} {multiplier} {yeastId} />
<HefeSwapper {item} {multiplier} {yeastId} lang={data.lang} />
{/if}
</div>
{/each}

View File

@@ -38,9 +38,10 @@ export async function load({ fetch, params, url}) {
for (let ingredientIndex = 0; ingredientIndex < list.list.length; ingredientIndex++) {
const ingredient = list.list[ingredientIndex];
// Check if this is a yeast ingredient (both German and English names)
const isFreshYeast = ingredient.name === "Frischhefe" || ingredient.name === "Fresh Yeast";
const isDryYeast = ingredient.name === "Trockenhefe" || ingredient.name === "Dry Yeast";
// Check if this is a yeast ingredient (both German and English names, case-insensitive)
const nameLower = ingredient.name.toLowerCase();
const isFreshYeast = nameLower === "frischhefe" || nameLower === "fresh yeast";
const isDryYeast = nameLower === "trockenhefe" || nameLower === "dry yeast";
if (isFreshYeast || isDryYeast) {
// Check if this yeast should be toggled
@@ -57,7 +58,7 @@ export async function load({ fetch, params, url}) {
if (isFreshYeast) {
// Convert fresh yeast to dry yeast
newName = isEnglish ? "Dry Yeast" : "Trockenhefe";
newName = isEnglish ? "Dry yeast" : "Trockenhefe";
if (originalUnit === "Prise") {
// "1 Prise Frischhefe" → "1 Prise Trockenhefe"
@@ -74,7 +75,7 @@ export async function load({ fetch, params, url}) {
}
} else if (isDryYeast) {
// Convert dry yeast to fresh yeast
newName = isEnglish ? "Fresh Yeast" : "Frischhefe";
newName = isEnglish ? "Fresh yeast" : "Frischhefe";
if (originalUnit === "Prise") {
// "1 Prise Trockenhefe" → "1 g Frischhefe"