Beta2 with lot of debugging fixes, no new featurs
This commit is contained in:
parent
33eedd6d48
commit
fbd44d3caf
|
|
@ -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')
|
||||
|
|
|
|||
Loading…
Reference in New Issue