fix missing initialization

This commit is contained in:
dcore94 2022-04-12 19:16:15 +02:00
parent 141c079b51
commit c6d3e34e25
1 changed files with 113 additions and 111 deletions

View File

@ -225,124 +225,126 @@ window.customElements.define('d4s-storage-tree', class extends D4SStorageHtmlEle
*/
window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlElement {
#d4sstorageTree = null
#selectedbgcolor = 'lightgray'
#d4sstorageTree = null
#selectedbgcolor = 'lightgray'
#boot = null;
constructor() {
super()
constructor() {
super()
this.#boot = document.querySelector('d4s-boot-2')
}
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
}
connectedCallback() {
const shadowRoot = this.attachShadow({mode: 'open'})
this.appendStylesheets(shadowRoot)
join(tree) {
if (this.#d4sstorageTree == null) {
this.#d4sstorageTree = tree
}
}
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;
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)
}
}
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)
}
}
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.#boot.download(this.buildDownloadUrl(item.id), item.name)
}
})
div.appendChild(filename)
return div
}
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>`
} 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
}
console.info("Download of " + item.id)
this.#boot.download(this.buildDownloadUrl(item.id), item.name)
}
})
div.appendChild(filename)
return div
}
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>`
} 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
}
}
}
})