efront 3.26.8 → 3.26.14

package/coms/explorer/main.js

@@ -0,0 +1,215 @@
+var rect = document.createElement('rect');
+rect.setAttribute('insert', '');
+var touchitems = null;
+var selectRected = on("resize")(rect, function () {
+    var lattice = this.nextElementSibling;
+    if (!lattice) return;
+    var selected = [];
+    if (touchitems) for (var m of touchitems) {
+        var file = m.$scope.d;
+        file.selected = overlap(m, rect);
+        if (file.selected) selected.push(file);
+    }
+    lattice.$scope.selected = selected;
+    render.refresh();
+});
+var dragger = null;
+var touch = {
+    start(e) {
+        /**
+         * @type {Element}
+         */
+        var t = this;
+        var a = this.$scope.toActive(e);
+        touchitems = this.querySelectorAll("fileitem");
+        if (a && this.$scope.selected.indexOf(a.$scope.d) >= 0) {
+            dragger = e;
+            if (!drag.target) drag(this.$scope.selected.length === 1 ? a : this.querySelectorAll(".focused"), e);
+            return;
+        }
+        var pos = getScreenPosition(t.parentNode);
+        var pos2 = getScreenPosition(t.previousElementSibling);
+
+        rect.limit = [pos.left + t.parentNode.clientLeft, Math.max(pos.top, pos2.bottom + 1)];
+        rect.event = e;
+        rect.setAttribute('style', '');
+        css(rect, { left: e.clientX - pos.left - t.clientLeft, top: e.clientY - t.clientTop, width: 0, height: 0 })
+    },
+    move(e) {
+        if (!onclick.preventClick) return;
+        if (dragger) {
+            var tiped = null;
+            for (var c of touchitems) {
+                var d = c.$scope.d;
+                if (d.isfolder && !d.selected && overpos(c, e)) {
+                    if (!c.hasAttribute('dropping')) {
+                        if (!drag.tip) {
+                            var t = document.createElement('dragtip');
+                            drag.tip = t;
+                            drag.target.appendChild(t);
+                            drag.target.style.zIndex = zIndex(0) + 2;
+                            css(t, {
+                                display: "bock",
+                                padding: "6px 10px",
+                                height: "auto",
+                                background: "#fff",
+                                border: "1px solid #666",
+                                fontSize: '14px',
+                                lineHeight: 1,
+                                top: '100%',
+                                whiteSpace: 'nowrap',
+                                position: "absolute",
+                            });
+                        }
+                        css(drag.tip, 'display:block');
+                        drag.tip.innerHTML = `<b style="color:#169;font-weight:400">移动到</b> ${c.$scope.d.name}`;
+                        c.setAttribute('dropping', '');
+                    }
+                    tiped = c;
+                }
+                else {
+                    c.removeAttribute('dropping');
+                }
+            }
+            if (!tiped && drag.tip) css(drag.tip, 'display:none');
+            return;
+        }
+        if (e.type !== 'mousemove') return;
+        if (!rect.parentNode) {
+            appendChild.insert(this.parentNode, rect, this);
+            resize(rect, rect.event);
+        }
+        e.moveLocked = true;
+    },
+    async end(e) {
+        touchitems = null;
+        if (dragger) {
+            delete drag.tip;
+            dragger = null;
+            var p = this.querySelector("[dropping]");
+            if (p) {
+                p.removeAttribute("dropping");
+                var $scope = this.$scope;
+                var base = $scope.pathlist.concat(p.$scope.d.name).join("/");
+                for (var s of $scope.selected) {
+                    await $scope.mov(s, base + "/" + s.name);
+                }
+                $scope.open();
+            }
+        }
+        remove(rect);
+    },
+};
+var moveFocus = function (delta) {
+    var { selected, data } = this.$scope;
+    var index, targetIndex;
+    var boxCount = this.group;
+    if (delta === 'home') targetIndex = 0;
+    else if (delta === 'end') targetIndex = data.length - 1;
+    else if (delta === 'pagedown') {
+        if (data.length <= boxCount) {
+            targetIndex = data.length - 1;
+        }
+        else {
+            index = data.indexOf(selected[selected.length - 1]);
+            var e = this.getLastVisibleElement(0);
+            if (e) targetIndex = data.indexOf(e.$scope.d);
+            else targetIndex = data.length - 1;
+            targetIndex = (targetIndex / boxCount | 0) * boxCount + index % boxCount;
+            if (targetIndex >= data.length) targetIndex = data.length - 1;
+        }
+    }
+    else if (delta === 'pageup') {
+        if (data.length <= boxCount) {
+            targetIndex = 0;
+        }
+        else {
+            var f = this.getFirstVisibleElement();
+            var index = data.indexOf(selected[0]);
+            if (!f) targetIndex = 0;
+            else if (f.$scope.d !== selected[0]) {
+                targetIndex = index + ((data.indexOf(f.$scope.d) - index) / boxCount | 0) * boxCount;
+            }
+            else {
+                var e = this.getLastVisibleElement(0);
+                var fi = data.indexOf(f.$scope.d);
+                var ei = data.indexOf(e.$scope.d)
+                targetIndex = fi - ((ei - fi) / boxCount | 0) * boxCount;
+
+            }
+            if (targetIndex < 0) targetIndex = index % boxCount;
+        }
+
+    }
+    else if (!selected.length) {
+        targetIndex = /left|^up/.test(delta) ? data.length - 1 : 0;
+    }
+    else if (typeof delta === 'string') switch (delta) {
+        case "left":
+            index = data.indexOf(selected[0]);
+            if (selected.length > 1) { targetIndex = index; break }
+            targetIndex = index - 1;
+            if (targetIndex < 0) targetIndex = 0;
+            break;
+        case "right":
+            index = data.indexOf(selected[selected.length - 1]);
+            if (selected.length > 1) { targetIndex = index; break }
+            targetIndex = index + 1;
+            if (targetIndex >= data.length) targetIndex = data.length - 1;
+            break;
+        case "up":
+            index = data.indexOf(selected[0]);
+            if (selected.length > 1) { targetIndex = index; break }
+            if (data.length <= boxCount) targetIndex = 0;
+            else if (index >= boxCount) targetIndex = index - boxCount;
+            else targetIndex = index;
+            break;
+        case "down":
+            index = data.indexOf(selected[selected.length - 1]);
+            if (selected.length > 1) { targetIndex = index; break }
+            targetIndex = index + boxCount;
+            if (data.length <= boxCount) targetIndex = data.length - 1;
+            else {
+                if (targetIndex >= data.length) targetIndex = data.length - 1;
+                if ((targetIndex / boxCount | 0) === (index / boxCount | 0)) targetIndex = index;
+            }
+            break;
+
+    }
+    for (var s of selected) {
+        s.selected = false;
+    }
+    var d = data[targetIndex];
+    if (d) d.selected = true, this.$scope.selected = [d];
+    this.setFocus(targetIndex);
+    render.refresh();
+};
+
+var bindkey = function (lattice) {
+    for (var key of "up,down,right,left,pagedown,pageup,home,end".split(",")) {
+        on("keydown.only." + key)(lattice, moveFocus.bind(lattice, key));
+    }
+};
+async function ondrop(event) {
+    event.preventDefault();
+    var files = event.dataTransfer.files;
+    this.$scope.uploadAll(files);
+}
+function main() {
+    var page = document.createElement('explorer');
+    page.innerHTML = template;
+    moveupon(page.querySelector('lattice'), touch);
+    var scope = new explorer$Explorer;
+    renderWithDefaults(page, scope);
+    bind('drop')(scope.listview, ondrop);
+    bindkey(scope.listview);
+    contextmenu(scope.listview, explorer$context);
+    on("pointerdown")(scope.listview, function () {
+        if (document.activeElement !== scope.listview) scope.listview.focus();
+    })
+    onmounted(scope.listview, function () {
+        scope.listview.focus();
+    });
+
+    return page;
+}

