From a68a55205ed189250693368af7028031a70631d9 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Tue, 29 Mar 2022 11:39:33 +1100
Subject: Update comments, adjust names, do minor refactors

---
 src/components/TileInfoModal.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

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

diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index cfa1a10..7549375 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -3,6 +3,7 @@ import {defineComponent, PropType} from 'vue';
 import CloseIcon from './icon/CloseIcon.vue';
 import {TolNode} from '../tol';
 
+// Displays information about a tree-of-life node
 export default defineComponent({
 	props: {
 		tolNode: {type: Object as PropType<TolNode>, required: true},
@@ -16,26 +17,26 @@ export default defineComponent({
 				height: this.uiOpts.infoModalImgSz + 'px',
 				backgroundSize: 'cover',
 				borderRadius: this.uiOpts.borderRadius + 'px',
-			}
+			};
 		},
 	},
 	methods: {
-		closeClicked(evt: Event){
-			if (evt.target == this.$el || (this.$refs.closeIcon.$el as HTMLElement).contains(evt.target as HTMLElement)){
+		onCloseClick(evt: Event){
+			if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){
 				this.$emit('info-modal-close');
 			}
 		},
 	},
 	components: {CloseIcon, },
-	emits: ['info-modal-close'],
+	emits: ['info-modal-close', ],
 });
 </script>
 
 <template>
-<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked">
+<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onCloseClick">
 	<div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4
 		bg-stone-50 rounded-md shadow shadow-black">
-		<close-icon @click.stop="closeClicked" ref="closeIcon"
+		<close-icon @click.stop="onCloseClick" ref="closeIcon"
 			class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>
 		<h1 class="text-center text-xl font-bold mb-2">{{tolNode.name}}</h1>
 		<hr class="mb-4 border-stone-400"/>
-- 
cgit v1.2.3