From 1702a7efe9fac050182715559d2830a6d809cb66 Mon Sep 17 00:00:00 2001
From: Takashi Tamura <tamuratak@users.noreply.github.com>
Date: Thu, 14 Nov 2024 07:55:13 +0900
Subject: [PATCH] Create notification doms every time.

---
 viewer/components/extensionconnection.ts | 37 +++++++++++-------------
 viewer/latextoybox.css                   |  6 ----
 2 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/viewer/components/extensionconnection.ts b/viewer/components/extensionconnection.ts
index 4c63ed2c..171f22e1 100644
--- a/viewer/components/extensionconnection.ts
+++ b/viewer/components/extensionconnection.ts
@@ -7,38 +7,35 @@ import { ExternalPromise } from '../utils/externalpromise.js'
 export class ExtensionConnection {
     private readonly lwApp: ILatexToyboxPdfViewer
     private connectionPort = new ConnectionPort()
-    private readonly disconnectedNotificationDom = document.createElement('div')
-    private readonly reconnectedNotificationDom = document.createElement('div')
+    private disconnectedNotificationDom: HTMLDivElement | undefined
 
     constructor(lwApp: ILatexToyboxPdfViewer) {
         this.lwApp = lwApp
         this.setupConnectionPort()
-        this.setupDoms()
     }
 
     send(message: ClientRequest) {
         void this.connectionPort.send(message)
     }
 
-    private setupDoms() {
-        this.disconnectedNotificationDom.id = 'notify-disconnected'
-        this.disconnectedNotificationDom.textContent = 'Disconnected from LaTeX Toybox. Trying to reconnect...'
-        this.disconnectedNotificationDom.classList.add('hide')
-        document.body.appendChild(this.disconnectedNotificationDom)
-        this.reconnectedNotificationDom.id = 'notify-reconnected'
-        this.reconnectedNotificationDom.textContent = 'Reconnected to LaTeX Toybox. Happy TeXing!'
-        this.reconnectedNotificationDom.classList.add('hide')
-        document.body.appendChild(this.reconnectedNotificationDom)
-    }
-
     private notifyDisconnected() {
-        this.disconnectedNotificationDom.classList.remove('hide')
+        const dom = document.createElement('div')
+        dom.id = 'notify-disconnected'
+        dom.textContent = 'Disconnected from LaTeX Toybox. Trying to reconnect...'
+        this.disconnectedNotificationDom = dom
+        document.body.appendChild(dom)
     }
 
-    private notifyReconnected() {
-        this.disconnectedNotificationDom.classList.add('hide')
-        this.reconnectedNotificationDom.classList.remove('hide')
-        setTimeout(() => this.reconnectedNotificationDom.classList.add('hide'), 3000)
+    private async notifyReconnected() {
+        const dom = document.createElement('div')
+        dom.id = 'notify-reconnected'
+        dom.textContent = 'Reconnected to LaTeX Toybox. Happy TeXing!'
+        this.disconnectedNotificationDom?.remove()
+        document.body.appendChild(dom)
+        await sleep(3000)
+        dom.classList.add('hide')
+        await sleep(1000)
+        dom.remove()
     }
 
     private setupConnectionPort() {
@@ -77,7 +74,7 @@ export class ExtensionConnection {
                 try {
                     this.connectionPort = new ConnectionPort()
                     await this.connectionPort.readyPromise
-                    this.notifyReconnected()
+                    void this.notifyReconnected()
                     this.setupConnectionPort()
                     console.log('Reconnected: WebScocket to LaTeX Toybox.')
                     return
diff --git a/viewer/latextoybox.css b/viewer/latextoybox.css
index bc5ea935..d74456d9 100644
--- a/viewer/latextoybox.css
+++ b/viewer/latextoybox.css
@@ -215,11 +215,6 @@ html[dir='rtl'] .findbar {
     border: 3px solid red;
 }
 
-#notify-disconnected[class="hide"] {
-    opacity: 0;
-    z-index: -1;
-}
-
 #notify-reconnected {
     position: fixed;
     top: 0;
@@ -230,6 +225,5 @@ html[dir='rtl'] .findbar {
 
 #notify-reconnected[class="hide"] {
     opacity: 0;
-    z-index: -1;
     transition: opacity 0.5s ease-in-out;
 }