From 356ffa2250c66c442cfa8c4e638ca53926396a65 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 15 Jan 2023 12:25:08 +1100
Subject: Add visual indication of pan/zoom failure

Add tick display data to Tick objects
Add 'movement fail' divs
Add animateWithClass() utility function
Add animate-show-then-fade class
---
 src/components/SearchModal.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

(limited to 'src/components/SearchModal.vue')

diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index dd387e1..ade86be 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -31,7 +31,7 @@
 import {ref, computed, onMounted, PropType} from 'vue';
 import SearchIcon from './icon/SearchIcon.vue';
 import InfoIcon from './icon/InfoIcon.vue';
-import {HistEvent, queryServer, EventInfoJson, jsonToEventInfo, SuggResponseJson} from '../lib';
+import {HistEvent, queryServer, EventInfoJson, jsonToEventInfo, SuggResponseJson, animateWithClass} from '../lib';
 import {useStore} from '../store';
 import {RBTree} from '../rbtree';
 
@@ -187,12 +187,8 @@ async function resolveSearch(eventTitle: string){
 			return;
 		}
 		emit('search', eventInfo.event);
-	} else {
-		// Trigger failure animation
-		let input = inputRef.value!;
-		input.classList.remove('animate-red-then-fade');
-		input.offsetWidth; // Triggers reflow
-		input.classList.add('animate-red-then-fade');
+	} else { // Trigger failure animation
+		animateWithClass(inputRef.value!, 'animate-red-then-fade');
 	}
 }
 
-- 
cgit v1.2.3