package/coms/explorer/main.less

@@ -0,0 +1,78 @@
+>lattice {
+    box-sizing: content-box;
+    outline: none;
+    margin-top: -@height;
+    padding-top: @height + 6px;
+
+    a {
+        vertical-align: top;
+    }
+}
+
+rect {
+    border: 1.5px solid #28c;
+    background: #28c2;
+    position: absolute;
+    display: block;
+    padding: 0;
+    z-index: 1;
+
+    &+lattice {
+        &:after {
+            display: block;
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            content: '';
+        }
+    }
+}
+
+padding {
+    vertical-align: top;
+    border-right-width: 40px;
+    border-left-width: 10px;
+}
+
+>.address {
+    position: relative;
+    z-index: 3;
+    margin-left: 140px;
+    margin-top: -@height - 6px;
+    height: @height;
+    padding: 0 6px;
+    line-height: @height;
+
+    input {
+        width: 100%;
+    }
+}
+
+& {
+    height: 100%;
+}
+
+fileitem {
+    &:hover {
+        outline: 1.2px solid #28c;
+    }
+
+    &:active {
+        color: #28c;
+        outline: 2px solid;
+    }
+
+    &.focused {
+        background: #28c2;
+        outline: 1.2px solid #28c;
+    }
+
+    &[dropping] {
+        background-color: #28c4;
+        outline: 2px solid #28c;
+    }
+}
+
+@height: 44px;

