web-components/storage/d4s-storage.js

393 lines
10 KiB
JavaScript

var D4S_STORAGE_SCRIPT = document.currentScript
/**
* Base class of <d4s-storage-tree> and <d4s-storage-folder>
*/
class D4SStorageHtmlElement extends HTMLElement {
#d4smissmsg = 'Required d4s-boot-2 component not found'
#baseurl = 'https://api.d4science.org/workspace'
//#baseurl = 'https://workspace-repository.dev.d4science.org/storagehub/workspace'
#boot = null
constructor() {
super()
this.#boot = document.querySelector('d4s-boot-2')
}
get boot() {
if (this.#boot == null) {
this.#boot = document.querySelector('d4s-boot-2')
if (!this.#boot) {
throw this.#d4smissmsg
}
}
return this.#boot
}
appendStylesheets(root) {
const linkElem1 = document.createElement('link')
linkElem1.setAttribute('rel', 'stylesheet')
linkElem1.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css')
root.appendChild(linkElem1)
}
buildListUrl(id) {
return this.#baseurl + '/items/' + id + '/children'
}
get baseUrl() {
return this.#baseurl
}
set baseUrl(url) {
this.#baseurl = url
this.setAttribute("baseurl", url)
}
}
/**
* Builds storagehub VREFolder tree
* <d4s-storage-tree
* /@filelist-id: identifier of d4s-storage-folder component
* /@base-url: the base endpoint url [defaults to: https://api.d4science.org/workspace]
*/
window.customElements.define('d4s-storage-tree', class extends D4SStorageHtmlElement {
#storageFilelistId = null
#loadedClass = 'loaded'
#selectedClass = 'selected'
#selectedbgcolor = 'lightgray'
#shadowRoot
constructor() {
super()
this.#shadowRoot = this.attachShadow({mode: 'open'})
}
/*
Notes:
API docs: https://gcube.wiki.gcube-system.org/gcube/StorageHub_REST_API
Preprod: https://accounts.pre.d4science.org
Sample context: %2Fpred4s%2Fpreprod%2FpreVRE
User workspace: https://storagehub.pre.d4science.net/storagehub/workspace
vrefolder: https://storagehub.pre.d4science.net/storagehub/workspace/vrefolder
-> and if "id": "e0cd15d2-0071-43ca-bc42-aef8d80660fe",
the tree dir of vrefolder: https://storagehub.pre.d4science.net/storagehub/workspace/items/e0cd15d2-0071-43ca-bc42-aef8d80660fe/children
download of a file (domenica.jpg): https://storagehub.pre.d4science.net/storagehub/workspace/items/a5086811-59d1-4230-99fa-98431e820cf1/download
*/
connectedCallback() {
this.appendStylesheets(this.#shadowRoot)
var div = document.createElement('div')
const style = `
<style>
.selected > *:first-child {
background-color: ${this.#selectedbgcolor};
}
ul, li {
list-style-type: none;
}
li {
cursor: pointer;
}
</style>
`
div.innerHTML = style
this.boot.secureFetch(this.baseUrl + '/vrefolder').then((reply) => {
if (reply.status !== 200) {
throw "Unable to load folder"
}
return reply.json()
}).then(data => {
this.parseResponse(div, data)
this.#shadowRoot.appendChild(div)
}).catch(err => console.error(err))
}
parseResponse(parentElement, jresp) {
parentElement.classList.add(this.#loadedClass)
var ul = document.createElement('ul')
ul.classList.add('nested')
if (jresp.item) {
const itemname = jresp.item.displayName
const itemid = jresp.item.id
const path = this.buildListUrl(itemid)
ul.appendChild(this.createListItem(itemname, itemid))
parentElement.appendChild(ul)
} else if (jresp.itemlist) {
jresp
.itemlist
.filter(item => item['@class'].includes('FolderItem'))
.forEach(item => {
const itemname = item.name
const itemid = item.id
const path = this.buildListUrl(itemid)
ul.appendChild(this.createListItem(itemname, itemid))
})
parentElement.appendChild(ul)
} else {
console.error(jresp)
}
}
createListItem(label, id) {
var li = document.createElement('li')
li.setAttribute('data-id', id)
var child = document.createElement('span')
child.innerHTML = label
li.appendChild(child)
li.addEventListener('click', (ev) => {
ev.stopPropagation()
this.select(ev.currentTarget.getAttribute('data-id'))
})
return li
}
select(id) {
var li = this.shadowRoot.querySelector(`*[data-id='${id}']`)
this.displayPath(li)
// if it was already selected then do nothing
if (li.classList.contains(this.#selectedClass)) {
this.toggleULDisplay(li)
return
}
// switch selected and lists folder contents
if (!li.classList.contains(this.#selectedClass)) {
const selected = this.shadowRoot.querySelector('.' + this.#selectedClass)
if (selected) {
selected.classList.remove(this.#selectedClass)
}
li.classList.add(this.#selectedClass)
if (this.#storageFilelistId) {
var folder = document.getElementById(this.#storageFilelistId)
folder.join(this)
folder.list(id)
}
}
if (li.classList.contains(this.#loadedClass)) {
return
}
this.boot.secureFetch(this.buildListUrl(id)).then(reply => {
if (reply.status !== 200) {
throw "Unable to load folder"
}
return reply.json()
}).then(data => {
this.parseResponse(li, data)
}).catch(err => console.error(err))
}
displayPath(li) {
var curr = li
while (curr.parentElement != null) {
if (curr.parentElement.tagName == 'UL') {
curr.parentElement.style.display = 'block'
}
curr = curr.parentElement
}
}
toggleULDisplay(li) {
const ul = li.querySelector('ul')
if (ul) {
ul.style.display = (ul.style.display === 'none') ? 'block' : 'none'
}
}
static get observedAttributes() {
return ["base-url", "filelist-id"]
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
switch (name) {
case "filelist-id":
this.#storageFilelistId = newValue
break
case "base-url":
this.baseUrl = newValue
break
}
}
}
get filelistId() {
return this.#storageFilelistId
}
set filelistId(id) {
this.#storageFilelistId = id
this.setAttribute("filelist-id", id)
}
})
/**
* Lists elements in selected folder
*
* <d4s-storage-folder
* /@id: specify the id to join this component with storage tree component
* /@base-url: the base endpoint url [defaults to: https://api.d4science.org/workspace]
*/
window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlElement {
#d4sstorageTree = null
#selectedbgcolor = 'lightgray'
#srcbaseurl = null
constructor() {
super()
if (D4S_STORAGE_SCRIPT) {
const d4ssrc = D4S_STORAGE_SCRIPT.src
this.#srcbaseurl = (d4ssrc) ? d4ssrc.substring(0, d4ssrc.lastIndexOf('/')) : ""
}
}
connectedCallback() {
const shadowRoot = this.attachShadow({mode: 'open'})
this.appendStylesheets(shadowRoot)
const style = document.createElement('style')
style.innerHTML = `
span {
cursor: pointer;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
`
shadowRoot.appendChild(style)
this.createContainer()
}
createContainer() {
var div = document.createElement('div')
div.classList.add('d4s-folder')
var child = this.shadowRoot.querySelector('.d4s-folder')
if (child) {
this.shadowRoot.removeChild(child)
}
this.shadowRoot.appendChild(div)
return div
}
join(tree) {
if (this.#d4sstorageTree == null) {
this.#d4sstorageTree = tree
}
}
list(folderId) {
this.boot.secureFetch(this.buildListUrl(folderId)).then(reply => {
if (reply.status !== 200) {
throw "Unable to build list url"
}
return reply.json()
}).then(data => {
this.parseResponse(data)
}).catch(err => console.error(err))
}
parseResponse(jresp) {
const root = this.createContainer()
if (jresp.itemlist) {
jresp.itemlist.forEach(item => root.appendChild(this.createFileRow(item)))
} else {
console.error(jresp)
}
}
createFileRow(item) {
var div = document.createElement('div')
div.classList.add('row')
var filename = document.createElement('div')
filename.classList.add('col')
var name = `<span>${item.name}</span>`
filename.innerHTML = this.iconTag(item) + name
const isFolder = item['@class'].includes('FolderItem')
filename.addEventListener('click', (ev) => {
ev.stopPropagation()
if (isFolder) {
const span = ev.currentTarget.querySelector(':nth-child(2)')
if (span) {
span.style = 'background-color: ' + this.#selectedbgcolor
}
if (this.#d4sstorageTree != null) {
this.#d4sstorageTree.select(item.id)
}
} else {
console.info("Download of " + item.id)
this.download(this.buildDownloadUrl(item.id), item.name)
}
})
div.appendChild(filename)
return div
}
iconTag(item) {
var i = `<img src="${this.#srcbaseurl}/img/file-earmark.svg"></img>`
if (item['@class'].includes('FolderItem')) {
i = `<img src="${this.#srcbaseurl}/img/folder.svg"></img>`
} else if (item['@class'].includes('ImageFile')) {
i = `<img src="${this.#srcbaseurl}/img/image.svg"></img>`
} else if (item['@class'].includes('PDFFileItem')) {
i = `<img src="${this.#srcbaseurl}/img/filetype-pdf.svg"></img>`
}
return '<span class="px-2">' + i + '</span>'
}
buildDownloadUrl(id) {
return this.baseUrl+ '/items/' + id + '/download'
}
download(url, name) {
this.boot.secureFetch(url).then(reply => {
if (reply.status !== 200) {
throw "Unable to download"
}
return reply.blob()
}).then(blob => {
const objectURL = URL.createObjectURL(blob)
var tmplnk = document.createElement("a")
tmplnk.download = name
tmplnk.href = objectURL
//tmplnk.target="_blank"
document.body.appendChild(tmplnk)
tmplnk.click()
document.body.removeChild(tmplnk)
}).catch(err => console.error(err))
}
static get observedAttributes() {
return ["base-url"];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
switch (name) {
case "base-url":
this.baseUrl = newValue
break
}
}
}
})