commit 47a697794f5c3ea2d08366dab445741207ade2ad
parent 52890604e9643527b38740d3c5ebd98efa81dab3
Author: Katja (ctucx) <git@ctu.cx>
Date: Sat, 25 Jan 2025 20:12:33 +0100
parent 52890604e9643527b38740d3c5ebd98efa81dab3
Author: Katja (ctucx) <git@ctu.cx>
Date: Sat, 25 Jan 2025 20:12:33 +0100
searchView.js: improve touch support on suggestions
1 file changed, 28 insertions(+), 23 deletions(-)
diff --git a/src/searchView.js b/src/searchView.js @@ -398,6 +398,7 @@ const showSuggestions = (id) => { numEnter = 0; showElement(ElementById(`${id}Suggestions`)); }; + const hideSuggestions = (id) => { const suggestionsElement = ElementById(`${id}Suggestions`); @@ -406,7 +407,7 @@ const hideSuggestions = (id) => { }; const suggestionsTemplate = (data, inputId) => data.map((element, index) => html` - <p id="${index == 0 ? inputId+'Selected' : ''}" class="suggestion" @click=${() => setSuggestion(encodeURI(JSON.stringify(element)), inputId)}>${formatName(element)}</p> + <p id="${index == 0 ? inputId+'Selected' : ''}" class="suggestion" @click=${(event) => setSuggestion(encodeURI(JSON.stringify(element)), inputId, event.pointerType)}>${formatName(element)}</p> `); const loadSuggestions = async (event) => { @@ -431,17 +432,38 @@ const loadSuggestions = async (event) => { render(suggestionsTemplate(data, elementId), ElementById(`${elementId}Suggestions`)); }; -export const setSuggestion = (data, inputId) => { +const focusNextElement = (currentElementId) => { + switch (currentElementId) { + case 'from': + ElementById('to').focus(); + + if (!elementHidden(ElementById('via'))) { + ElementById('via').focus(); + } + break; + + case 'via': + ElementById('to').focus(); + break; + + case 'to': + hideSuggestions(currentElementId); + ElementById('go').click(); + break; + } +}; + +const setSuggestion = (data, inputId, pointerType) => { if (typeof data === 'string') { data = JSON.parse(decodeURI(data)); } - hideSuggestions(inputId); - ElementById(inputId).value = formatName(data); suggestions[inputId] = data; -}; + hideSuggestions(inputId); + if (pointerType !== '') focusNextElement(inputId); +}; const mouseOverHandler = (event) => event.target.parentElement.classList.add('mouseover'); const mouseOutHandler = (event) => event.target.parentElement.classList.remove('mouseover'); @@ -458,24 +480,7 @@ const keyupHandler = (event) => { if (numEnter === 2 && eventElement.value === formatName(suggestions[eventElement.id])) { numEnter = 0; - switch (eventElement.id) { - case 'from': - ElementById('to').focus(); - - if (!elementHidden(ElementById('via'))) { - ElementById('via').focus(); - } - break; - - case 'via': - ElementById('to').focus(); - break; - - case 'to': - hideSuggestions(eventElement.id); - ElementById('go').click(); - break; - } + focusNextElement(eventElement.id); } };