datafolder 1.0.5 → 1.0.6

package/static/datafolderui/QyUIFolderTree.js

@@ -3,24 +3,27 @@ import {
 } from "../w2ui/src/w2compat.js";
 
 import {
-    h as i
+    h as c
 } from "./hscrpt.js";
 
 import {
-    setHeight as r
+    setHeight as o,
+    isNotNullObj as r
 } from "./QyUIUtils.js";
 
 import "./folder-tree.js";
 
 import "./json-view.js";
 
+import "./code-mirror.js";
+
 class e extends HTMLElement {
     constructor() {
         super();
     }
     connectedCallback() {
         this.parentDiv = this.parentElement;
-        var e = new s({
+        var r, e, t = new s({
             box: this.parentDiv,
             name: "layout_" + this.parentDiv.id,
             panels: [ {
@@ -33,171 +36,144 @@ class e extends HTMLElement {
                 type: "bottom",
                 size: 10
             } ]
-        }), t = (e.el("left").append(this._createToolbar(), this._createFolderTree()), 
-        e.el("main"));
-        t.append(this._createPathUL(), this._createJsonViewDiv()), e.el("bottom").append(this._createMsgSpan()), 
-        Object.assign(this, {
-            layout: e,
-            mainDiv: t,
-            selectedHierarchy: {},
-            fileContentMap: {},
-            namePath: []
-        }), e.on("resize:done", () => this.onSizeChange());
-    }
-    onSizeChange() {
-        var {
-            parentDiv: e,
-            folderTreeDiv: t,
-            jsonViewDiv: s,
-            mainDiv: i
-        } = this;
-        r(e, document.body.clientHeight - e.offsetTop), r(t, i.clientHeight - t.offsetTop - 1), 
-        r(s, i.clientHeight - s.offsetTop - 1), this._updateContentDisplay();
-    }
-    showMsg(e) {
-        this.msgSpan.innerText = e;
-    }
-    _updateContentDisplay() {
-        var e = this.selectedElement;
-        e ? this._showSelected(e) : this._deleteJsonTree();
-    }
-    _deleteJsonTree() {
-        var e = this.jsonTree;
-        e && (jsonview.destroy(e), this.jsonTree = void 0);
-    }
-    _createMsgSpan() {
-        return this.msgSpan = i("span");
-    }
-    _createJsonViewDiv() {
-        return i("json-view", [ this.jsonViewDiv = i("div", {
+        }), i = (t.el("left").append((i = this).toolbarDiv = c("div", {
+            classList: "btn-toolbar",
+            role: "toolbar",
+            style: "border-bottom: 1px solid #e4e4e4"
+        }, [ (e => c("div", {
+            classList: "input-group"
+        }, [ c("input", {
+            id: "searchInput_" + e.parentDiv.id,
+            type: "text",
+            classList: "form-control",
             style: {
-                overflow: "auto"
+                width: "150px"
             }
-        }) ]);
-    }
-    _createPathUL() {
-        return this.pathUL = i("ul", {
-            classList: "nav nav-tabs"
-        });
-    }
-    _createSearchIcon() {
-        return i("div", {
+        }) ]))(i), c("div", {
             classList: "btn-group btn-group-sm",
             role: "group"
-        }, [ i("button", {
+        }, [ c("button", {
             classList: "btn btn-outline-success",
             type: "submit"
-        }, [ i("i", {
+        }, [ c("i", {
             classList: "bi bi-search"
-        }) ]) ]);
-    }
-    _createSearchInput() {
-        return i("div", {
-            classList: "input-group"
-        }, [ i("input", {
-            id: "searchInput_" + this.parentDiv.id,
-            type: "text",
-            classList: "form-control",
+        }) ]) ]) ]), (i = c("folder-tree", [ (r = this).folderTreeDiv = c("div", {
             style: {
-                width: "150px"
+                overflow: "auto"
             }
-        }) ]);
-    }
-    _createToolbar() {
-        return this.toolbarDiv = i("div", {
-            classList: "btn-toolbar",
-            role: "toolbar",
-            style: "border-bottom: 1px solid #e4e4e4"
-        }, [ this._createSearchInput(), this._createSearchIcon() ]), this.toolbarDiv;
-    }
-    _createFolderTree() {
-        var e = i("folder-tree", [ this.folderTreeDiv = i("div", {
+        }) ]), r.folderTree = new Tree(r.folderTreeDiv, {
+            navigate: !0
+        }), r.folderTree.on("select", e => {
+            if (!r.clickSrc) {
+                r.clickSrc = "folderTree";
+                var t = r, i = e, {
+                    folderTree: s,
+                    selectedHierarchy: o
+                } = t, s = s.hierarchy(i).reverse();
+                t.namePath = s.map(e => e.textContent), Object.assign(o, s);
+                {
+                    var n = t;
+                    let {
+                        namePath: i,
+                        pathUL: e
+                    } = n, s = e.children, o = i.length, r = 0 < o;
+                    for (let t = 0; t < o; ++t) {
+                        if (t >= s.length) {
+                            for (let e = t; e < o; ++e) ((r, n, e) => {
+                                e = c("span", {
+                                    classList: "nav-link",
+                                    "data-bs-toggle": "tab",
+                                    role: "tab",
+                                    style: "cursor:pointer",
+                                    onclick: () => {
+                                        r.clickSrc || (r.clickSrc = "tab");
+                                        var t = n, {
+                                            clickSrc: e,
+                                            rootFolder: i,
+                                            selectedHierarchy: s,
+                                            folderTree: o
+                                        } = e = r;
+                                        i.parentElement.open = !0;
+                                        for (let e = 0; e < t; ++e) s[e].parentElement.open = !0;
+                                        i = s[t], "tab" == e && i.scrollIntoView({
+                                            block: "center"
+                                        }), o.select(i), "tab" == r.clickSrc && (r.clickSrc = void 0);
+                                    }
+                                }, [ e ]), r.pathUL.append(c("li", {
+                                    classList: "nav-item"
+                                }, [ e ]));
+                            })(n, e, i[e]);
+                            break;
+                        }
+                        var l = s[t].children[0], a = i[t];
+                        l.innerText != a && (l.innerText = a, r = !1);
+                    }
+                    if (!r) for (;o < s.length; ) e.removeChild(e.lastElementChild);
+                    0 < o && s[o - 1].children[0].click();
+                }
+            }
+            r.selectedElement != e && (r.selectedElement = e, d(r)), "folderTree" == r.clickSrc && (r.clickSrc = void 0);
+        }), i)), t.el("main"));
+        i.append(this.pathUL = c("ul", {
+            classList: "nav nav-tabs"
+        }), this.contentDiv = c("div", [ (e = this).jsonView = c("json-view", [ e.jsonViewDiv = c("div", {
             style: {
                 overflow: "auto"
             }
-        }) ]);
-        return this.folderTree = new Tree(this.folderTreeDiv, {
-            navigate: !0
-        }), this.folderTree.on("select", e => {
-            this.clickSrc || (this.clickSrc = "folderTree", this._updateHierarchy(e)), 
-            this.selectedElement != e && (this.selectedElement = e, this._updateContentDisplay()), 
-            "folderTree" == this.clickSrc && (this.clickSrc = void 0);
-        }), e;
-    }
-    _showSelected(e) {
-        "file" == e.dataset.type ? this._showSelectedFile(e) : this._showSelectedDir(e);
-    }
-    _showSelectedFile(e) {
-        this._showJson(this.fileContentMap[e.dataset.fileContentKey]);
-    }
-    _showSelectedDir(e) {
-        "false" != e.parentElement.dataset.loaded ? this._showJson(e.dataset) : this._showJson({
-            loaded: !1
-        });
-    }
-    _showJson(e) {
-        this._deleteJsonTree();
-        e = jsonview.create(e);
-        jsonview.render(e, this.jsonViewDiv), jsonview.expand(e), this.jsonTree = e;
-    }
-    _updateHierarchy(e) {
-        var {
-            folderTree: t,
-            selectedHierarchy: s
-        } = this, t = t.hierarchy(e).reverse();
-        this.namePath = t.map(e => e.textContent), Object.assign(s, t), this._updatePathTabs();
+        }) ]) ])), t.el("bottom").append(this.msgSpan = c("span")), Object.assign(this, {
+            layout: t,
+            mainDiv: i,
+            selectedHierarchy: {},
+            fileContentMap: {},
+            namePath: []
+        }), t.on("resize:done", () => this.onSizeChange());
     }
-    _onPathTabsClick(t) {
+    onSizeChange() {
         var {
-            clickSrc: e,
-            rootFolder: s,
-            selectedHierarchy: i,
-            folderTree: r
+            parentDiv: e,
+            folderTreeDiv: t,
+            jsonViewDiv: i,
+            mainDiv: s
         } = this;
-        s.parentElement.open = !0;
-        for (let e = 0; e < t; ++e) i[e].parentElement.open = !0;
-        s = i[t];
-        "tab" == e && s.scrollIntoView({
-            block: "center"
-        }), r.select(s);
+        o(e, document.body.clientHeight - e.offsetTop), o(t, s.clientHeight - t.offsetTop - 1), 
+        o(i, s.clientHeight - i.offsetTop - 1), d(this);
     }
-    _createPathTab(e, t) {
-        t = i("span", {
-            classList: "nav-link",
-            "data-bs-toggle": "tab",
-            role: "tab",
-            style: "cursor:pointer",
-            onclick: () => {
-                this.clickSrc || (this.clickSrc = "tab"), this._onPathTabsClick(e), 
-                "tab" == this.clickSrc && (this.clickSrc = void 0);
-            }
-        }, [ t ]);
-        this.pathUL.append(i("li", {
-            classList: "nav-item"
-        }, [ t ]));
+    showMsg(e) {
+        this.msgSpan.innerText = e;
     }
-    _updatePathTabs() {
-        var {
-            namePath: s,
-            pathUL: e
-        } = this, i = e.children, r = s.length;
-        let a = 0 < r;
-        for (let t = 0; t < r; ++t) {
-            if (t >= i.length) {
-                for (let e = t; e < r; ++e) this._createPathTab(e, s[e]);
-                break;
-            }
-            var o = i[t].children[0], n = s[t];
-            o.innerText != n && (o.innerText = n, a = !1);
+    deleteJsonTree() {
+        var e = this.jsonTree;
+        e && (jsonview.destroy(e), this.jsonTree = void 0);
+    }
+    showSelectedFile(e) {
+        this.showContent(this.fileContentMap[e.dataset.fileContentKey]);
+    }
+    showSelectedDir(e) {
+        "false" != e.parentElement.dataset.loaded ? this.showContent(e.dataset) : this.showContent("not loaded");
+    }
+    showContent(t) {
+        if (r(t)) {
+            var e = this.codemirror, e = (e && (e.hidden = !0), this.jsonView.hidden = !1, 
+            this), i = t;
+            e.deleteJsonTree(), i = jsonview.create(i), jsonview.render(i, e.jsonViewDiv), 
+            jsonview.expand(i), e.jsonTree = i;
+        } else {
+            let e = this.codemirror;
+            e ? e.hidden = !1 : this.contentDiv.append(e = this.codemirror = c("code-mirror", {
+                readOnly: !0
+            })), this.jsonView.hidden = !0, e.text = t;
         }
-        if (!a) for (;r < i.length; ) e.removeChild(e.lastElementChild);
-        0 < r && i[r - 1].children[0].click();
     }
-    _resetPathTabs() {
+    resetPathTabs() {
         this.pathUL.replaceChildren();
     }
 }
 
+function d(e) {
+    var t, i = e.selectedElement;
+    i ? (t = e, "file" == (i = i).dataset.type ? t.showSelectedFile(i) : t.showSelectedDir(i)) : e.deleteJsonTree();
+}
+
 export {
     e as QyUIFolderTree
 };

package/static/datafolderui/QyUIUtils.js

@@ -13,9 +13,9 @@ async function t(e, n, o) {
         };
     }
     try {
-        var a = await fetch(t, i);
-        if (a.ok) return await a.json();
-        console.error("Response status: " + a.status);
+        var r = await fetch(t, i);
+        if (r.ok) return await r.json();
+        console.error("Response status: " + r.status);
     } catch (t) {
         console.error(`Calling ${e} with ${n} failed:`, t);
     }
@@ -34,9 +34,14 @@ function o(t, e) {
     n.textContent = e, t.appendChild(n);
 }
 
+function i(t) {
+    return null != t && "object" == typeof t;
+}
+
 export {
     t as rpc,
     e as setHeight,
     n as setWidth,
-    o as appendStyle
+    o as appendStyle,
+    i as isNotNullObj
 };

package/static/datafolderui/code-mirror.js

@@ -0,0 +1,35 @@
+customElements.define("code-mirror", class extends HTMLElement {
+    constructor() {
+        super();
+    }
+    compose() {
+        var r, e;
+        this.codemirror || ({
+            readOnly: r,
+            changeCallback: e
+        } = this, this.codemirror = createCodeMirror(this, r, e));
+    }
+    get text() {
+        return this.codemirror?.state.doc.toString() ?? "";
+    }
+    set text(r) {
+        var e = this.codemirror;
+        e && e.dispatch({
+            changes: {
+                from: 0,
+                to: e.state.doc.length,
+                insert: r
+            }
+        });
+    }
+    get hidden() {
+        return !!this.codemirror?.dom.hidden;
+    }
+    set hidden(r) {
+        var e = this.codemirror;
+        e && (e.dom.hidden = !!r);
+    }
+    clearHistory() {
+        this.codemirror?.clearHistory();
+    }
+});

package/static/datafolderui/display-tree.js

@@ -1,108 +1,74 @@
 import {
-    h
+    h as t
 } from "./hscrpt.js";
 
 import {
-    rpc
-} from "./QyUIUtils.js";
-
-import {
-    QyUIFolderTree
+    QyUIFolderTree as e
 } from "./QyUIFolderTree.js";
 
-customElements.define("display-tree", class extends QyUIFolderTree {
+customElements.define("display-tree", class extends e {
     constructor() {
         super();
     }
     connectedCallback() {
-        super.connectedCallback(), this._appendToolbar();
-        var e = this.folderTree;
+        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);
     }
     showTree(e, t) {
-        this._resetTree(), this._resetPathTabs(), this.countSpan.innerText = t, 
-        this.msgSpan.innerText = "Total " + t, this.rootFolder = this.folderTree.folder({
-            name: "/",
-            open: !0
-        }), this._constructFolderTree(this.rootFolder, e), this.folderTree.select(this.rootFolder), 
-        this.tree = e;
-    }
-    _appendToolbar() {
-        this.toolbarDiv.append(this._createCountSpan());
-    }
-    _createCountSpan() {
-        return this.countSpan = h("span", {
-            classList: "btn btn-success ms-auto"
-        }, [ "0" ]);
-    }
-    _resetTree() {
-        this._deleteJsonTree();
-        var {
-            rootFolder: e,
-            countSpan: t,
-            msgSpan: r
-        } = this;
-        t.innerText = "0", r.innerText = "", e && (e.parentElement.remove(), Object.assign(this, {
+        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: {}
-        }));
-    }
-    async _queryFiles() {
-        let {
-            countSpan,
-            queryEditor
-        } = this, {
-            queryText
-        } = queryEditor;
-        try {
-            eval("((x)=>x)(" + queryText + ")");
-        } catch (exception) {
-            return void (countSpan.innerText = exception.message);
-        }
-        let {
-            queryId
-        } = this, {
-            tree,
-            count
-        } = (++this.queryId, await rpc("queryFiles", queryText));
-        queryId + 1 == this.queryId && this.showTree(tree, count);
-    }
-    _constructFolderTree(e, t) {
-        var {
-            folderTree: r,
-            fileContentMap: o
-        } = this, s = e.dataset, {
-            fullPathHash: t,
-            subdirMap: n,
-            fileMap: i
-        } = t;
-        if (t && (s.fullPathHash = t), n) {
-            var a, t = Object.keys(n).sort();
-            for (a of t) {
-                var l = r.folder({
-                    name: a
-                }, e);
-                this._constructFolderTree(l, n[a]);
+        })), 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);
             }
-            t = t.length;
-            0 < t && (s.subdirCount = t);
-        }
-        if (i) {
-            var c, t = Object.keys(i).sort();
-            for (c of t) {
-                var {
-                    fileContent: d,
-                    fileContentKey: h
-                } = i[c];
-                o[r.file({
-                    name: c
-                }, e).dataset.fileContentKey = h] = d;
+            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);
             }
-            t = t.length;
-            0 < t && (s.fileCount = t);
-        }
+        }(this, this.rootFolder, e), this.folderTree.select(this.rootFolder), this.tree = e;
     }
 });