fix missing initialization

storage/d4s-storage.js

@@ -225,124 +225,126 @@ window.customElements.define('d4s-storage-tree', class extends D4SStorageHtmlEle
  */
 window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlElement {
 
-    #d4sstorageTree = null
+  #d4sstorageTree = null
-    #selectedbgcolor = 'lightgray'
+  #selectedbgcolor = 'lightgray'
+  #boot = null;
+  
+  constructor() {
+    super()
+    this.#boot = document.querySelector('d4s-boot-2')
+  }
 
-    constructor() {
+  connectedCallback() {
-        super()
+    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
+  }
 
-    connectedCallback() {
+  join(tree) {
-        const shadowRoot = this.attachShadow({mode: 'open'})
+    if (this.#d4sstorageTree == null) {
-        this.appendStylesheets(shadowRoot)
+        this.#d4sstorageTree = tree
+    }
+  }
 
-        const style = document.createElement('style')
+  list(folderId) {
-        style.innerHTML = `
+    this.d4s.service(
-            span {
+        this.buildListUrl(folderId),
-                cursor: pointer;
+        'GET', null,
-                user-select: none;
+        (resp) => this.parseResponse(resp),
-                -moz-user-select: none;
+        (err) => { alert(err) }
-                -webkit-user-select: none;
+    )
-                -ms-user-select: none;
+  }
+
+  parseResponse(response) {
+    const root = this.createContainer()
+    var jresp = JSON.parse(response)
+    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)
             }
-        `
-        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.d4s.service(
-            this.buildListUrl(folderId),
-            'GET', null,
-            (resp) => this.parseResponse(resp),
-            (err) => { alert(err) }
-        )
-    }
-
-    parseResponse(response) {
-        const root = this.createContainer()
-        var jresp = JSON.parse(response)
-        if (jresp.itemlist) {
-            jresp.itemlist.forEach(item => root.appendChild(this.createFileRow(item)))
-
         } else {
-            console.error(jresp)
+            console.info("Download of " + item.id)
-        }
+            this.#boot.download(this.buildDownloadUrl(item.id), item.name)
-    }
+        }
-
+    })
-    createFileRow(item) {
+
-        var div = document.createElement('div')
+    div.appendChild(filename)
-        div.classList.add('row')
+    return div
-        var filename = document.createElement('div')
+  }
-        filename.classList.add('col')
+
-        var name = `<span>${item.name}</span>`
+  iconTag(item) {
-        filename.innerHTML = this.iconTag(item) + name
+    var i = `<img src="/storage/img/file-earmark.svg"></img>`
-        const isFolder = item['@class'].includes('FolderItem')
+    if (item['@class'].includes('FolderItem')) {
-        filename.addEventListener('click', (ev) => {
+        i = `<img src="/storage/img/folder.svg"></img>`
-            ev.stopPropagation()
+    } else if (item['@class'].includes('ImageFile')) {
-            if (isFolder) {
+        i = `<img src="/storage/img/image.svg"></img>`
-                const span = ev.currentTarget.querySelector(':nth-child(2)')
+    } else if (item['@class'].includes('PDFFileItem')) {
-                if (span) {
+        i = `<img src="/storage/img/filetype-pdf.svg"></img>`
-                    span.style = 'background-color: ' + this.#selectedbgcolor
+    }
-                }
+    return '<span class="px-2">' + i + '</span>'
-                if (this.#d4sstorageTree != null) {
+  }
-                    this.#d4sstorageTree.select(item.id)
+
-                }
+  buildDownloadUrl(id) {
-            } else {
+    return this.baseUrl+ '/items/' + id + '/download'
-                console.info("Download of " + item.id)
+  }
-                this.#boot.download(this.buildDownloadUrl(item.id), item.name)
+
-            }
+  static get observedAttributes() {
-        })
+    return ["base-url"];
-
+  }
-        div.appendChild(filename)
+
-        return div
+  attributeChangedCallback(name, oldValue, newValue) {
-    }
+    if (oldValue !== newValue) {
-
+        switch (name) {
-    iconTag(item) {
+            case "base-url":
-        var i = `<img src="/storage/img/file-earmark.svg"></img>`
+                this.baseUrl = newValue
-        if (item['@class'].includes('FolderItem')) {
+                break
-            i = `<img src="/storage/img/folder.svg"></img>`
-        } else if (item['@class'].includes('ImageFile')) {
-            i = `<img src="/storage/img/image.svg"></img>`
-        } else if (item['@class'].includes('PDFFileItem')) {
-            i = `<img src="/storage/img/filetype-pdf.svg"></img>`
-        }
-        return '<span class="px-2">' + i + '</span>'
-    }
-
-    buildDownloadUrl(id) {
-        return this.baseUrl+ '/items/' + id + '/download'
-    }
-
-    static get observedAttributes() {
-        return ["base-url"];
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue !== newValue) {
-            switch (name) {
-                case "base-url":
-                    this.baseUrl = newValue
-                    break
-            }
         }
     }
+  }
 
 })