Beta2 with lot of debugging fixes, no new featurs

This commit is contained in:
Mauro Mugnaini 2023-08-09 12:39:18 +02:00
parent 33eedd6d48
commit fbd44d3caf
1 changed files with 53 additions and 55 deletions

View File

@ -15,11 +15,11 @@ class D4SStorageHtmlElement extends HTMLElement {
this.attachShadow({mode: 'open'})
}
static appendBootstrapStylesheets(root) {
connectedCallback() {
let linkElem = document.createElement('link');
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');
root.appendChild(linkElem);
this.shadowRoot.appendChild(linkElem);
}
get srcBaseURL() {
@ -28,7 +28,7 @@ class D4SStorageHtmlElement extends HTMLElement {
}
class D4SStorageToolbar extends HTMLElement {
class D4SStorageToolbar extends D4SStorageHtmlElement {
static toolbar_event_name = "d4s-toolbar";
@ -43,21 +43,20 @@ class D4SStorageToolbar extends HTMLElement {
constructor() {
super()
this.attachShadow({mode: 'open'})
}
connectedCallback() {
D4SStorageHtmlElement.appendBootstrapStylesheets(this.shadowRoot);
super.connectedCallback();
var div = document.createElement('div');
div.innerHTML = /*html*/`
<div class="border">
<span class="px-2" id="refresh"><img src="img/arrow-clockwise.svg" alt="Refresh folder contents"></img></span>
<span class="px-2" id="create"><img src="img/folder-plus.svg" alt="Create new folder"></img></span>
<span class="px-2" id="delete"><img src="img/folder-x.svg" alt="Delete folder"></img></span>
<span class="px-2" id="download"><img src="img/box-arrow-down.svg" alt="Download folder as ZIP"></img></span>
<span class="px-2" id="upload-file"><img src="img/box-arrow-in-up.svg" alt="Upload file"></img></span>
<span class="px-2" id="upload-archive"><img src="img/file-earmark-zip.svg" alt="Upload archive"></img></span>
<span class="px-2" id="refresh"><img src="${this.srcBaseURL}/img/arrow-clockwise.svg" alt="Refresh folder contents"></img></span>
<span class="px-2" id="create"><img src="${this.srcBaseURL}/img/folder-plus.svg" alt="Create new folder"></img></span>
<span class="px-2" id="delete"><img src="${this.srcBaseURL}/img/folder-x.svg" alt="Delete folder"></img></span>
<span class="px-2" id="download"><img src="${this.srcBaseURL}/img/box-arrow-down.svg" alt="Download folder as ZIP"></img></span>
<span class="px-2" id="upload-file"><img src="${this.srcBaseURL}/img/box-arrow-in-up.svg" alt="Upload file"></img></span>
<span class="px-2" id="upload-archive"><img src="${this.srcBaseURL}/img/file-earmark-zip.svg" alt="Upload archive"></img></span>
</div>`;
div.querySelector("#refresh").addEventListener('click', (ev) => {
ev.stopPropagation();
@ -88,7 +87,7 @@ class D4SStorageToolbar extends HTMLElement {
actionPerformed(action) {
this.#last_action = action;
this.dispatchEvent(new CustomEvent(D4SStorageToolbar.toolbar_event_name, {detail: action}));
this.dispatchEvent(new CustomEvent(D4SStorageToolbar.toolbar_event_name, {detail: {action: action}}));
}
get lastAction() {
@ -147,15 +146,17 @@ class D4SStorageTree extends D4SStorageHtmlElement {
return this.#currentid;
}
setFolderItems(id, items) {
setFolderItems(id, items, fireEvent = true) {
this.#foldersMap[id] = items;
if (fireEvent) {
this.dispatchEvent(
new CustomEvent(
D4SStorageTree.folder_data_event_name,
{detail: id}
{detail: {id: id}}
)
);
}
}
getFolderItems(id) {
return this.#foldersMap[id];
@ -166,7 +167,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
}
connectedCallback() {
D4SStorageHtmlElement.appendBootstrapStylesheets(this.shadowRoot)
super.connectedCallback();
var div = document.createElement('div')
div.innerHTML = /*css*/`
@ -197,7 +198,6 @@ class D4SStorageTree extends D4SStorageHtmlElement {
this.parseItemsData(div, data);
}).catch(err => console.error(err))
this.addEventListener(D4SStorageTree.tree_event_name, this.localEventHandler);
this.addEventListener(D4SStorageTree.folder_data_event_name, this.folderDataEventHandler);
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", this.registerOtherListeners.bind(this));
@ -207,7 +207,6 @@ class D4SStorageTree extends D4SStorageHtmlElement {
}
disconnectedCallback() {
this.removeEventListener(D4SStorageTree.tree_event_name);
this.removeEventListener(D4SStorageTree.folder_data_event_name);
const toolbar = document.querySelector("d4s-storage-tool");
if (toolbar) toolbar.removeEventListener(D4SStorageToolbar.toolbar_event_name);
@ -222,18 +221,14 @@ class D4SStorageTree extends D4SStorageHtmlElement {
if (folder) folder.addEventListener(D4SStorageFolder.selected_event_name, this.folderEventHandler.bind(this));
}
localEventHandler(event) {
this.select(event.detail);
}
folderDataEventHandler(event) {
if (event.detail === this.currentId) {
if (event.detail.id === this.currentId) {
this.fillWithContent(this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${this.currentId}']`))
}
}
toolbarEventHandler(event) {
switch (event.detail) {
switch (event.detail.action) {
case D4SStorageToolbar.refresh_folder:
if (this.currentId) {
this.refreshFolder(this.currentId);
@ -278,7 +273,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
file.click();
break;
default:
console.error('Unexpected event action: ' + event.action);
console.error('Unexpected event action: ' + event.detail.action);
break;
}
}
@ -314,11 +309,16 @@ class D4SStorageTree extends D4SStorageHtmlElement {
}
li.classList.add(this.#selectedClass)
}
if (li.classList.contains(this.#loadedClass)) {
return
if (!li.classList.contains(this.#loadedClass)) {
this.fillWithContent(li);
}
this.fillWithContent(li);
this.dispatchEvent(
new CustomEvent(
D4SStorageTree.tree_event_name,
{detail: {id: id}}
)
);
}
refreshContents(element) {
@ -330,8 +330,9 @@ class D4SStorageTree extends D4SStorageHtmlElement {
fillWithContent(element) {
const id = element.getAttribute(D4SStorageTree.dataid_attr);
if (this.#foldersMap[id]) {
this.parseItemsData(element, this.#foldersMap[id]);
const contents = this.getFolderItems(id);
if (contents) {
this.parseItemsData(element, contents);
} else {
this.d4sWorkspace.listFolder(id).then(data => {
this.setFolderItems(id, data);
@ -372,13 +373,8 @@ class D4SStorageTree extends D4SStorageHtmlElement {
li.addEventListener('click', (ev) => {
ev.stopPropagation();
this.dispatchEvent(
new CustomEvent(
D4SStorageTree.tree_event_name,
{detail: ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr)}
)
);
})
this.select(ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr));
});
return li;
}
@ -418,8 +414,9 @@ class D4SStorageTree extends D4SStorageHtmlElement {
refreshFolder(id) {
const folder = this.shadowRoot.querySelector(`*[${D4SStorageTree.dataid_attr}='${id}']`);
console.log("Refreshing folder: " + folder.getAttribute(D4SStorageTree.dataname_attr));
this.setFolderItems(id, null, false);
this.refreshContents(folder);
this.select(id);
// this.select(id);
}
createNewFolderIn(id) {
@ -489,7 +486,8 @@ class D4SStorageFolder extends D4SStorageHtmlElement {
}
connectedCallback() {
D4SStorageHtmlElement.appendBootstrapStylesheets(this.shadowRoot);
super.connectedCallback();
const style = document.createElement('style')
style.innerHTML = /*css*/`
span {
@ -513,37 +511,37 @@ class D4SStorageFolder extends D4SStorageHtmlElement {
disconnectedCallback() {
const tree = document.querySelector("d4s-storage-tree");
if (tree) {
tree.removeEventListener(D4SStorageTree.tree_event_name);
tree.removeEventListener(D4SStorageTree.folder_data_event_name);
tree.removeEventListener(D4SStorageTree.tree_event_name);
}
}
registerOtherListeners(event) {
const tree = document.querySelector("d4s-storage-tree");
if (tree) {
tree.addEventListener(D4SStorageTree.tree_event_name, this.treeEventHandler.bind(this));
tree.addEventListener(D4SStorageTree.folder_data_event_name, this.folderDataEventHandler.bind(this));
}
}
treeEventHandler(event) {
const folderItems = event.target.getFolderItems(event.detail);
if (folderItems) {
// It's first time folder is selected, data is stil not loaded,
// they will be loaded by the folderDataEventHandler() function when available
this.parseItemsData(folderItems);
tree.addEventListener(D4SStorageTree.tree_event_name, this.treeEventHandler.bind(this));
}
}
folderDataEventHandler(event) {
if (event.detail === event.target.currentId) {
const folderItems = event.target.getFolderItems(event.detail);
if (event.detail.id === event.target.currentId) {
const folderItems = event.target.getFolderItems(event.detail.id);
if (folderItems) {
this.parseItemsData(folderItems);
}
}
}
treeEventHandler(event) {
const folderItems = event.target.getFolderItems(event.detail.id);
if (folderItems) {
// It's first time folder is selected, data is stil not loaded,
// they will be loaded by the folderDataEventHandler() function when available
this.parseItemsData(folderItems);
}
}
createContainer() {
var div = document.createElement('div')
div.classList.add('d4s-folder')