ctucx.git: trainsearch

web based trip-planner, fork of https://cyberchaos.dev/yuka/trainsearch

commit 47a697794f5c3ea2d08366dab445741207ade2ad
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(-)
M
src/searchView.js
|
51
++++++++++++++++++++++++++++-----------------------
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);
 	}
 };