diff --git a/storage/d4s-storage.js b/storage/d4s-storage.js
index e0987bd..c66af1a 100644
--- a/storage/d4s-storage.js
+++ b/storage/d4s-storage.js
@@ -3,34 +3,45 @@
*/
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'
+ #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()
- }
+ constructor() {
+ super()
+ this.#boot = document.querySelector('d4s-boot-2')
+ }
- 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)
+ get boot() {
+ if (this.#boot == null) {
+ this.#boot = document.querySelector('d4s-boot-2')
+ if (!this.#boot) {
+ throw this.#d4smissmsg
+ }
}
+ return this.#boot
+ }
- buildListUrl(id) {
- return this.#baseurl + '/items/' + id + '/children'
- }
+ 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)
+ }
- get baseUrl() {
- return this.#baseurl
- }
+ buildListUrl(id) {
+ return this.#baseurl + '/items/' + id + '/children'
+ }
- set baseUrl(url) {
- this.#baseurl = url
- this.setAttribute("baseurl", url)
- }
+ get baseUrl() {
+ return this.#baseurl
+ }
+
+ set baseUrl(url) {
+ this.#baseurl = url
+ this.setAttribute("baseurl", url)
+ }
}
@@ -42,178 +53,183 @@ class D4SStorageHtmlElement extends HTMLElement {
*/
window.customElements.define('d4s-storage-tree', class extends D4SStorageHtmlElement {
- #storageFilelistId = null
+ #storageFilelistId = null
- #loadedClass = 'loaded'
- #selectedClass = 'selected'
- #selectedbgcolor = 'lightgray'
- #shadowRoot
- #boot = null
-
- constructor() {
- super()
- this.#boot = document.querySelector('d4s-boot-2')
- this.#shadowRoot = this.attachShadow({mode: 'open'})
- }
+ #loadedClass = 'loaded'
+ #selectedClass = 'selected'
+ #selectedbgcolor = 'lightgray'
+ #shadowRoot
- /*
- 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)
+ constructor() {
+ super()
+ this.#shadowRoot = this.attachShadow({mode: 'open'})
+ }
- var div = document.createElement('div')
- const style = `
-
- `
- div.innerHTML = style
+ /*
+ 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)
-
- 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=>alert(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)
+ var div = document.createElement('div')
+ const style = `
+
+ `
+ div.innerHTML = style
- createListItem(label, id) {
- var li = document.createElement('li')
- li.setAttribute('data-id', id)
- var child = document.createElement('span')
- child.innerHTML = label
- li.appendChild(child)
+ this.boot.secureFetch(this.baseUrl + '/vrefolder').then((reply) => {
+ if (reply.status !== 200) {
+ throw "Unable to load folder"
+ }
+ return reply.json()
- li.addEventListener('click', (ev) => {
- ev.stopPropagation()
- this.select(ev.currentTarget.getAttribute('data-id'))
+ }).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))
})
- return li
+ 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
}
- select(id) {
- var li = this.shadowRoot.querySelector(`*[data-id='${id}']`)
- this.displayPath(li)
+ this.boot.secureFetch(this.buildListUrl(id)).then(reply => {
+ if (reply.status !== 200) {
+ throw "Unable to load folder"
+ }
+ return reply.json()
- // 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=>alert(err))
- }
+ }).then(data => {
+ this.parseResponse(li, data)
- displayPath(li) {
- var curr = li
- while (curr.parentElement != null) {
- if (curr.parentElement.tagName == 'UL') {
- curr.parentElement.style.display = 'block'
- }
- curr = curr.parentElement
- }
- }
+ }).catch(err => console.error(err))
+ }
- toggleULDisplay(li) {
- const ul = li.querySelector('ul')
- if (ul) {
- ul.style.display = (ul.style.display === 'none') ? 'block' : 'none'
- }
+ displayPath(li) {
+ var curr = li
+ while (curr.parentElement != null) {
+ if (curr.parentElement.tagName == 'UL') {
+ curr.parentElement.style.display = 'block'
+ }
+ curr = curr.parentElement
}
+ }
- static get observedAttributes() {
- return ["base-url", "filelist-id"];
+ toggleULDisplay(li) {
+ const ul = li.querySelector('ul')
+ if (ul) {
+ ul.style.display = (ul.style.display === 'none') ? 'block' : 'none'
}
+ }
- attributeChangedCallback(name, oldValue, newValue) {
- if (oldValue !== newValue) {
- switch (name) {
- case "filelist-id":
- this.#storageFilelistId = newValue
- break
- case "base-url":
- this.baseUrl = newValue
- break
- }
- }
- }
+ static get observedAttributes() {
+ return ["base-url", "filelist-id"]
+ }
- get filelistId() {
- return this.#storageFilelistId
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (oldValue !== newValue) {
+ switch (name) {
+ case "filelist-id":
+ this.#storageFilelistId = newValue
+ break
+ case "base-url":
+ this.baseUrl = newValue
+ break
+ }
}
+ }
- set filelistId(id) {
- this.#storageFilelistId = id
- this.setAttribute("filelist-id", id)
- }
+ get filelistId() {
+ return this.#storageFilelistId
+ }
+
+ set filelistId(id) {
+ this.#storageFilelistId = id
+ this.setAttribute("filelist-id", id)
+ }
})
/**
@@ -227,11 +243,9 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE
#d4sstorageTree = null
#selectedbgcolor = 'lightgray'
- #boot = null;
constructor() {
super()
- this.#boot = document.querySelector('d4s-boot-2')
}
connectedCallback() {
@@ -240,13 +254,13 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE
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;
- }
+ span {
+ cursor: pointer;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
`
shadowRoot.appendChild(style)
this.createContainer()
@@ -257,7 +271,7 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE
div.classList.add('d4s-folder')
var child = this.shadowRoot.querySelector('.d4s-folder')
if (child) {
- this.shadowRoot.removeChild(child)
+ this.shadowRoot.removeChild(child)
}
this.shadowRoot.appendChild(div)
return div
@@ -265,25 +279,29 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE
join(tree) {
if (this.#d4sstorageTree == null) {
- this.#d4sstorageTree = tree
+ 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.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=>alert(err))
+
+ }).catch(err => console.error(err))
}
parseResponse(jresp) {
const root = this.createContainer()
if (jresp.itemlist) {
- jresp.itemlist.forEach(item => root.appendChild(this.createFileRow(item)))
+ jresp.itemlist.forEach(item => root.appendChild(this.createFileRow(item)))
} else {
- console.error(jresp)
+ console.error(jresp)
}
}
@@ -296,19 +314,19 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE
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.#boot.download(this.buildDownloadUrl(item.id), item.name)
+ 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)
@@ -318,11 +336,11 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE
iconTag(item) {
var i = `
`
if (item['@class'].includes('FolderItem')) {
- i = `
`
+ i = `
`
} else if (item['@class'].includes('ImageFile')) {
- i = `
`
+ i = `
`
} else if (item['@class'].includes('PDFFileItem')) {
- i = `
`
+ i = `
`
}
return '' + i + ''
}
@@ -331,17 +349,37 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE
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
- }
+ switch (name) {
+ case "base-url":
+ this.baseUrl = newValue
+ break
+ }
}
}