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

storage/d4s-storage.js

@@ -3,13 +3,24 @@
  */
 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) {
@@ -48,11 +59,9 @@ window.customElements.define('d4s-storage-tree', class extends D4SStorageHtmlEle
   #selectedClass = 'selected'
   #selectedbgcolor = 'lightgray'
   #shadowRoot
-    #boot = null
 
   constructor() {
     super()
-        this.#boot = document.querySelector('d4s-boot-2')
     this.#shadowRoot = this.attachShadow({mode: 'open'})
   }
 
@@ -86,16 +95,17 @@ window.customElements.define('d4s-storage-tree', class extends D4SStorageHtmlEle
     `
     div.innerHTML = style
 
-        
+    this.boot.secureFetch(this.baseUrl + '/vrefolder').then((reply) => {
-        this.#boot.secureFetch(this.baseUrl + '/vrefolder').then(
+      if (reply.status !== 200) {
-          (reply)=>{
+        throw "Unable to load folder"
-            if(reply.status !== 200) throw "Unable to load folder";
-            return reply.json()
       }
-        ).then(data => {
+      return reply.json()
+
+    }).then(data => {
       this.parseResponse(div, data)
       this.#shadowRoot.appendChild(div)
-        }).catch(err=>alert(err))
+
+    }).catch(err => console.error(err))
   }
 
   parseResponse(parentElement, jresp) {
@@ -120,6 +130,7 @@ window.customElements.define('d4s-storage-tree', class extends D4SStorageHtmlEle
           ul.appendChild(this.createListItem(itemname, itemid))
         })
       parentElement.appendChild(ul)
+
     } else {
       console.error(jresp)
     }
@@ -164,12 +175,17 @@ window.customElements.define('d4s-storage-tree', class extends D4SStorageHtmlEle
     if (li.classList.contains(this.#loadedClass)) {
       return
     }
-        this.#boot.secureFetch(this.buildListUrl(id)).then(reply=>{
+
-          if(reply.status !== 200) throw "Unable to load folder";
+    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))
+
+    }).catch(err => console.error(err))
   }
 
   displayPath(li) {
@@ -190,7 +206,7 @@ window.customElements.define('d4s-storage-tree', class extends D4SStorageHtmlEle
   }
 
   static get observedAttributes() {
-        return ["base-url", "filelist-id"];
+    return ["base-url", "filelist-id"]
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -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() {
@@ -270,12 +284,16 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE
   }
 
   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 => {
       this.parseResponse(data)
-    }).catch(err=>alert(err))
+
+    }).catch(err => console.error(err))
   }
 
   parseResponse(jresp) {
@@ -307,7 +325,7 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE
         }
       } else {
         console.info("Download of " + item.id)
-            this.#boot.download(this.buildDownloadUrl(item.id), item.name)
+        this.download(this.buildDownloadUrl(item.id), item.name)
       }
     })
 
@@ -331,6 +349,26 @@ 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"];
   }