81 lines
2.2 KiB
JavaScript
81 lines
2.2 KiB
JavaScript
import { CustomHTMLElement } from "./lib/custom_html_element.mjs";
|
|
|
|
export class N2File extends CustomHTMLElement {
|
|
static {
|
|
this.tmpl = document.createElement('template')
|
|
this.tmpl.innerHTML = `
|
|
<style>
|
|
:host {
|
|
display: inline-grid;
|
|
grid-template-columns: min-content min-content;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
|
|
.el-image {
|
|
max-width: var(--thumbnail-width);
|
|
max-height: var(--thumbnail-height);
|
|
}
|
|
|
|
.el-filename {
|
|
display: none;
|
|
font-weight: bold;
|
|
background-color: #ddd;
|
|
border-radius: 4px;
|
|
padding: 4px 8px;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
</style>
|
|
<img data-el="image" src="/images/${_VERSION}/file_icons/generic.svg">
|
|
<div data-el="filename"></div>
|
|
`
|
|
}
|
|
constructor() {
|
|
super(true)
|
|
|
|
this.addEventListener('click', event => {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
|
|
window.open(
|
|
URL.createObjectURL(this.file),
|
|
(event.ctrlKey || event.shiftKey) ? '_blank' : '_self',
|
|
)
|
|
})
|
|
|
|
this.render()
|
|
}
|
|
|
|
async render() {
|
|
const src = this.getAttribute('src')
|
|
|
|
// N2's db:// URLs are fetched from IndexedDB.
|
|
if (src.toLowerCase().match('^db://[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$')) {
|
|
// image population has to happen asynchronously,
|
|
// while Marked lib has to be returned a string when exiting this function.
|
|
// populateImg makes sure this returned img element exists and then populates it
|
|
// with the image from IndexedDB.
|
|
const file = await globalThis.nodeStore.files.get(src.slice(5))
|
|
if (!file)
|
|
return
|
|
this.file = file.file
|
|
|
|
if (file.file.type.startsWith('image/'))
|
|
this.elImage.src = URL.createObjectURL(file.file)
|
|
else {
|
|
// Check for and use an existing MIME type icon.
|
|
// Place them in static/images/file_icons/ and replace the slash with an underscore.
|
|
const url = `/images/${_VERSION}/file_icons/${file.file.type.replaceAll('/', '_')}.svg`
|
|
const res = await fetch(url)
|
|
if (res.ok)
|
|
this.elImage.src = url
|
|
|
|
this.elFilename.innerText = file.file.name
|
|
this.elFilename.style.display = 'block'
|
|
}
|
|
} else
|
|
this.elImage.src = src
|
|
}
|
|
}
|
|
customElements.define('n2-file', N2File)
|