From 50d286be70ec7775f53ce5845bee195b059a1267 Mon Sep 17 00:00:00 2001 From: SuInk Date: Thu, 23 Nov 2023 20:56:32 +0800 Subject: [PATCH 1/2] open files using a new tab bar && add visited style --- .gitignore | 5 +- public/app.js | 115 ++++++++++++++++++++++++---------------------- public/index.html | 100 +++++++++++++++++++++------------------- 3 files changed, 118 insertions(+), 102 deletions(-) diff --git a/.gitignore b/.gitignore index df8511f..80d4271 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ .vercel .env -node_modules \ No newline at end of file +node_modules +.idea +.well-known +package.json \ No newline at end of file diff --git a/public/app.js b/public/app.js index 41822b9..f800d25 100644 --- a/public/app.js +++ b/public/app.js @@ -52,17 +52,20 @@ function handler(e) { } function preview(name, size) { + document.title = name progress.start() breadcrumb(PATH) document.getElementById('readme').style.display = 'none' const downloadUrl = getApiUrl(`${PATH}`, 'raw', name) + console.log('preview:::', name, size, downloadUrl,PATH) const pushHtml = (s, show_dl_btn = true, show_video_player_btn = false, p = '1rem 1rem') => { document.getElementById('list').innerHTML = `
${s}
` let btn_container = '' if (show_dl_btn) { btn_container += ` Download` } + // video player button if (show_video_player_btn) { const url = new URL(downloadUrl, location.href).toString() btn_container += ` Potplayer` @@ -194,8 +197,8 @@ function preview(name, size) { File Name: ${name}
File Size: ${formatSize(size)}
File Path: ${PATH}
- File Link: ${new URL(downloadUrl, location.href).toString()}
-

Preview Online (PDF.js)

+ File Link: ${location.host + downloadUrl}
+

Preview Online (PDF.js)

Preview Online (Google Docs)

`, true) progress.finish() @@ -220,7 +223,7 @@ function preview(name, size) { File Path: ${PATH}
File Link: ${new URL(downloadUrl, location.href).toString()}

Sorry, we don't support previewing ${/\./.test(name) ? '.' + extension : name} files as of today. You can download the file directly.

` - , true) + , true) progress.finish() } document.getElementById('app').classList.remove('unclickable') @@ -249,51 +252,51 @@ function onPopState(delay = 0) { method: 'GET', cache: CONFIG.fetch_cache, }).then(r => { - if (r.ok) { - return r.json() - } else { - throw `API: ${r.status}, ${r.statusText}` - } - }) - .then(d => setTimeout(() => { - breadcrumb(PATH) + if (r.ok) { + return r.json() + } else { + throw `API: ${r.status}, ${r.statusText}` + } + }) + .then(d => setTimeout(() => { + breadcrumb(PATH) - // console.log(d) - if ('value' in d) { - folderView(d) - } else if ('file' in d) { - preview(d.name, d.size) - } else if ('error' in d) { - const error = d.error - switch (error.code) { - case 'itemNotFound': - folderView({ value: [] }) - default: - alert(error.code) + // console.log(d) + if ('value' in d) { + folderView(d) + } else if ('file' in d) { + preview(d.name, d.size) + } else if ('error' in d) { + const error = d.error + switch (error.code) { + case 'itemNotFound': + folderView({ value: [] }) + default: + alert(error.code) + } } - } - window.isLoading = false - console.timeEnd('Loading') - document.getElementById('readme').style.display = 'none' - document.getElementById('app').classList.remove('unclickable') - progress.finish() - document.getElementById('list').classList.remove('hide') - }, delay)) - .catch(e => setTimeout(() => { - window.isLoading = false - console.timeEnd('Loading') - document.getElementById('app').classList.remove('unclickable') - console.error(e) - progress.finish() - alert(e) - }, delay)) + window.isLoading = false + console.timeEnd('Loading') + document.getElementById('readme').style.display = 'none' + document.getElementById('app').classList.remove('unclickable') + progress.finish() + document.getElementById('list').classList.remove('hide') + }, delay)) + .catch(e => setTimeout(() => { + window.isLoading = false + console.timeEnd('Loading') + document.getElementById('app').classList.remove('unclickable') + console.error(e) + progress.finish() + alert(e) + }, delay)) } function folderView(data) { const isIndex = PATH == '/' const parentPath = isIndex ? '/' : `${PATH.replace(/\/$/, '').split('/').slice(0, -1).join('/')}/` const parentUrl = path2Url(parentPath) - let list = `
.....
` + let list = `
...
` console.log('folder size:', data.value.length) const urlList = [] @@ -302,12 +305,13 @@ function folderView(data) { const { name, size, lastModifiedDateTime } = item const url = path2Url(`${PATH}${name}${isFile ? '' : '/'}`) list += `
- ${name}
- ${formatSize(size)} - ${name} + + ${name}${formatSize(size)} +
` !isFile && urlList.push(url) + console.log(name) if (['readme.md', 'readme.txt'].includes(name.toLowerCase())) { const _path = PATH const loadReadme = async () => { @@ -349,6 +353,9 @@ function folderView(data) { function getApiUrl(path = '/', type = 'item', filename = '') { const searchParams = `?${new URLSearchParams({ path }).toString()}` const pathWithFilename = (type === 'raw' && filename) ? `/${encodeURIComponent(filename)}` : '' + if (type === 'raw') { + return `${CONFIG.api}/${type}${path}` + } return `${CONFIG.api}/${type}${pathWithFilename}${searchParams}` } function url2Path(url = '/') { @@ -382,16 +389,16 @@ function preload(p) { } function formatSize(s = 0) { return s < 1024 - ? s + ' B' - : s < Math.pow(1024, 2) - ? parseFloat(s / Math.pow(1024, 1)).toFixed(1) + ' KiB' - : s < Math.pow(1024, 3) - ? parseFloat(s / Math.pow(1024, 2)).toFixed(1) + ' MiB' - : s < Math.pow(1024, 4) - ? parseFloat(s / Math.pow(1024, 3)).toFixed(1) + ' GiB' - : s < Math.pow(1024, 5) - ? parseFloat(s / Math.pow(1024, 4)).toFixed(1) + ' TiB' - : '> 1PiB' + ? s + ' B' + : s < Math.pow(1024, 2) + ? parseFloat(s / Math.pow(1024, 1)).toFixed(1) + ' KiB' + : s < Math.pow(1024, 3) + ? parseFloat(s / Math.pow(1024, 2)).toFixed(1) + ' MiB' + : s < Math.pow(1024, 4) + ? parseFloat(s / Math.pow(1024, 3)).toFixed(1) + ' GiB' + : s < Math.pow(1024, 5) + ? parseFloat(s / Math.pow(1024, 4)).toFixed(1) + ' TiB' + : '> 1PiB' } function breadcrumb(p = '/') { p = p.replace(/\/$/, '') @@ -515,4 +522,4 @@ function getIconClass(name, isFile) { } else { return 'far fa-folder' } -} +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 160a5b9..0714adb 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,7 @@ + name="viewport"> @@ -20,9 +20,9 @@ :root { --base-font-family: Lato, -apple-system, BlinkMacSystemFont, Segoe UI, - Helvetica, Arial, pingfang sc, source han sans sc, noto sans cjk sc, - sarasa gothic sc, microsoft yahei, sans-serif, Apple Color Emoji, - Segoe UI Emoji; + Helvetica, Arial, pingfang sc, source han sans sc, noto sans cjk sc, + sarasa gothic sc, microsoft yahei, sans-serif, Apple Color Emoji, + Segoe UI Emoji; --code-font-family: Fira Code, SF Mono, Consolas, Monaco, Ubuntu Mono, monospace; --selection-color: currentColor; @@ -112,7 +112,6 @@ max-width: 1024px; margin: 0 auto; } - .size { white-space: nowrap; } @@ -145,7 +144,6 @@ display: flex; align-items: center; text-decoration: none; - padding: .8rem 1rem; transition: .2s all ease-in-out; } @@ -155,28 +153,41 @@ } .item i { - margin-right: .5rem; + margin-right: .8rem; min-width: 20px; text-align: center; } .item .size { opacity: .6; + float: right; } .item a { - position: absolute; - top: 0; - left: 0; - z-index: 0; - overflow: hidden; + padding: .8rem 1rem; + font-family: var(--base-font-family); width: 100%; height: 100%; - text-indent: -9999px; - opacity: 0; - background-color: var(--bg-item-a-color); + opacity: 1; + color: var(--text-color); + } + .item a.file:visited { + padding: .8rem 1rem; + font-family: var(--base-font-family); + width: 100%; + height: 100%; + opacity: 1; + color: #808080; + } + .item a:hover, + .item a:active { + padding: .8rem 1rem; + font-family: var(--base-font-family); + width: 100%; + height: 100%; + opacity: 1; + background-color: var(--bg-body-color ); } - a { color: #0070f3; text-decoration: none; @@ -188,7 +199,6 @@ opacity: .6; transition: opacity 0s; } - .button-container { width: 100%; display: flex; @@ -217,19 +227,16 @@ } @media not all and (any-hover: hover) { + .item a { - background-color: rgba(0, 0, 0, .1); transition: opacity 0s; -webkit-tap-highlight-color: transparent; } - - .item a:hover { - opacity: 0; - } - + .item a:hover, .item a:active { opacity: .6; } + } footer { @@ -256,7 +263,6 @@ user-select: none !important; } - .unclickable, .unclickable a { -webkit-tap-highlight-color: transparent !important; -webkit-user-select: none !important; @@ -323,29 +329,29 @@ - -
- -
-
-
-
-
- - - + +
+ +
+
+
+
+
+ + + \ No newline at end of file From f167b13ca17895150d6980129de3cb90f8e03c06 Mon Sep 17 00:00:00 2001 From: SuInk Date: Thu, 23 Nov 2023 21:17:49 +0800 Subject: [PATCH 2/2] fix some bugs --- public/app.js | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/public/app.js b/public/app.js index f800d25..a2ba7ec 100644 --- a/public/app.js +++ b/public/app.js @@ -58,14 +58,12 @@ function preview(name, size) { document.getElementById('readme').style.display = 'none' const downloadUrl = getApiUrl(`${PATH}`, 'raw', name) - console.log('preview:::', name, size, downloadUrl,PATH) const pushHtml = (s, show_dl_btn = true, show_video_player_btn = false, p = '1rem 1rem') => { document.getElementById('list').innerHTML = `
${s}
` let btn_container = '' if (show_dl_btn) { btn_container += ` Download` } - // video player button if (show_video_player_btn) { const url = new URL(downloadUrl, location.href).toString() btn_container += ` Potplayer` @@ -194,11 +192,11 @@ function preview(name, size) { // https://mozilla.github.io/pdf.js/web/viewer.html // https://mozilla.github.io/pdf.js/legacy/web/viewer.html pushHtml(` - File Name: ${name}
+ File Name: ${name}
File Size: ${formatSize(size)}
File Path: ${PATH}
- File Link: ${location.host + downloadUrl}
-

Preview Online (PDF.js)

+ File Link: ${new URL(downloadUrl, location.href).toString()}
+

Preview Online (PDF.js)

Preview Online (Google Docs)

`, true) progress.finish() @@ -311,7 +309,6 @@ function folderView(data) { ` !isFile && urlList.push(url) - console.log(name) if (['readme.md', 'readme.txt'].includes(name.toLowerCase())) { const _path = PATH const loadReadme = async () => { @@ -353,9 +350,6 @@ function folderView(data) { function getApiUrl(path = '/', type = 'item', filename = '') { const searchParams = `?${new URLSearchParams({ path }).toString()}` const pathWithFilename = (type === 'raw' && filename) ? `/${encodeURIComponent(filename)}` : '' - if (type === 'raw') { - return `${CONFIG.api}/${type}${path}` - } return `${CONFIG.api}/${type}${pathWithFilename}${searchParams}` } function url2Path(url = '/') {