breadone/Recipie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enter key navigation for ingredient fields, great for mobile

Browse Source
This commit is contained in:
June 2025-08-15 15:21:48 +12:00
parent 4dc45b4e70
commit a9e4d5fb50
Signed by: breadone
GPG Key ID: FDC19FE143200483
1 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/script/newRecipe.ts
View File

@ -29,12 +29,26 @@ document.addEventListener('DOMContentLoaded', function() {
// show plus button once the user types in the text fields
ingredientFields.forEach(f => {
f.addEventListener('input', showAddIngredientButton)
f.addEventListener('keyup', showAddIngredientButton)
f.addEventListener('keydown', showAddIngredientButton)
})
// onclick for add button
document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient);
// for pressing enter to reset cursor
ingredientFields[2].addEventListener('keyup', e => {if (e.key === 'Enter') addIngredient()} )
// Enter key navigation for ingredient fields
ingredientFields[0].addEventListener('keydown', e => {
if (e.key === 'Enter') {
ingredientFields[1].focus() // Move from qty to unit
}
})
ingredientFields[1].addEventListener('keydown', e => {
if (e.key === 'Enter') {
ingredientFields[2].focus() // Move from unit to name
}
})
// for pressing enter to add ingredient (on the last field)
ingredientFields[2].addEventListener('keydown', e => {if (e.key === 'Enter') addIngredient()} )
// Initial check for button state
showAddIngredientButton()
@ -92,7 +106,7 @@ function renderSteps() {
const newStep = document.createElement('div')
// times like this i regret using astro
newStep.innerHTML = `
<div class="flex justify-between items-start mb-2">
<div class="flex justify-between items-start ">
<div class="flex flex-col">
<p class="text-bold text-[10pt]">Step ${displayIndex + 1}</p>
<div class="flex flex-col md:flex-row md:items-stretch">
@ -102,6 +116,7 @@ function renderSteps() {
<div class="flex flex-col gap-1">
<button id="move-up-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === 0 ? 'disabled' : ''}>↑</button>
<button id="move-down-btn" class="px-2 py-1 bg-white/10 hover:bg-white/30 transition-colors rounded text-xs" data-step-index="${step.index}" ${displayIndex === steps.length - 1 ? 'disabled' : ''}>↓</button>
</div>
</div>