datafolder 1.0.6 → 1.0.8

package/static/datafolderui/QyStyledElement.js

@@ -1,30 +1,21 @@
 import {
-    appendStyle as n
+    appendStyle as o
 } from "./QyUIUtils.js";
 
-class s extends HTMLElement {
+class e extends HTMLElement {
     constructor(e, t) {
-        super(), Array.isArray(e) && (t = e, e = void 0);
+        super();
         var r = this.attachShadow({
             mode: "open"
         });
-        if (t) for (var s of t) {
-            var o = document.createElement("link");
-            o.setAttribute("rel", "stylesheet"), o.setAttribute("href", s), r.appendChild(o);
+        if (Array.isArray(e) && (t = e, e = void 0), t) for (var s of t) {
+            var a = document.createElement("link");
+            a.setAttribute("rel", "stylesheet"), a.setAttribute("href", s), r.appendChild(a);
         }
-        e && n(r, e);
+        e && o(r, e);
     }
 }
 
-function e(e, t, r) {
-    customElements.define(e, class extends s {
-        constructor() {
-            super(t, r);
-        }
-    });
-}
-
 export {
-    s as QyStyledElement,
-    e as defineStyledElement
+    e as QyStyledElement
 };

package/static/datafolderui/QyUIFolderViewer.js

@@ -0,0 +1,230 @@
+import {
+    w2layout as i
+} from "../w2ui/src/w2compat.js";
+
+import {
+    h as c
+} from "./hscrpt.js";
+
+import {
+    setHeight as n,
+    isNotNullObj as e
+} from "./QyUIUtils.js";
+
+import "./folder-tree.js";
+
+import "./json-view.js";
+
+import "./code-mirror.js";
+
+let r = 0;
+
+class t extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.idCount = ++r, this.parentDiv = this.parentElement;
+        var e = new i({
+            box: this.parentDiv,
+            name: "layout_folderviewer_" + this.idCount,
+            panels: [ {
+                type: "left",
+                size: 300,
+                resizable: !0
+            }, {
+                type: "main"
+            }, {
+                type: "bottom",
+                size: 10
+            } ]
+        }), t = (e.el("left").append((t = this).toolbarDiv = c("div", {
+            classList: "btn-toolbar",
+            role: "toolbar",
+            style: "border-bottom: 1px solid #e4e4e4"
+        }, [ s(t), o() ]), (s => {
+            var e = c("folder-tree"), {
+                folderTreeDiv: t,
+                folderTree: i
+            } = e;
+            return i.on("select", e => {
+                if (!s.clickSrc) {
+                    s.clickSrc = "folderTree";
+                    var t = s, i = e, {
+                        folderTree: r,
+                        selectedHierarchy: o
+                    } = t, r = r.hierarchy(i).reverse();
+                    t.namePath = r.map(e => e.textContent), Object.assign(o, r);
+                    {
+                        var n = t;
+                        let {
+                            namePath: i,
+                            pathUL: e
+                        } = n, r = e.children, o = i.length, s = 0 < o;
+                        for (let t = 0; t < o; ++t) {
+                            if (t >= r.length) {
+                                for (let e = t; e < o; ++e) ((s, n, e) => {
+                                    e = c("span", {
+                                        classList: "nav-link",
+                                        "data-bs-toggle": "tab",
+                                        role: "tab",
+                                        style: "cursor:pointer",
+                                        onclick: () => {
+                                            s.clickSrc || (s.clickSrc = "tab");
+                                            var t = n, {
+                                                clickSrc: e,
+                                                rootFolder: i,
+                                                selectedHierarchy: r,
+                                                folderTree: o
+                                            } = e = s;
+                                            i.parentElement.open = !0;
+                                            for (let e = 0; e < t; ++e) r[e].parentElement.open = !0;
+                                            i = r[t], "tab" == e && i.scrollIntoView({
+                                                block: "center"
+                                            }), o.select(i), "tab" == s.clickSrc && (s.clickSrc = void 0);
+                                        }
+                                    }, [ e ]), s.pathUL.append(c("li", {
+                                        classList: "nav-item"
+                                    }, [ e ]));
+                                })(n, e, i[e]);
+                                break;
+                            }
+                            var l = r[t].children[0], a = i[t];
+                            l.innerText != a && (l.innerText = a, s = !1);
+                        }
+                        if (!s) for (;o < r.length; ) e.removeChild(e.lastElementChild);
+                        0 < o && r[o - 1].children[0].click();
+                    }
+                }
+                s.selectedElement != e && (s.selectedElement = e, d(s)), "folderTree" == s.clickSrc && (s.clickSrc = void 0);
+            }), Object.assign(s, {
+                folderTree: i,
+                folderTreeDiv: t,
+                folder_tree: e
+            }), e;
+        })(this)), e.el("main"));
+        t.append(this.upperDiv = c("div", {
+            style: {
+                display: "flex",
+                "align-items": "center",
+                "justify-content": "space-between",
+                "margin-right": "1px"
+            }
+        }, [ this.pathUL = c("ul", {
+            classList: "nav nav-tabs"
+        }), c("div", {
+            classList: "btn-toolbar",
+            role: "toolbar"
+        }, [ s(self), o() ]) ]), this.contentDiv = c("div", [ this.json_view = c("json-view"), this.codeMirrorDiv = c("div", {
+            style: {
+                overflow: "auto"
+            }
+        }) ])), e.el("bottom").append(this.msgSpan = c("span")), Object.assign(this, {
+            layout: e,
+            mainDiv: t,
+            selectedHierarchy: {},
+            namePath: []
+        }), e.on("resize:done", () => this.onSizeChange());
+    }
+    get fileContentMap() {
+        return this.folder_tree.fileContentMap;
+    }
+    set fileContentMap(e) {
+        this.folder_tree.fileContentMap = e;
+    }
+    onSizeChange() {
+        var {
+            parentDiv: e,
+            folderTreeDiv: t,
+            json_view: i,
+            mainDiv: r,
+            contentDiv: o,
+            codeMirrorDiv: s
+        } = this;
+        n(e, document.body.clientHeight - e.offsetTop), n(t, r.clientHeight - t.offsetTop), 
+        n(o, r.clientHeight - o.offsetTop), i.setHeight(o.clientHeight), n(s, o.clientHeight), 
+        d(this);
+    }
+    showMsg(e) {
+        this.msgSpan.innerText = e;
+    }
+    showSelectedFile(o) {
+        o = this.folder_tree.fileContentMap[o.dataset.fileContentKey];
+        if (this.isTriggerEditor) {
+            var s = o;
+            let {
+                code_mirror: e,
+                code_mirror2: t,
+                json_view: i,
+                codeMirrorDiv: r
+            } = n = this;
+            i.hidden = !0, r.hidden = !1, e || n.codeMirrorDiv.append(e = n.code_mirror = c("code-mirror")), 
+            t || n.codeMirrorDiv.append(t = n.code_mirror2 = c("code-mirror"));
+            var {
+                fileNamePath: n,
+                propNamePathList: s,
+                modCode: l
+            } = s;
+            e.text = JSON.stringify({
+                fileNamePath: n,
+                propNamePathList: s
+            }), t.text = l;
+        } else this.showContent(o);
+    }
+    showSelectedDir(e) {
+        "false" != e.parentElement.dataset.loaded ? this.showContent(e.dataset) : this.showContent("not loaded");
+    }
+    showContent(t) {
+        var {
+            json_view: i,
+            codeMirrorDiv: r
+        } = this;
+        if (e(t)) r.hidden = !0, i.hidden = !1, i.show(t); else {
+            r.hidden = !1, i.hidden = !0;
+            let e = this.code_mirror;
+            e || r.append(e = this.code_mirror = c("code-mirror", {
+                readOnly: !0
+            })), e.text = t;
+        }
+    }
+    resetPathTabs() {
+        this.pathUL.replaceChildren();
+    }
+}
+
+function d(e) {
+    var {
+        selectedElement: t,
+        json_view: i
+    } = e;
+    t ? (e = e, "file" == (t = t).dataset.type ? e.showSelectedFile(t) : e.showSelectedDir(t)) : i.clear();
+}
+
+function o() {
+    return c("div", {
+        classList: "btn-group btn-group-sm",
+        role: "group"
+    }, [ c("button", {
+        classList: "btn btn-outline-success",
+        type: "submit"
+    }, [ c("i", {
+        classList: "bi bi-search"
+    }) ]) ]);
+}
+
+function s(e) {
+    return c("div", {
+        classList: "input-group"
+    }, [ c("input", {
+        id: "searchInput_" + e.idCount,
+        type: "text",
+        classList: "form-control",
+        style: {
+            width: "150px"
+        }
+    }) ]);
+}
+
+export {
+    t as QyUIFolderViewer
+};

