Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Viewer toolbar hiding tweak #4436

Merged
merged 3 commits into from
Oct 14, 2024
Merged

Viewer toolbar hiding tweak #4436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c91e7ce
Viewer container does not move
James-Yu Oct 14, 2024
2acb22a
Toolbar hides if mouse moved out of viewer tab
James-Yu Oct 14, 2024
4adb279
Hide toolbar on viewer launch
James-Yu Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions dev/editviewer.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> -->''')
)

Expand Down
50 changes: 28 additions & 22 deletions viewer/components/gui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 =
Expand Down Expand Up @@ -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')
}
6 changes: 1 addition & 5 deletions viewer/latexworkshop.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion viewer/viewer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading