From 7b2040c629bb81f0f878dc1b320358a7fa47a818 Mon Sep 17 00:00:00 2001 From: dcore94 Date: Thu, 5 Oct 2023 18:34:58 +0200 Subject: [PATCH] optionally show files in tree --- storage/d4s-storage.js | 25 +++++++++++++++++++------ storage/index.html | 3 ++- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/storage/d4s-storage.js b/storage/d4s-storage.js index 46e6369..fce3de2 100644 --- a/storage/d4s-storage.js +++ b/storage/d4s-storage.js @@ -112,6 +112,7 @@ class D4SStorageTree extends D4SStorageHtmlElement { #boot = null #baseurl = 'https://api.d4science.org/workspace' #filedownloadenabled = false; + #showfiles = true; #d4sworkspace = null; #foldersMap = {}; #currentid = null; @@ -130,6 +131,14 @@ class D4SStorageTree extends D4SStorageHtmlElement { get baseUrl() { return this.#baseurl; } + + get showFiles() { + return this.#showfiles; + } + + set showFiles(value){ + this.#showfiles = value + } set baseUrl(url) { this.#baseurl = url; @@ -179,7 +188,7 @@ class D4SStorageTree extends D4SStorageHtmlElement { } static get observedAttributes() { - return ["base-url", "file-download-enabled"]; + return ["base-url", "file-download-enabled", "show-files"]; } attributeChangedCallback(name, oldValue, newValue) { @@ -191,6 +200,9 @@ class D4SStorageTree extends D4SStorageHtmlElement { case "file-download-enabled": this.fileDownloadEnabled = (newValue.toLowerCase() === 'true'); break; + case "show-files": + this.showFiles = (newValue.toLowerCase() === 'true'); + break; default: console.warn("Unexpected attribute changed: " + name); } @@ -393,17 +405,17 @@ class D4SStorageTree extends D4SStorageHtmlElement { } if (Array.isArray(data)) { data - .filter(item => item['@class'].includes('FolderItem')) + .filter(item => this.showFiles || item['@class'].includes('FolderItem')) .forEach(item => { - ul.appendChild(this.createListItem(item.name, item.id, parentId)); + ul.appendChild(this.createListItem(item.name, item.id, item['@class'], parentId)); }) } else { - ul.appendChild(this.createListItem(data.displayName ? data.displayName : data.name, data.id, parentId)); + ul.appendChild(this.createListItem(data.displayName ? data.displayName : data.name, data.id, data['@class'], parentId)); } parentElement.appendChild(ul); } - createListItem(label, id, parentId) { + createListItem(label, id, type, parentId) { const li = document.createElement('li'); li.setAttribute(D4SStorageTree.dataname_attr, label); li.setAttribute(D4SStorageTree.dataid_attr, id); @@ -411,7 +423,8 @@ class D4SStorageTree extends D4SStorageHtmlElement { li.setAttribute(D4SStorageTree.parentid_attr, parentId); } const child = document.createElement('span'); - child.innerHTML = /*html*/`` + label; + const icon = type.includes('FolderItem') ? "folder.svg" : "file-earmark.svg" + child.innerHTML = /*html*/`` + label; li.appendChild(child) li.addEventListener('click', (ev) => { diff --git a/storage/index.html b/storage/index.html index ef5348e..5651241 100644 --- a/storage/index.html +++ b/storage/index.html @@ -20,7 +20,8 @@ + file-download-enabled="true" + show-files="false"/>