package/coms/frame/route.js

@@ -42,7 +42,7 @@
             hotkey = hotkey.split(',');
             for (var k of hotkey) {
                 k = k.trim().toLowerCase().replace(/[\+\_\s]+/g, '.');
-                if (keymap[k]) console.warn("检查到两个项菜单使用了相同的快捷键", item, keymap[k]);
+                if (keymap[k]) console.warn("检查到两个菜单项使用了相同的快捷键", item, keymap[k]);
                 keymap[k] = item;
             }
             item.hotkey = hotkey;

package/coms/shapes/file.html

@@ -0,0 +1,9 @@
+<svg width="92" height="92" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    style="fill: #666;" overflow="hidden" viewBox="12 135 92 92">
+
+    <g>
+        <path
+            d="M32 215 32 147 60 147 60 168 82 168 82 215 32 215ZM66 149.5 78.5 162 66 162 66 149.5ZM66 141 26 141 26 221 88 221 88 163 66 141Z"
+            fill-rule="evenodd" />
+    </g>
+</svg>

package/coms/shapes/folder.html

@@ -0,0 +1,7 @@
+<svg width="81" height="81" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+    overflow="hidden" style="fill:#fc2;stroke: #f62;" viewBox="19 51 81 81">
+    <g>
+        <path
+            d="M90 120 24 120C21.8 120 20 118.2 20 116L20 68C20 65.8 21.8 64 24 64L42.8 64C43.6 64 44.4 64.2 45 64.7001L56 72 90 72C92.2 72 94 73.8 94 76L94 116C94 118.2 92.2 120 90 120Z" />
+    </g>
+</svg>

package/coms/zimoli/Cleanup.js

