fix missing initialization
This commit is contained in:
dcore94
parent
141c079b51
commit
c6d3e34e25
|
|
@ -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()
|
||||
this.#boot = document.querySelector('d4s-boot-2')
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
Loading…
Reference in New Issue