diff --git a/ui/script.js b/ui/script.js index 965052e..52f3dd5 100755 --- a/ui/script.js +++ b/ui/script.js @@ -19,6 +19,7 @@ const picsHolder = document.getElementById('picsHolder') const video = document.getElementById('video') const videoHolder = document.getElementById('videoHolder') const manualUpload = document.getElementById('clickupload') +const pdf = document.getElementById('pdf') const help = document.getElementById('help') const okBadge = document.getElementById('ok') const sadBadge = document.getElementById('sad') @@ -105,6 +106,9 @@ window.onClickLink = e => { // let html be displayed naturally } else if (a.innerText.endsWith('.html')) { return true + } else if (isPdf(a.href)) { + openPDF(a.href) + return false } // else just force download @@ -371,11 +375,12 @@ function resetView () { table.style.display = 'table' picsHolder.src = transparentPixel videoHolder.src = '' - editor.style.display = pics.style.display = video.style.display = crossIcon.style.display = 'none' + pdf.innerHTML = '' + editor.style.display = pics.style.display = video.style.display = pdf.style.display = crossIcon.style.display = 'none' scrollToArrow() } -window.quitAll = () => helpOff() || picsOff() || videosOff() || padOff() +window.quitAll = () => helpOff() || picsOff() || videosOff() || padOff() || pdfOff() // Mkdir icon window.mkdirBtn = function () { @@ -609,6 +614,30 @@ window.videodl = function () { dl(getASelected()) } +// PDF Viewer +const pdfTypes = ['.pdf'] +const isPdf = src => src && pdfTypes.find(type => src.toLocaleLowerCase().includes(type)) +const isPdfMode = () => pdf.style.display === 'flex' +function openPDF (src) { + const name = src.split('/').pop() + table.style.display = 'none' + crossIcon.style.display = 'block' + pdf.style.display = 'flex' + const pdfEmbed = document.createElement('embed') + pdfEmbed.setAttribute('src', src + '#toolbar=0') + pdfEmbed.setAttribute('type', 'application/pdf') + pdf.appendChild(pdfEmbed) + pushSoftState(decodeURI(name)) + return false +} + +function pdfOff () { + if (!isPdfMode()) { return } + resetView() + softPrev() + return true +} + // help const isHelpMode = () => help.style.display === 'block' diff --git a/ui/style.css b/ui/style.css index 823853e..042f623 100644 --- a/ui/style.css +++ b/ui/style.css @@ -35,6 +35,26 @@ background: gray; } +#pdf { + user-select: none; + -webkit-tap-highlight-color: transparent; + justify-content:center; + align-items:center; + position: fixed; + background-color: #000; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + overflow: hidden; + z-index: 99; +} + +#pdf embed { + width: 100%; + height: 100%; +} + html { color: #dfe6e9; background-color: #2d3436; diff --git a/ui/ui.tmpl b/ui/ui.tmpl index 55eb499..3d4bcfb 100644 --- a/ui/ui.tmpl +++ b/ui/ui.tmpl @@ -58,6 +58,7 @@
+ {{range .RowsFolders}}