@@ -1,14 +1,15 @@
+var clean = removeFromList;
 function Cleanup(list) {
-    function cleanup(target) {
+    if (isArray(list)) return function (target) {// 兼容老用法
         if (isNode(this) && !isNode(target)) {
             target = this;
         }
-        for (var cx = list.length - 1; cx >= 0; cx--) {
-            var element = list[cx];
-            if (element === target) {
-                list.splice(cx, 1);
-            }
-        }
+        clean(list, target);
+        return list.length;
+    }
+    if (isNode(list && list.target) && isNode(this)) {
+        var target = list.target, list = this.with;
+        clean(list, target);
+        if (!list.length) remove(this);
     }
-    return cleanup;
 }

package/coms/zimoli/arriswise.js

@@ -5,11 +5,12 @@ var reflect = {
     height: "width",
     X: "Y",
     Y: "X",
-    "px": "px",
     "deltax": "deltay",
     "deltay": "deltax",
-    "x":"y",
-    "y":"x",
+    "x": "y",
+    "y": "x",
+    "up": "left",
+    "down": "right",
     Top: "Left",
     Left: "Top",
     top: "left",
@@ -19,7 +20,7 @@ var reflect = {
     right: "bottom",
     bottom: "right"
 };
-var regkeys = keys(reflect).map(a => /^[xy]$/.test(a) ? `\\b${a}` : a);
+var regkeys = keys(reflect).map(a => /^[a-z]/.test(a) ? `\\b${a}(?![a-z])` : a);
 var regexps = new RegExp(regkeys.join("|"), "g");
 var rep = function (matched) {
     var searched = reflect[matched];

package/coms/zimoli/attr.js

@@ -5,6 +5,8 @@ function unset(target, k) {
     if (target.hasAttribute(k)) target.removeAttribute(k);
 }
 function attr(target, key, value) {
+    if (value === false) value = null;
+    if (value === true) value = '';
     if (arguments.length === 3) {
         if (value === null) unset(target, key);
         else set(target, key, value);

package/coms/zimoli/bindGlobalkey.js

@@ -0,0 +1,37 @@
+/**
+ * @param {any} item
+ * @param {Event} event
+ */
+var emitEvent = function (item, event) {
+    if (event.defaultPrevented) return;
+    if (!getTargetIn(this, event.target) && !getTargetIn(event.target, this)) return;
+    event.preventDefault(true);
+    if (item.disabled) return;
+    active(this, item, "global", this.$src ? createItemTarget.call(this, item) : this);
+};
+
+var bindonly = function (elem, hotkey, item) {
+    hotkey = hotkey.toLowerCase().replace(/[\s\+\.\_]+/, '.');
+    return bind("keydown.only." + hotkey)(elem, isFunction(item) ? item : emitEvent.bind(elem, item));
+}
+
+function bindGlobalkey(elem, keymap, item) {
+    if (isString(keymap)) {
+        keymap = keymap.split(",");
+    }
+    if (isArray(keymap)) {
+        for (var k of keymap) bindonly(elem, k, item);
+        return;
+    }
+    if (elem.$keyoff) {
+        for (var off of elem.$keyoff) {
+            off();
+        }
+    }
+    if (!keymap) return;
+    var keyoff = [];
+    for (let k in keymap) {
+        keyoff.push(bindonly(elem, k, item));
+    }
+    elem.$keyoff = keyoff;
+}

package/coms/zimoli/confirm.js

@@ -36,13 +36,11 @@ function confirm() {
             target = arg.currentTarget || arg.target;
         }
     });
-    var element = div();
-    element.innerHTML = `<div class=head></div><div class=body></div><div class=option></div>`;
+    var element = view();
+    element.innerHTML = `<div class=head></div><div class=body></div><div class=foot></div>`;
     var [head, body, option] = element.children;
     if (closable) {
-        var closebtn = document.createElement("i");
-        closebtn.title = "关闭";
-        closebtn.className = "close";
+        var closebtn = drop();
         onclick(closebtn, function () {
             remove(element);
         });
@@ -78,7 +76,8 @@ function confirm() {
             options = ["确认 ", "取消"];
         }
     }
-    var clickbtn = function () {
+    var clickbtn = function (event) {
+        event.preventDefault();
         if (element.hasAttribute("locked")) {
             return;
         }
@@ -129,9 +128,10 @@ function confirm() {
     else element.initialStyle = "opacity:0;transition:margin .3s,opacity .2s ease-out;";
     element.tabIndex = -1;
 
-    setTimeout(function () {
+    Promise.resolve().then(function () {
         if (element.parentNode) return;
-        popup(element, target || [.5, .5], target && 'rhomb');
+        element.mask = true;
+        popup(element, target || [.5, .5], target ? 'rhomb' : true);
         element.focus();
         if (!target) drag.on(head, element);
         else {

package/coms/zimoli/confirm.less

@@ -1,90 +1,16 @@
 & {
     position: absolute;
-    margin: 0 auto;
-    top: 50%;
-    max-width: 100%;
-    max-height: 100%;
-    overflow: auto;
-    cursor: default;
-    box-sizing: border-box;
-    background-color: #fff;
-    border: 1px solid #999;
-    box-shadow: 0 0 16px -6px rgba(0, 0, 0, .2);
-}
-
-&:focus {
     outline: none;
+    background: #fff;
 }
 
-div {
-    box-sizing: border-box;
-}
-
-&>.head {
-    line-height: 50px;
-    min-height: 30px;
-    position: relative;
-    padding-left: 16px;
-    position: sticky;
-    top: 0;
-    background: inherit;
-    z-index: 2;
-    font-size: 18px;
-
-    .close {
-        display: block;
-        position: absolute;
-        height: 32px;
-        line-height: 32px;
-        right: 0;
-        top: 0;
-        width: 44px;
-        text-align: center;
-        font-family: 'Times New Roman', Times, serif;
-        font-size: 28px;
-
-
-        &:hover {
-            background: #f00;
-            color: #fff;
-        }
-
-        &:active {
-            background: #f008;
-        }
-
-        &:after {
-            content: "×";
-        }
-    }
+>.head,
+>.foot {
+    border: none;
 }
 
 &>.body {
-    padding: 10px 32px 20px;
-    font-size: 16px;
-
-    >* {
-        max-width: 100%;
-    }
-}
-
-&>.option {
-    position: sticky;
-    bottom: 0;
+    border-bottom: 30px solid transparent;
+    padding-left: 20px;
     background: inherit;
-    text-align: center;
-    padding: 10px 32px;
-    white-space: nowrap;
-
-    >div {
-        display: inline-block;
-        width: auto;
-        min-width: 80px;
-        position: relative;
-    }
-
-    .button {
-        margin: 0 7px;
-        padding: 0 8px;
-    }
 }

package/coms/zimoli/container.js

@@ -1,5 +1,17 @@
-var change = function (data) {
-    if (isNode(data)) {
+var change = async function (data) {
+    if (!data) remove(this.with);
+    else if (isNode(data)) {
+        if (isElement(data) && this.$struct.copys) {
+            for (var c of this.$struct.copys) {
+                if (c.name === 'class') {
+                    addClass(data, c.value);
+                }
+                else if (c.name === 'style') {
+                    css(data, c.value);
+                }
+                else data.setAttribute(c.name, c.value);
+            }
+        }
         zimoli.global(data, this);
     }
     else zimoli.go(data, this.params, this);
@@ -19,8 +31,9 @@ function container(element) {
     if (element && element.hasAttribute('src')) {
         src = element.getAttribute('src');
     }
-    element = document.createComment('container');
-    element.src = src;
-    element.renders = [gosrc];
-    return element;
+    var comment = document.createComment('container');
+    comment.src = src;
+    comment.$struct = element.$struct;
+    comment.renders = [gosrc];
+    return comment;
 }

package/coms/zimoli/contextmenu.js

@@ -17,6 +17,13 @@ var createMenu = function (event, items) {
 
     return elem;
 }
+async function emit(target, event) {
+    if (event.defaultPrevented) return;
+    if (!getTargetIn(target, event.target) && !getTargetIn(event.target, target)) return;
+    event.preventDefault();
+    if (isFunction(this.do)) await this.do(target, 'global');
+    dispatch(window, 'render');
+}
 function contextmenu(target, menuItems) {
     var showContext = function (event) {
         var menu;
@@ -36,30 +43,40 @@ function contextmenu(target, menuItems) {
     };
     var menuHandle = 0;
     var tm;
-    bindtouch(target, {
+    moveupon(target, {
         start(event) {
-            if (event.defaultPrevented) return;
+            if (event.defaultPrevented || event.type === 'mousedown') return;
             clearTimeout(menuHandle);
-            if (tm) remove(tm), tm = null;
             menuHandle = setTimeout(function () {
-                tm = showContext(event);
+                var e = createEvent("contextmenu", true);
+                e.clientX = event.clientX;
+                e.clientY = event.clientY;
+                Object.defineProperty(e, "target", { value: event.target });
+                Object.defineProperty(e, "srcElement", { value: event.srcElement });
+                dispatch(event.target, e);
             }, 600);
         },
         move() {
-            if (onclick.preventClick) return clearTimeout(menuHandle);
+            if (onclick.preventClick) {
+                if (tm) remove(tm);
+                return clearTimeout(menuHandle);
+            }
         },
         end(event) {
             clearTimeout(menuHandle);
-            if (tm) {
-                event.preventDefault();
-                setTimeout(function () {
-                    if (!tm) return;
-                    tm.focus();
-                    onblur(tm, lazy(e => remove(tm)));
-                }, 60);
-            }
+            event.preventDefault();
+            _remove = function () { };
+            setTimeout(function () {
+                _remove = remove;
+                if (tm) tm.focus();
+            });
         }
-    })
+    });
+    var _remove = remove;
+    var blur = lazy(function () {
+        if (document.activeElement === this) return;
+        _remove(this);
+    }, 60);
     on("contextmenu")(target, function (event) {
         if (event.defaultPrevented) return;
         event.preventDefault();
@@ -67,7 +84,10 @@ function contextmenu(target, menuItems) {
         tm = showContext(event);
         if (!tm) return;
         tm.focus();
-        onblur(tm, lazy(e => remove(tm)));
+        onblur(tm, blur);
     });
+    if (isArray(menuItems)) for (var m of menuItems) {
+        if (m.hotkey) bindGlobalkey(target, m.hotkey, emit.bind(m, target));
+    }
     return sampleElement;
 }