Reformatting code. Refactor extended classes. Download method in d4s-storage-folder.

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'
+  #boot = null
 
-    #d4smissmsg = 'Required d4s-boot-2 component not found'
+  constructor() {
-    #baseurl = 'https://api.d4science.org/workspace'
+    super()
-    //#baseurl = 'https://workspace-repository.dev.d4science.org/storagehub/workspace'
+    this.#boot = document.querySelector('d4s-boot-2')
+  }
 
-    constructor() {
+  get boot() {
-        super()
+    if (this.#boot == null) {
+      this.#boot = document.querySelector('d4s-boot-2')
+      if (!this.#boot) {
+        throw this.#d4smissmsg
+      }
     }
+    return this.#boot
+  }
 
-    appendStylesheets(root) {
+  appendStylesheets(root) {
-        const linkElem1 = document.createElement('link')
+    const linkElem1 = document.createElement('link')
-        linkElem1.setAttribute('rel', 'stylesheet')
+    linkElem1.setAttribute('rel', 'stylesheet')
-        linkElem1.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css')
+    linkElem1.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css')
-        root.appendChild(linkElem1)
+    root.appendChild(linkElem1)
-    }
+  }
 
-    buildListUrl(id) {
+  buildListUrl(id) {
-        return this.#baseurl + '/items/' + id + '/children'
+    return this.#baseurl + '/items/' + id + '/children'
-    }
+  }
 
-    get baseUrl() {
+  get baseUrl() {
-        return this.#baseurl
+    return this.#baseurl
-    }
+  }
 
-    set baseUrl(url) {
+  set baseUrl(url) {
-        this.#baseurl = url
+    this.#baseurl = url
-        this.setAttribute("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'
+  #loadedClass = 'loaded'
-    #selectedClass = 'selected'
+  #selectedClass = 'selected'
-    #selectedbgcolor = 'lightgray'
+  #selectedbgcolor = 'lightgray'
-    #shadowRoot
+  #shadowRoot
-    #boot = null
 
-    constructor() {
+  constructor() {
-        super()
+    super()
-        this.#boot = document.querySelector('d4s-boot-2')
+    this.#shadowRoot = this.attachShadow({mode: 'open'})
-        this.#shadowRoot = this.attachShadow({mode: 'open'})
+  }
-    }
 
-    /*
+  /*
-    Notes:
+  Notes:
-    API docs: https://gcube.wiki.gcube-system.org/gcube/StorageHub_REST_API
+  API docs: https://gcube.wiki.gcube-system.org/gcube/StorageHub_REST_API
-    Preprod: https://accounts.pre.d4science.org
+  Preprod: https://accounts.pre.d4science.org
-    Sample context: %2Fpred4s%2Fpreprod%2FpreVRE
+  Sample context: %2Fpred4s%2Fpreprod%2FpreVRE
-    User workspace: https://storagehub.pre.d4science.net/storagehub/workspace
+  User workspace: https://storagehub.pre.d4science.net/storagehub/workspace
-    vrefolder: https://storagehub.pre.d4science.net/storagehub/workspace/vrefolder
+  vrefolder: https://storagehub.pre.d4science.net/storagehub/workspace/vrefolder
-     -> and if "id": "e0cd15d2-0071-43ca-bc42-aef8d80660fe",
+    -> 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
+      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
+      download of a file (domenica.jpg): https://storagehub.pre.d4science.net/storagehub/workspace/items/a5086811-59d1-4230-99fa-98431e820cf1/download
-    */
+  */
-    connectedCallback() {
+  connectedCallback() {
-        this.appendStylesheets(this.#shadowRoot)
+    this.appendStylesheets(this.#shadowRoot)
 
-        var div = document.createElement('div')
+    var div = document.createElement('div')
-        const style = `
+    const style = `
-            <style>
+      <style>
-                .selected > *:first-child {
+        .selected > *:first-child {
-                    background-color: ${this.#selectedbgcolor};
+          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=>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)
         }
-    }
+        ul, li {
+          list-style-type: none;
+        }
+        li {
+          cursor: pointer;
+        }
+      </style>
+    `
+    div.innerHTML = style
 
-    createListItem(label, id) {
+    this.boot.secureFetch(this.baseUrl + '/vrefolder').then((reply) => {
-        var li = document.createElement('li')
+      if (reply.status !== 200) {
-        li.setAttribute('data-id', id)
+        throw "Unable to load folder"
-        var child = document.createElement('span')
+      }
-        child.innerHTML = label
+      return reply.json()
-        li.appendChild(child)
 
-        li.addEventListener('click', (ev) => {
+    }).then(data => {
-            ev.stopPropagation()
+      this.parseResponse(div, data)
-            this.select(ev.currentTarget.getAttribute('data-id'))
+      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) {
+    this.boot.secureFetch(this.buildListUrl(id)).then(reply => {
-        var li = this.shadowRoot.querySelector(`*[data-id='${id}']`)
+      if (reply.status !== 200) {
-        this.displayPath(li)
+        throw "Unable to load folder"
+      }
+      return reply.json()
 
-        // if it was already selected then do nothing
+    }).then(data => {
-        if (li.classList.contains(this.#selectedClass)) {
+      this.parseResponse(li, data)
-            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))
-    }
 
-    displayPath(li) {
+    }).catch(err => console.error(err))
-        var curr = li
+  }
-        while (curr.parentElement != null) {
-            if (curr.parentElement.tagName == 'UL') {
-                curr.parentElement.style.display = 'block'
-            }
-            curr = curr.parentElement
-        }
-    }
 
-    toggleULDisplay(li) {
+  displayPath(li) {
-        const ul = li.querySelector('ul')
+    var curr = li
-        if (ul) {
+    while (curr.parentElement != null) {
-            ul.style.display = (ul.style.display === 'none') ? 'block' : 'none'
+      if (curr.parentElement.tagName == 'UL') {
-        }
+        curr.parentElement.style.display = 'block'
+      }
+      curr = curr.parentElement
     }
+  }
 
-    static get observedAttributes() {
+  toggleULDisplay(li) {
-        return ["base-url", "filelist-id"];
+    const ul = li.querySelector('ul')
+    if (ul) {
+      ul.style.display = (ul.style.display === 'none') ? 'block' : 'none'
     }
+  }
 
-    attributeChangedCallback(name, oldValue, newValue) {
+  static get observedAttributes() {
-        if (oldValue !== newValue) {
+    return ["base-url", "filelist-id"]
-            switch (name) {
+  }
-                case "filelist-id":
-                    this.#storageFilelistId = newValue
-                    break
-                case "base-url":
-                    this.baseUrl = newValue
-                    break
-            }
-        }
-    }
 
-    get filelistId() {
+  attributeChangedCallback(name, oldValue, newValue) {
-        return this.#storageFilelistId
+    if (oldValue !== newValue) {
+      switch (name) {
+        case "filelist-id":
+          this.#storageFilelistId = newValue
+          break
+        case "base-url":
+          this.baseUrl = newValue
+          break
+      }
     }
+  }
 
-    set filelistId(id) {
+  get filelistId() {
-        this.#storageFilelistId = id
+    return this.#storageFilelistId
-        this.setAttribute("filelist-id", id)
+  }
-    }
+
+  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 {
+      span {
-            cursor: pointer;
+        cursor: pointer;
-            user-select: none;
+        user-select: none;
-            -moz-user-select: none;
+        -moz-user-select: none;
-            -webkit-user-select: none;
+        -webkit-user-select: none;
-            -ms-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=>{
+    this.boot.secureFetch(this.buildListUrl(folderId)).then(reply => {
-      if(reply.status !== 200) throw "Unable to build list url";
+      if (reply.status !== 200) {
+        throw "Unable to build list url"
+      }
       return reply.json()
-    }).then(data=>{
+
+    }).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()
+      ev.stopPropagation()
-        if (isFolder) {
+      if (isFolder) {
-            const span = ev.currentTarget.querySelector(':nth-child(2)')
+        const span = ev.currentTarget.querySelector(':nth-child(2)')
-            if (span) {
+        if (span) {
-                span.style = 'background-color: ' + this.#selectedbgcolor
+            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)
         }
+        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 = `<img src="/storage/img/file-earmark.svg"></img>`
     if (item['@class'].includes('FolderItem')) {
-        i = `<img src="/storage/img/folder.svg"></img>`
+      i = `<img src="/storage/img/folder.svg"></img>`
     } else if (item['@class'].includes('ImageFile')) {
-        i = `<img src="/storage/img/image.svg"></img>`
+      i = `<img src="/storage/img/image.svg"></img>`
     } else if (item['@class'].includes('PDFFileItem')) {
-        i = `<img src="/storage/img/filetype-pdf.svg"></img>`
+      i = `<img src="/storage/img/filetype-pdf.svg"></img>`
     }
     return '<span class="px-2">' + i + '</span>'
   }
@@ -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) {
+      switch (name) {
-            case "base-url":
+        case "base-url":
-                this.baseUrl = newValue
+          this.baseUrl = newValue
-                break
+          break
-        }
+      }
     }
   }