Create notification doms every time.

tamuratak · Nov 14, 2024 · 1702a7e · 1702a7e
1 parent a7f217c
commit 1702a7e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 26 deletions.
diff --git 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
@@ -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;
 }