package/static/datafolderui/QyUIUtils.js

@@ -1,9 +1,9 @@
 async function t(e, n, o) {
-    var t = `/rpc/${e}?args=` + encodeURIComponent(JSON.stringify(n));
+    var t = "/rpc/" + e + (n ? "?args=" + encodeURIComponent(JSON.stringify(n)) : "");
     let i;
     if (o) {
         let t;
-        "object" == typeof o ? (t = "application/json", o = JSON.stringify(o)) : t = "text/plain", 
+        a(o) ? (t = "application/json", o = JSON.stringify(o)) : t = "text/plain", 
         i = {
             method: "POST",
             headers: {
@@ -14,7 +14,7 @@ async function t(e, n, o) {
     }
     try {
         var r = await fetch(t, i);
-        if (r.ok) return await r.json();
+        if (r.ok) return r.json();
         console.error("Response status: " + r.status);
     } catch (t) {
         console.error(`Calling ${e} with ${n} failed:`, t);
@@ -34,7 +34,7 @@ function o(t, e) {
     n.textContent = e, t.appendChild(n);
 }
 
-function i(t) {
+function a(t) {
     return null != t && "object" == typeof t;
 }
 
@@ -43,5 +43,5 @@ export {
     e as setHeight,
     n as setWidth,
     o as appendStyle,
-    i as isNotNullObj
+    a as isNotNullObj
 };

package/static/datafolderui/code-mirror.js

@@ -4,16 +4,16 @@ customElements.define("code-mirror", class extends HTMLElement {
     }
     compose() {
         var r, e;
-        this.codemirror || ({
+        this.codeMirror || ({
             readOnly: r,
             changeCallback: e
-        } = this, this.codemirror = createCodeMirror(this, r, e));
+        } = this, this.codeMirror = createCodeMirror(this, r, e));
     }
     get text() {
-        return this.codemirror?.state.doc.toString() ?? "";
+        return this.codeMirror?.state.doc.toString() ?? "";
     }
     set text(r) {
-        var e = this.codemirror;
+        var e = this.codeMirror;
         e && e.dispatch({
             changes: {
                 from: 0,
@@ -23,13 +23,13 @@ customElements.define("code-mirror", class extends HTMLElement {
         });
     }
     get hidden() {
-        return !!this.codemirror?.dom.hidden;
+        return !!this.codeMirror?.dom.hidden;
     }
     set hidden(r) {
-        var e = this.codemirror;
+        var e = this.codeMirror;
         e && (e.dom.hidden = !!r);
     }
     clearHistory() {
-        this.codemirror?.clearHistory();
+        this.codeMirror?.clearHistory();
     }
 });

package/static/datafolderui/display-tree.js

@@ -3,72 +3,36 @@ import {
 } from "./hscrpt.js";
 
 import {
-    QyUIFolderTree as e
-} from "./QyUIFolderTree.js";
+    QyUIFolderViewer as e
+} from "./QyUIFolderViewer.js";
+
+function o(e, t) {
+    var r = e.folder_tree, {
+        rootFolder: t,
+        folderTree: s
+    } = (r.constructFolderTree(t), r);
+    e.rootFolder = r.rootFolder, s.select(t);
+}
 
 customElements.define("display-tree", class extends e {
     constructor() {
         super();
     }
     connectedCallback() {
-        var e = (super.connectedCallback(), (e = this).toolbarDiv.append((e => e.countSpan = t("span", {
+        var e;
+        super.connectedCallback(), (e = this).toolbarDiv.append((e => e.countSpan = t("span", {
             classList: "btn btn-success ms-auto"
-        }, [ "0" ]))(e)), this).folderTree;
-        this.rootFolder = e.folder({
-            name: "/",
-            open: !0
-        }), e.select(this.rootFolder);
+        }, [ "0" ]))(e)), o(this);
     }
     showTree(e, t) {
-        var o = this, {
-            rootFolder: r,
-            countSpan: s,
-            msgSpan: n
-        } = (o.deleteJsonTree(), o);
-        s.innerText = "0", n.innerText = "", r && (r.parentElement.remove(), Object.assign(o, {
-            rootFolder: void 0,
-            fileContentMap: {}
-        })), this.resetPathTabs(), this.countSpan.innerText = t, this.msgSpan.innerText = "Total " + t, 
-        this.rootFolder = this.folderTree.folder({
-            name: "/",
-            open: !0
-        }), function o(r, s, e) {
-            let {
-                folderTree: n,
-                fileContentMap: l
-            } = r;
-            let a = s.dataset;
-            let {
-                fullPathHash: t,
-                subdirMap: i,
-                fileMap: d
-            } = e;
-            t && (a.fullPathHash = t);
-            if (i) {
-                let e = Object.keys(i).sort();
-                for (var f of e) {
-                    let e = n.folder({
-                        name: f
-                    }, s);
-                    o(r, e, i[f]);
-                }
-                let t = e.length;
-                0 < t && (a.subdirCount = t);
-            }
-            if (d) {
-                let e = Object.keys(d).sort();
-                for (var h of e) {
-                    let {
-                        fileContent: e,
-                        fileContentKey: t
-                    } = d[h], o = n.file({
-                        name: h
-                    }, s);
-                    o.dataset.fileContentKey = t, l[t] = e;
-                }
-                let t = e.length;
-                0 < t && (a.fileCount = t);
-            }
-        }(this, this.rootFolder, e), this.folderTree.select(this.rootFolder), this.tree = e;
+        (r = this).json_view.clear();
+        var {
+            countSpan: r,
+            msgSpan: s
+        } = r, {
+            countSpan: r,
+            msgSpan: s
+        } = (r.innerText = "0", s.innerText = "", this.resetPathTabs(), this);
+        r.innerText = t, s.innerText = "Total " + t, o(this, e);
     }
 });

package/static/datafolderui/explore-tree.js

@@ -3,8 +3,8 @@ import {
 } from "./QyUIUtils.js";
 
 import {
-    QyUIFolderTree as e
-} from "./QyUIFolderTree.js";
+    QyUIFolderViewer as e
+} from "./QyUIFolderViewer.js";
 
 import {
     h as l
@@ -52,8 +52,8 @@ customElements.define("explore-tree", class extends e {
         this).folderTree, o = (t.on("fetch", async e => {
             var t = this, o = e, l = o.dataset, {
                 namePath: n,
-                folderTree: s,
-                rootFolder: i,
+                folderTree: i,
+                rootFolder: s,
                 showHiddenFolder: d
             } = t;
             if (n = await (e => f("getSubItems", {
@@ -67,15 +67,15 @@ customElements.define("explore-tree", class extends e {
                 n && (l.fullPathHash = n);
                 let e;
                 if (0 < r.length) {
-                    for (var h of r) o == i && "%" == h ? e = !0 : s.asyncFolder({
+                    for (var h of r) o == s && "%" == h ? e = !0 : i.asyncFolder({
                         name: h
                     }, o);
                     l.subdirCount = r.length;
                 }
-                if (e && ((n = s.asyncFolder({
+                if (e && ((n = i.asyncFolder({
                     name: "%"
                 }, o)).parentElement.hidden = !d, t.rootHiddenFolder = n), 0 < a.length) {
-                    for (var c of a) s.file({
+                    for (var c of a) i.file({
                         name: c
                     }, o);
                     l.fileCount = a.length;
@@ -96,12 +96,12 @@ customElements.define("explore-tree", class extends e {
             namePath: l,
             fileContentMap: n
         } = this;
-        let s;
-        s = o.fileContentKey ? n[o.fileContentKey] : ({
+        let i;
+        i = o.fileContentKey ? n[o.fileContentKey] : ({
             fileContent: l,
             fileContentKey: t
         } = await f("getFileContent", {
             filePath: l
-        }), n[o.fileContentKey = t] = l), e == this.selectedElement && this.showContent(s);
+        }), n[o.fileContentKey = t] = l), e == this.selectedElement && this.showContent(i);
     }
 });

package/static/datafolderui/folder-tree.js

@@ -1,5 +1,74 @@
 import {
-    defineStyledElement as e
+    QyStyledElement as e
 } from "./QyStyledElement.js";
 
-e("folder-tree", [ "../tree.js/tree.css" ]);
+import {
+    h as t
+} from "./hscrpt.js";
+
+customElements.define("folder-tree", class extends e {
+    constructor() {
+        super([ "../tree.js/tree.css" ]);
+    }
+    compose() {
+        var e = t("div", {
+            style: {
+                overflow: "auto"
+            }
+        });
+        this.shadowRoot.append(e), Object.assign(this, {
+            folderTreeDiv: e,
+            folderTree: new Tree(e, {
+                navigate: !0
+            }),
+            fileContentMap: {}
+        });
+    }
+    constructFolderTree(e) {
+        (t = (o = this).rootFolder) && (t.parentElement.remove(), Object.assign(o, {
+            rootFolder: void 0,
+            fileContentMap: {}
+        }));
+        var {
+            folderTree: t,
+            fileContentMap: o
+        } = this, r = this.rootFolder = t.folder({
+            name: "/",
+            open: !0
+        });
+        e && !function o(r, l, s, e) {
+            let n = s.dataset;
+            let {
+                fullPathHash: t,
+                subdirMap: a,
+                fileMap: f
+            } = e;
+            t && (n.fullPathHash = t);
+            if (a) {
+                let e = Object.keys(a).sort();
+                for (var i of e) {
+                    let e = r.folder({
+                        name: i
+                    }, s);
+                    o(r, l, e, a[i]);
+                }
+                let t = e.length;
+                0 < t && (n.subdirCount = t);
+            }
+            if (f) {
+                let e = Object.keys(f).sort();
+                for (var d of e) {
+                    let {
+                        fileContent: e,
+                        fileContentKey: t
+                    } = f[d], o = r.file({
+                        name: d
+                    }, s);
+                    o.dataset.fileContentKey = t, l[t] = e;
+                }
+                let t = e.length;
+                0 < t && (n.fileCount = t);
+            }
+        }(t, o, r, e);
+    }
+});

package/static/datafolderui/hscrpt.js

@@ -1,13 +1,32 @@
 function t(t, e, r) {
     Array.isArray(e) && (r = e, e = {});
-    var s, i, o = document.createElement(t);
-    for (s in e) {
-        var a = e[s];
-        if ("style" === s) o.style = "string" == typeof (i = a) ? i : Object.entries(i).map(([ t, e ]) => t + ":" + e).join(";"); else if ("classList" === s) o.classList = "string" == typeof (i = a) ? i : i.join(" "); else if (s.startsWith("data-") || s.startsWith("aria-")) o.setAttribute(s, a); else if ("attrs" === s) for (var n in a) o.setAttribute(n, a[n]); else if ("on" === s) for (var f in a) o.addEventListener(f, a[f]); else o[s] = a;
+    var a, s, o = document.createElement(t);
+    for (a in e) {
+        var i = e[a];
+        switch (a) {
+          case "style":
+            o.style = "string" == typeof (s = i) ? s : Object.entries(s).map(([ t, e ]) => t + ":" + e).join(";");
+            break;
+
+          case "classList":
+            o.classList = "string" == typeof (s = i) ? s : s.join(" ");
+            break;
+
+          case "attrs":
+            for (var n in i) o.setAttribute(n, i[n]);
+            break;
+
+          case "on":
+            for (var c in i) o.addEventListener(c, i[c]);
+            break;
+
+          default:
+            a.startsWith("data-") || a.startsWith("aria-") ? o.setAttribute(a, i) : o[a] = i;
+        }
     }
-    if ("function" == typeof o.compose && o.compose(), r) {
-        var l, c = o.shadowRoot || o;
-        for (l of r.filter(t => null != t)) c.appendChild("string" == typeof l ? document.createTextNode(l) : l);
+    if (o.compose && "function" == typeof o.compose && o.compose(), r) {
+        var f, p = o.shadowRoot ?? o;
+        for (f of r.filter(t => null != t)) p.appendChild("string" == typeof f ? document.createTextNode(f) : f);
     }
     return o;
 }

package/static/datafolderui/json-view.js

@@ -1,8 +1,18 @@
 import {
-    defineStyledElement as n
+    QyStyledElement as n
 } from "./QyStyledElement.js";
 
-n("json-view", `
+import {
+    h as o
+} from "./hscrpt.js";
+
+import {
+    setHeight as e
+} from "./QyUIUtils.js";
+
+customElements.define("json-view", class extends n {
+    constructor() {
+        super(`
 .json-container {
   font-family: "Open Sans";
   font-size: 14px;
@@ -69,4 +79,25 @@ n("json-view", `
   border-width: 5px 0 5px 6px;
   border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) gray;
 }
-`);
+`);
+    }
+    compose() {
+        this.shadowRoot.append(this.jsonViewDiv = o("div", {
+            style: {
+                overflow: "auto"
+            }
+        }));
+    }
+    setHeight(n) {
+        e(this.jsonViewDiv, n);
+    }
+    show(n) {
+        this.clear();
+        n = this.jsonTree = jsonview.create(n);
+        jsonview.render(n, this.jsonViewDiv), jsonview.expand(n);
+    }
+    clear() {
+        var n = this.jsonTree;
+        n && (jsonview.destroy(n), this.jsonTree = void 0);
+    }
+});