Merge pull request #4436 from James-Yu/viewer-toolbar

Viewer toolbar hiding tweak
James-Yu · Oct 14, 2024 · ebcbb67 · ebcbb67
2 parents 0920311 + 4adb279
commit ebcbb67
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 28 deletions.
diff --git a/dev/editviewer.py b/dev/editviewer.py
@@ -14,6 +14,7 @@
                     .replace('''<link rel="stylesheet" href="viewer.css">''', '''<link rel="stylesheet" href="viewer.css">\n    <link rel="stylesheet" href="latexworkshop.css">''')
                     .replace('''<script src="../build/pdf.mjs" type="module"></script>''', '''<script src="build/pdf.mjs" type="module"></script>''')
                     .replace('''<script src="viewer.mjs" type="module"></script>''', '''<script src="out/viewer/latexworkshop.js" type="module"></script>''')
+                    .replace('''<div class="toolbar">''', '''<div class="toolbar hide">''')
                     .replace('''<div class="toolbarButtonSpacer"></div>''', '''<!-- <div class="toolbarButtonSpacer"></div> -->''')
             )
 

diff --git a/viewer/components/gui.ts b/viewer/components/gui.ts
@@ -8,7 +8,19 @@ import type { PDFViewerApplicationType } from './interface.js'
 
 declare const PDFViewerApplication: PDFViewerApplicationType
 
-let hideToolbar: number | undefined
+let hideToolbarTimeout: number | undefined
+function hideToolbar(params: Awaited<ReturnType<typeof utils.getParams>>) {
+    if (typeof PDFViewerApplication === 'undefined') {
+        return
+    }
+    if (hideToolbarTimeout === undefined && !PDFViewerApplication.findBar.opened && !PDFViewerApplication.pdfSidebar.isOpen && !PDFViewerApplication.secondaryToolbar.isOpen) {
+        hideToolbarTimeout = setTimeout(() => {
+            const toolbarDom = document.getElementsByClassName('toolbar')[0]
+            toolbarDom.classList.add('hide')
+            hideToolbarTimeout = undefined
+        }, params.toolbar * 1000)
+    }
+}
 export async function patchViewerUI() {
     if (utils.isEmbedded()) {
         // Cannot simply remove this element, as pdf.js indeed require it to
@@ -18,38 +30,34 @@ export async function patchViewerUI() {
 
     const params = await utils.getParams()
 
+    if (params.toolbar === 0) {
+        document.getElementsByClassName('toolbar')[0]?.classList.remove('hide')
+        document.getElementById('viewerContainer')!.style.top = '32px'
+    }
+
+    document.getElementById('outerContainer')!.onmouseleave = () => {
+        if (params.toolbar !== 0) {
+            hideToolbar(params)
+        }
+    }
+
     document.getElementById('outerContainer')!.onmousemove = (e) => {
         if (params.toolbar === 0) {
             return
         }
         if (e.clientY <= 64) {
-            if (hideToolbar) {
-                clearTimeout(hideToolbar)
-                hideToolbar = undefined
+            if (hideToolbarTimeout) {
+                clearTimeout(hideToolbarTimeout)
+                hideToolbarTimeout = undefined
             }
             showToolbar()
         } else {
-            if (typeof PDFViewerApplication === 'undefined') {
-                return
-            }
-            if (hideToolbar === undefined && !PDFViewerApplication.findBar.opened && !PDFViewerApplication.pdfSidebar.isOpen && !PDFViewerApplication.secondaryToolbar.isOpen) {
-                hideToolbar = setTimeout(() => {
-                    const toolbarDom = document.getElementsByClassName('toolbar')[0]
-                    toolbarDom.classList.add('hide')
-                    const containerDom = document.getElementById('viewerContainer')!
-                    containerDom.classList.add('topped')
-                    hideToolbar = undefined
-                }, params.toolbar * 1000)
-            }
+            hideToolbar(params)
         }
     }
 
     document.getElementById('sidebarResizer')?.classList.add('hidden')
     document.getElementById('firstPage')?.previousElementSibling?.classList.add('visibleLargeView')
-    if (params.toolbar !== 0) {
-        document.getElementsByClassName('toolbar')[0]?.classList.add('hide')
-        document.getElementById('viewerContainer')!.classList.add('topped')
-    }
 
     const template = document.createElement('template')
     template.innerHTML =
@@ -241,6 +249,4 @@ export function repositionAnnotation() {
 function showToolbar() {
     const toolbarDom = document.getElementsByClassName('toolbar')[0]
     toolbarDom.classList.remove('hide')
-    const containerDom = document.getElementById('viewerContainer')!
-    containerDom.classList.remove('topped')
 }
diff --git a/viewer/latexworkshop.css b/viewer/latexworkshop.css
@@ -143,11 +143,7 @@ html[dir='rtl'] .findbar {
 }
 
 #viewerContainer {
-    transition: all 0.2s cubic-bezier(.23,.96,.57,.99) !important;
-}
-
-#viewerContainer.topped {
-    top: 0 !important;
+    top: 0;
 }
 
 #pageNumber {

diff --git a/viewer/viewer.html b/viewer/viewer.html
@@ -84,7 +84,7 @@
       </div>  <!-- sidebarContainer -->
 
       <div id="mainContainer">
-        <div class="toolbar">
+        <div class="toolbar hide">
           <div id="toolbarContainer">
             <div id="toolbarViewer" class="toolbarHorizontalGroup">
               <div id="toolbarViewerLeft" class="toolbarHorizontalGroup">