Enter key navigation for ingredient fields, great for mobile

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

View File

@ -29,12 +29,26 @@ document.addEventListener('DOMContentLoaded', function() {
// show plus button once the user types in the text fields // show plus button once the user types in the text fields
ingredientFields.forEach(f => { ingredientFields.forEach(f => {
f.addEventListener('input', showAddIngredientButton) f.addEventListener('input', showAddIngredientButton)
f.addEventListener('keyup', showAddIngredientButton) f.addEventListener('keydown', showAddIngredientButton)
}) })
// onclick for add button // onclick for add button
document.querySelector('#add-ingredient-btn')?.addEventListener('click', addIngredient); 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 // Initial check for button state
showAddIngredientButton() showAddIngredientButton()
@ -92,7 +106,7 @@ function renderSteps() {
const newStep = document.createElement('div') const newStep = document.createElement('div')
// times like this i regret using astro // times like this i regret using astro
newStep.innerHTML = ` newStep.innerHTML = `
<div class="flex justify-between items-start mb-2"> <div class="flex justify-between items-start ">
<div class="flex flex-col"> <div class="flex flex-col">
<p class="text-bold text-[10pt]">Step ${displayIndex + 1}</p> <p class="text-bold text-[10pt]">Step ${displayIndex + 1}</p>
<div class="flex flex-col md:flex-row md:items-stretch"> <div class="flex flex-col md:flex-row md:items-stretch">
@ -102,6 +116,7 @@ function renderSteps() {
<div class="flex flex-col gap-1"> <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-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> <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>
</div> </div>