InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWZvbGRlciI
+PHBhdGggZD0iTTIyIDE5YTIgMiAwIDAgMS0yIDJINGEyIDIgMCAwIDEtMi0yVjVhMiAyIDAgMCAxIDItMmg1bDIgM2g5Y
TIgMiAwIDAgMSAyIDJ6Ij48L3BhdGg+PC9zdmc+`
}
return `
<li class="dbx-list-item ${type}">
<img class="dbx-thumb" src="${thumbnail}">
${file.name}
</li>
`
}).join('')
}
init()
fetch
})
const fileListElem = document.querySelector('.js-file-list')
const state = {
files: []
}
const init = () => {
dbx.filesListFolder({
path: ''
}).then(res => {
updateFiles(res.entries)
})
}
const updateFiles = files => {
state.files = [...state.files, ...files]
renderFiles()
}
const renderFiles = () => {
fileListElem.innerHTML = state.files.sort((a, b) => {
// sort alphabetically, folders first
if ((a['.tag'] === 'folder' || b['.tag'] === 'folder')
&& !(a['.tag'] === b['.tag'])) {
return a['.tag'] === 'folder' ? -1 : 1
} else {
return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
}
}).map(file => {
const type = file['.tag']
let thumbnail
if (type === 'file') {
thumbnail = file.thumbnail
? `data:image/jpeg;base64, ${file.thumbnail}`
: `data:image/svg+xml;base64,
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD
0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9
InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWZpbGUiPjxwYXRoIGQ9Ik
0xMyAySDZhMiAyIDAgMCAwLTIgMnYxNmEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJWOXoiPjwvcGF0aD48cG9s
eWxpbmUgcG9pbnRzPSIxMyAyIDEzIDkgMjAgOSI+PC9wb2x5bGluZT48L3N2Zz4=`
} else {
thumbnail = `data:image/svg+xml;base64,
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD
0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9