120 lines
4.3 KiB
JavaScript
120 lines
4.3 KiB
JavaScript
import emojiRegex from 'emoji-regex/RGI_Emoji'
|
|
import { getClassNameForMimeType, getClassNameForFilename } from 'font-awesome-filetypes'
|
|
|
|
import { renderHTML } from './render/htmlWrapper'
|
|
import { renderPath } from './render/pathUtil'
|
|
import { renderMarkdown } from './render/mdRenderer'
|
|
|
|
/**
|
|
* Convert bytes to human readable file size
|
|
*
|
|
* @param {Number} bytes File size in bytes
|
|
* @param {Boolean} si 1000 - true; 1024 - false
|
|
*/
|
|
function readableFileSize(bytes, si) {
|
|
bytes = parseInt(bytes, 10)
|
|
var thresh = si ? 1000 : 1024
|
|
if (Math.abs(bytes) < thresh) {
|
|
return bytes + ' B'
|
|
}
|
|
var units = si
|
|
? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
|
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
|
|
var u = -1
|
|
do {
|
|
bytes /= thresh
|
|
++u
|
|
} while (Math.abs(bytes) >= thresh && u < units.length - 1)
|
|
return bytes.toFixed(1) + ' ' + units[u]
|
|
}
|
|
|
|
/**
|
|
* Render Folder Index
|
|
*
|
|
* @param {*} items
|
|
* @param {*} isIndex don't show ".." on index page.
|
|
*/
|
|
export async function renderFolderView(items, path, request) {
|
|
const isIndex = path === '/'
|
|
|
|
const el = (tag, attrs, content) => `<${tag} ${attrs.join(' ')}>${content}</${tag}>`
|
|
const div = (className, content) => el('div', [`class=${className}`], content)
|
|
const item = (icon, fileName, fileAbsoluteUrl, size, emojiIcon) =>
|
|
el(
|
|
'a',
|
|
[`href="${fileAbsoluteUrl}"`, 'class="item"', size ? `size="${size}"` : ''],
|
|
(emojiIcon ? el('i', ['style="font-style: normal"'], emojiIcon) : el('i', [`class="${icon}"`], '')) +
|
|
fileName +
|
|
el('div', ['style="flex-grow: 1;"'], '') +
|
|
(fileName === '..' ? '' : el('span', ['class="size"'], readableFileSize(size)))
|
|
)
|
|
|
|
const intro = `<footer style="padding-bottom:1rem;">白嫖的OneDrive</footer>`
|
|
|
|
// Check if current directory contains README.md, if true, then render spinner
|
|
let readmeExists = false
|
|
let readmeFetchUrl = ''
|
|
|
|
const body = div(
|
|
'container',
|
|
div('path', renderPath(path)) +
|
|
div(
|
|
'items',
|
|
el(
|
|
'div',
|
|
['style="min-width: 600px"'],
|
|
(!isIndex ? item('far fa-folder', '..', `${path}..`) : '') +
|
|
items
|
|
.map(i => {
|
|
// Check if the current item is a folder or a file
|
|
if ('folder' in i) {
|
|
const emoji = emojiRegex().exec(i.name)
|
|
if (emoji && !emoji.index) {
|
|
return item('', i.name.replace(emoji, '').trim(), `${path}${i.name}/`, i.size, emoji[0])
|
|
} else {
|
|
return item('far fa-folder', i.name, `${path}${i.name}/`, i.size)
|
|
}
|
|
} else if ('file' in i) {
|
|
// Check if README.md exists
|
|
if (!readmeExists) {
|
|
// TODO: debugging for README preview rendering
|
|
console.log("渲染readme",i)
|
|
|
|
readmeExists = i.name.toLowerCase() === 'readme.md'
|
|
readmeFetchUrl = i['@microsoft.graph.downloadUrl']
|
|
console.log("readmeURl",readmeFetchUrl)
|
|
}
|
|
|
|
// Render file icons
|
|
let fileIcon = getClassNameForMimeType(i.file.mimeType)
|
|
if (fileIcon === 'fa-file') {
|
|
// Check for files that haven't been rendered as expected
|
|
const extension = i.name.split('.').pop()
|
|
if (extension === 'md') {
|
|
fileIcon = 'fab fa-markdown'
|
|
} else if (['7z', 'rar', 'bz2', 'xz', 'tar', 'wim'].includes(extension)) {
|
|
fileIcon = 'far fa-file-archive'
|
|
} else if (['flac', 'oga', 'opus'].includes(extension)) {
|
|
fileIcon = 'far fa-file-audio'
|
|
} else {
|
|
fileIcon = `far ${getClassNameForFilename(i.name)}`
|
|
}
|
|
} else {
|
|
fileIcon = `far ${fileIcon}`
|
|
}
|
|
return item(fileIcon, i.name, `${path}${i.name}`, i.size)
|
|
} else {
|
|
console.log(`unknown item type ${i}`)
|
|
}
|
|
})
|
|
.join('')
|
|
)
|
|
) +
|
|
(readmeExists? await renderMarkdown(readmeFetchUrl, 'fade-in-fwd', '') : '') +
|
|
(isIndex ? intro : '')
|
|
)
|
|
console.log("是否显示",readmeExists,isIndex,readmeExists && !isIndex)
|
|
|
|
return renderHTML(body, ...[request.pLink, request.pIdx])
|
|
}
|