efront 3.18.0 → 3.18.1

package/apps/pivot/link/chat.js

@@ -14,6 +14,9 @@ async function link(id, page) {
         if (removed) break;
         xhr = data.from("care", { id }, function (data) {
             page.$scope.msglist.push.apply(page.$scope.msglist, data);
+            var { msglist } = page.$scope;
+            var chat = page.querySelector("chat");
+            chat.go(msglist.length ? msglist.length - 1 : 0);    
         });
         await xhr;
     }

package/apps/pivot/link/list.html

@@ -1,11 +1,9 @@
-<btn @click="chat()">新建连接</btn>
-<div>
-    自动刷新<swap -model="autoreload"></swap>
-</div>
 <div class="clusters">
     <a -repeat="(c,i) in clusters" ng-class="{current:i===index.index}" @click="active(i,c)">
         <span -text="c"></span>
     </a>
+    自动刷新<swap -model="autoreload"></swap>
+    <btn @click="chat()">新建连接</btn>
 </div>
 <lattice -src="c in clients">
     <padding>

package/apps/pivot/link/list.js

@@ -4,7 +4,7 @@ function main() {
     page.innerHTML = template;
     renderWithDefaults(page, {
         load: lazy(async function () {
-            this.clusters = data.asyncInstance("cluster", { opt: "list" });
+            this.clusters = data.lazyInstance("cluster", { opt: "list" });
             await this.clusters;
             this.active();
         }, -1000),

package/apps/pivot/link/list.less

@@ -1,9 +1,14 @@
 .clusters a {
     display: inline-block;
-    margin-right: 20px;
     padding: 0 6px;
 }
-
+.clusters>*{
+    vertical-align: top;
+    margin-right: 12px;
+}
+.clusters{
+    padding-left: 6px;
+}
 .time {
     color: #bbb;
 }

package/coms/frame/chat.html

@@ -1,13 +1,19 @@
-<div head -html="title">
+<div head>
+    <template -src="title">
+    </template>
+    <close @click="remove()"></close>
 </div>
-<grid body>
+<grid body #body>
     <chat -src="m in msglist">
-        <msg class="msg" -src="m"></msg>
+        <padding>
+            <msg class="msg"></msg>
+            <div style="clear: both;"></div>
+        </padding>
     </chat>
-    <div textarea>
-        <div contenteditable="true" -model="text"></div>
+    <div textarea @mousedown="this.firstChild.focus()">
+        <div @input="resize(body)" @keydown.alt.enter="send()" contenteditable="true" -model="text"></div>
     </div>
 </grid>
 <div foot>
-    <btn @click="send()">发送</btn>
+    <btn @click="send();">发送</btn>
 </div>

package/coms/frame/chat.js

@@ -1,16 +1,18 @@
 
-function msg(elem) {
-    care(elem, function (data) {
-        if (!data) return;
-        var m = JSAM.parse(data);
-        if (m) switch (m.type) {
-            case "html":
-                elem.innerHTML = m.content;
-                break;
-            default:
-                elem.innerText = data;
-        }
-    })
+function msg(elem, { m: data }, parentScopes) {
+    if (!data) return;
+    data = encode62.timedecode(data);
+    var m = JSAM.parse(data);
+    if (m.sender === parentScopes[parentScopes.length - 1].localid) {
+        elem.setAttribute("self", "");
+    }
+    if (m) switch (m.type) {
+        case "html":
+            elem.innerHTML = m.content;
+            break;
+        default:
+            elem.innerText = data;
+    }
 }
 function chat(title = '会话窗口') {
     var page = view();
@@ -25,13 +27,32 @@ function chat(title = '会话窗口') {
         text: '',
         localid: Math.random(),
         msg,
+        remove() {
+            remove(page);
+        },
+        resize(body) {
+            var textarea = body.querySelector("[textarea]");
+            var lastElementChild = textarea.lastElementChild;
+            var targetHeight = Math.min(textarea.scrollHeight, body.clientHeight * .6, lastElementChild.offsetTop + lastElementChild.offsetHeight);
+            if (Math.abs(targetHeight - textarea.clientHeight) < 2) return;
+
+            body.resizeCell(textarea, 'top', textarea.clientHeight - targetHeight - 2);
+        },
         send() {
             if (!this.text) return;
-            cast(page, "send", JSAM.stringify({
+            var data = JSAM.stringify({
                 type: 'html',
                 sender: this.localid,
                 content: this.text,
-            }));
+            });
+
+            data = encode62.timeencode(data);
+            if (this.text.length > 2000) {
+                alert("信息太长，无法发送！");
+                return;
+            }
+            cast(page, "send", data);
+            this.body.lastElementChild.focus();
             this.text = '';
         }
     });

package/coms/frame/chat.less

@@ -1,5 +1,5 @@
-@height: 320px;
-@width: 360px;
+@height: 420px;
+@width: 480px;
 @margin-top: -160px;
 @margin-left: -180px;
 
@@ -18,9 +18,56 @@
     max-height: 100%;
 }
 
+padding {
+    display: block;
+    position: relative;
+
+    &:after {
+        display: "";
+        display: block;
+        clear: both;
+    }
+}
 
 msg {
     display: block;
+    border-radius: 4px;
+    padding: 6px 12px;
+    line-height: 20px;
+    white-space: normal;
+    word-break: break-all;
+    background: #fff;
+    position: relative;
+    margin: 0 10px;
+    float: left;
+
+    &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        border: 6px solid transparent;
+        top: 22px;
+        margin: -12px;
+    }
+
+    &:not([self]):before {
+        display: block;
+        left: 0;
+        border-right-color: #fff;
+    }
+
+    &[self] {
+        &:before {
+            right: 0;
+            border-left-color: #77ddaa;
+        }
+
+        margin-left: 20px;
+
+        float: right;
+        background-color: #77ddaa;
+        color: #333;
+    }
 }
 
 
@@ -67,14 +114,17 @@ chat {
     border: none;
     outline: none;
     border-top: 1px solid #000;
+    border-bottom: 30px solid transparent;
     ime-mode: active;
+    overflow: auto;
 
     >div {
-        height: 100%;
+        height: auto;
+        min-height: 49px;
         width: 100%;
         vertical-align: top;
-        padding: 6px 16px 30px;
-        overflow: auto;
+        padding: 6px 16px;
+        box-sizing: border-box;
         outline: none;
     }
 }
@@ -104,10 +154,12 @@ chat {
     .editor-height(36px);
 
     [textarea] {
-        border: none;
+        border-bottom: none;
         outline: none;
-        >div{
-            padding-right: 80px;
+
+        >div {
+            min-height: 30px;
+            padding-right: 110px;
         }
     }
 }

package/coms/zimoli/HexEditor.js

@@ -41,6 +41,7 @@ var filterKey = function (event) {
         if (c === s) break;
     }
     if (keyCode === 8) {
+        if (!s) return;
         event.preventDefault();
         if (s.nextSibling) {
             if (s.nextSibling.innerText === '_') {

package/coms/zimoli/HexEditor.less

@@ -7,7 +7,7 @@
     min-height: 100px;
     padding: 0 0 10px 16px;
     font-family: 宋体;
-    width: 422px;
+    width: 438px;
 
     >a {
         display: inline-block;
@@ -32,7 +32,7 @@
     &:before {
         position: relative;
         white-space: nowrap;
-        box-sizing: border-box;
+        box-sizing: content-box;
         color: #ccc;
         word-spacing: 2px;
         font-size: inherit;

package/coms/zimoli/container.js

@@ -11,6 +11,7 @@ var gosrc = function () {
     }
 };
 function container(element) {
+    element = document.createComment('container');
     care(element, change);
     element.renders = [gosrc];
     return element;

package/coms/zimoli/grid.js

@@ -202,6 +202,21 @@ var resizeView = function (event) {
     }
     grid.reshape();
 };
+var clearResizer = function (grid) {
+    var target = grid.editting.target;
+    if (target) target.style.zIndex = null;
+    var { clientX, clientY } = grid.editting;
+    if (clientX) {
+        clientX[1].forEach(e => removeClass(e, 'border-right'));
+        clientX[2].forEach(e => removeClass(e, 'border-left'));
+    }
+    if (clientY) {
+        clientY[1].forEach(e => removeClass(e, "border-bottom"));
+        clientY[2].forEach(e => removeClass(e, "border-top"));
+    }
+    grid.editting = null;
+};
+
 var resizer = function (event) {
     var grid = this;
     if (!grid.direction) return;
@@ -227,24 +242,7 @@ var resizer = function (event) {
         //右边
         generateResizeParameters.call(grid, "x", "left", "right", "width", area.right, event, 1, resize);
     }
-    grid.editting = resize;
-    var cancelup = onmouseup(window, function () {
-        var target = grid.editting.target;
-        if (target) target.style.zIndex = null;
-        var { clientX, clientY } = resize;
-        resize = null;
-        if (clientX) {
-            clientX[1].forEach(e => removeClass(e, 'border-right'));
-            clientX[2].forEach(e => removeClass(e, 'border-left'));
-        }
-        if (clientY) {
-            clientY[1].forEach(e => removeClass(e, "border-bottom"));
-            clientY[2].forEach(e => removeClass(e, "border-top"));
-        }
-        grid.editting = null;
-
-        cancelup();
-    });
+    return grid.editting = resize;
 };
 var gridListener = function () {
     var grid = this;
@@ -261,7 +259,14 @@ var gridListener = function () {
     /**
      * 指针按下
      */
-    var offmousedown = onmousedown(grid, resizer);
+    var offmousedown = onmousedown(grid, function (event) {
+        if (!resizer.call(this, event)) return;
+        var that = this;
+        var cancelup = onmouseup(window, function () {
+            clearResizer(that);
+            cancelup();
+        });
+    });
 
     var offremove = onremove(grid, function () {
         offremove();
@@ -359,6 +364,51 @@ var bindToOrderedSpliters = function (split_points, target, value, side) {
     return split_points;
 };
 var grid_prototype = {
+    resizeCell(cell, side, delta) {
+        side = side.toLowerCase();
+        var { left, top, right, bottom } = getScreenPosition(cell);
+        var clientX, clientY, targetX, targetY;
+        var direction;
+        switch (side.toLowerCase()[0]) {
+            case "l":
+            case "w":
+                direction = 'w';
+                clientX = left;
+                targetX = left + delta;
+                targetY = clientY = top + bottom >> 1;
+                break;
+            case "t":
+            case "n":
+                direction = 'n';
+                clientY = top;
+                targetY = top + delta;
+                targetX = clientX = left + right >> 1;
+                break;
+            case "r":
+            case "e":
+                direction = 'e';
+                clientX = right;
+                targetX = right + delta;
+                targetY = clientY = left + right >> 1;
+
+                break;
+            case "b":
+            case "s":
+                direction = 's';
+                clientX = bottom;
+                targetY = bottom + delta;
+                targetX = clientX = left + right >> 1;
+                break;
+            default:
+                throw new Error("参数不支持", side);
+        }
+        this.direction = direction;
+        var e = resizer.call(this, { clientX, clientY, target: cell });
+        if (!e) return;
+        resizeView.call(this, { clientX: targetX, clientY: targetY, target: cell });
+        clearResizer(this);
+        this.direction = '';
+    },
     setGrid(breakpoints, bounds) {
         var grid = this;
         if (!bounds) {

package/coms/zimoli/menu.js

@@ -48,19 +48,20 @@ var getArrayNodes = function (elem) {
         var nodeName = node.children.length > 1 ? node.children[0].innerHTML : node.innerHTML;
         deep++;
         if (nodeName) {
-            nodes.push({
+            nodes.push(new Item({
                 name: nodeName,
                 tab: deep,
                 href: node.getAttribute("path") || node.getAttribute("href"),
                 class: node.className,
                 closed: true
-            });
+            }));
         }
         var index = nodes.length - 1;
         if (node.children.length > 1) {
             [].forEach.call(node.children[1].children, run);
         }
-        nodes[index].children = nodes.splice(index + 1, nodes.length - index);
+        nodes[index].push.apply(nodes[index], nodes.splice(index + 1, nodes.length - index));
+        nodes[index].children = nodes[index];
         deep--;
     };
     [].forEach.call(elem.children, run);
@@ -93,7 +94,7 @@ var getTreeNodes = function (elem) {
 var emitEvent = function (item, event) {
     event.preventDefault(true);
     if (item.disabled) return;
-    active(this, item, item, createItemTarget.call(this, item));
+    active(this, item, item, this.$src ? createItemTarget.call(this, item) : this);
 }
 function bindGlobalkey(elem, keymap, emit) {
     if (elem.keymap) {
@@ -194,8 +195,8 @@ function main(elem, mode) {
             case "y":
             case "vertical":
                 if (!direction) mode = "vertical", direction = 'y';
-                var emit = function (item) {
-                    active(elem, item.value, item, createItemTarget.call(elem, item.value));
+                var emit = function (item, target) {
+                    active(elem, item.value, item, elem.$src ? createItemTarget.call(elem, item.value) : target);
                 };
                 if ("$src" in elem) {
                     getGenerator(elem, 'menu-item');

package/coms/zimoli/menuItem.js

@@ -17,7 +17,7 @@ function main(elem, scope, hasIcon) {
     else {
         item.removeAttribute("disabled");
     }
-    render(item.children, scope, hasIcon instanceof Array ? hasIcon : [{ useIcon: hasIcon, hasIcon, name, icon }], false);
+    render(item.children, scope, hasIcon instanceof Array ? hasIcon : [{ useIcon: hasIcon, hasIcon, name, icon }], 0);
     if (scope.line) item.setAttribute("line", ''), on("click")(item, preventDefault);
     if (scope.hotkey) bindAccesskey(item, scope.hotkey);
     return item;

package/coms/zimoli/menuList.js

@@ -286,6 +286,7 @@ function main(page, items, active, direction = 'y') {
         };
         var $scope = {
             "menu-item"(e, s) {
+                if (s === e.$scope) s = itemName ? s[itemName] : s.menu;
                 var a = button(
                     menuItem(e, s.value, this.hasIcon)
                 );
@@ -293,7 +294,7 @@ function main(page, items, active, direction = 'y') {
                     page.firstMenu = a;
                     page.total = items.length;
                 }
-                a.menu = s.menu;
+                a.menu = s;
                 return a;
             },
             menus: items,

package/coms/zimoli/render.js

@@ -1,17 +1,26 @@
 var hasOwnProperty = {}.hasOwnProperty;
 var renderElements = Object.create(null);
 var presets = Object.create(null);
+var createTemplateNodes = function (text) {
+    var node = document.createElement(this.parentNode.tagName || "div");
+    node.innerHTML = text;
+    remove(this.with);
+    this.with = [].slice.call(node.childNodes, 0);
+    appendChild.after(this, this.with);
+    renderElement(this.with, this.$scope, this.$parentScopes, this.renderid === 9);
+};
 presets.template = function (t) {
     var comment = document.createComment('template');
     comment.$scope = t.$scope;
     comment.$parentScopes = t.$parentScopes;
-    once("append")(comment, function () {
-        var node = document.createElement(comment.parentNode.tagName || "div");
-        node.innerHTML = t.innerHTML;
-        comment.with = [].slice.call(node.childNodes, 0);
-        appendChild.after(comment, comment.with);
-        renderElement(comment.with, comment.$scope, comment.$parentScopes, this.renderid === 9);
-    });
+    if (!t.innerHTML) {
+        care(comment, createTemplateNodes)
+    }
+    else {
+        once("append")(comment, function () {
+            createTemplateNodes.call(comment, t.innerHTML);
+        });
+    }
     return comment;
 };
 window.renderElements = renderElements;

package/coms/zimoli/tree.js

@@ -224,7 +224,7 @@ function tree() {
         _div.refresh();
         onclick(_div, function (event) {
             var isClosed = com.isClosed();
-            if (!active(banner, com.value, com, element.$src ? createItemTarget.call(element, com.value) : _div)) {
+            if (!active(banner, com.value, com, banner.$src ? createItemTarget.call(banner, com.value) : _div)) {
                 return;
             }
             if (isClosed === com.isClosed() && com.length) {

package/coms/zimoli/zimoli.js

@@ -594,7 +594,7 @@ function addGlobal(element, name = null, isDestroy) {
         }
         global[name] = element;
     } else if (isNode(name)) {
-        if (isDestroy) appendChild.insert(name, element);
+        if (isDestroy || name.nodeType !== 1) appendChild.insert(name, element);
         else appendChild(name, element);
     } else if (isFunction(name)) {
         name(element);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "efront",
-    "version": "3.18.0",
+    "version": "3.18.1",
     "description": "一个开发工具，开放源代码，自带组件库和编译环境，可以用来开发web组件，web应用或nodejs模块，或做为已有代码的加密工具，也可以做为静态页面服务器或跨域中转服务器使用",
     "main": "public/efront.js",
     "directories": {