efront 3.11.0 → 3.11.4

package/coms/zimoli/menuList.js

@@ -1,4 +1,4 @@
-var mounted_menus = [], releaseTimer = 0;
+var mounted_menus = [], releaseTimer = 0, root_menu;
 var release = function () {
     clear();
     releaseTimer = setTimeout(function () {
@@ -11,7 +11,149 @@ var clear = function () {
 var unfocus = function () {
     remove(mounted_menus);
     this.ispop = false;
+    this.setFocus(null);
 };
+var setFocus = function (focused) {
+    var page = this;
+    if (focused) {
+        if (page.focused !== focused) {
+            if (page.focused) removeClass(page.focused, 'focus');
+            if (focused) addClass(focused, "focus");
+            page.focused = focused;
+        }
+    }
+    else {
+        if (page.focused) {
+            removeClass(page.focused, 'focus');
+            page.focused = null;
+        }
+    }
+};
+var moveFocus = function (delta) {
+    var page = this;
+    var focused = page.focused;
+    var newIndex = 0;
+    if (!focused) {
+        if (delta > 0) newIndex = 0;
+        else newIndex = page.total - 1;
+    }
+    else {
+        var newIndex = focused.index + delta;
+        var total = page.total;
+        if (page !== root_menu) {
+            total++;
+        }
+        if (newIndex < 0) newIndex = total + newIndex;
+        if (newIndex > total - 1) newIndex = newIndex - total;
+    }
+
+    var e = page.getIndexedElement(newIndex);
+    if (!e) page.setFocus(null);
+    else page.open(e);
+};
+var openFocus = function () {
+    var menu = mounted_menus[mounted_menus.length - 1] || root_menu;
+    if (!menu.ispop) menu.ispop = 1;
+    menu.open(menu.focused);
+};
+var closeFocus = function () {
+    var menu = mounted_menus[mounted_menus.length - 1];
+    remove(menu);
+};
+var keyAction = function (deltax, deltay) {
+    if (root_menu !== document.activeElement) return;
+    var menu = mounted_menus[mounted_menus.length - 1];
+    if (menu) var parent = mounted_menus[mounted_menus.length - 2] || root_menu;
+    else menu = root_menu;
+
+    if (menu.direction === 'y') {
+        if (deltax === 1) {
+            if (menu.focused) openFocus();
+            else if (parent && parent.direction !== 'y') {
+                parent.moveFocus(deltax);
+            }
+        }
+        else if (deltax === -1) {
+            if (parent) {
+                if (parent.direction === 'y') remove(mounted_menus.pop());
+                else if (!menu.focused) parent.moveFocus(deltax);
+            }
+        }
+        else {
+            menu.moveFocus(deltay);
+        }
+    }
+    else {
+        if (deltay === 1) {
+            if (menu.focused) openFocus();
+            else if (parent && parent.direction === 'y') {
+                parent.moveFocus(deltay);
+            }
+        }
+        else if (deltay === -1) {
+            if (parent) {
+                if (parent.direction !== 'y') remove(mounted_menus.pop());
+                else if (!menu.focused) parent.moveFocus(deltay);
+            }
+        }
+        else {
+            menu.moveFocus(deltax);
+        }
+    }
+};
+function keyalt() {
+    if (root_menu === document.activeElement) root_menu.blur();
+    else {
+        root_menu.tabIndex = 0;
+        root_menu.focus();
+        root_menu.setFocus(this.firstMenu);
+    }
+}
+function keytab(event) {
+    if (root_menu !== document.activeElement) return;
+    var menu = mounted_menus[mounted_menus.length - 1] || root_menu;
+    event.preventDefault();
+    menu.moveFocus(1);
+}
+function keyesc() {
+    if (root_menu === document.activeElement && !mounted_menus.length) {
+        if (!root_menu.ispop) root_menu.blur();
+        else root_menu.ispop = false;
+    }
+}
+function keyup() {
+    keyAction(0, -1);
+}
+function keydown() {
+    keyAction(0, 1);
+}
+function keyleft() {
+    keyAction(-1, 0)
+}
+function keyright() {
+    keyAction(1, 0);
+}
+function keyspace() {
+    if (root_menu !== document.activeElement) return;
+    var menu = mounted_menus[mounted_menus.length - 1];
+    if (!menu || !menu.focused) menu = mounted_menus[mounted_menus.length - 2] || root_menu;
+    if (menu.focused) {
+        menu.focused.click();
+    }
+}
+function register() {
+    // on('keydown.alt')(window, e => e.preventDefault());
+    on('keydown.tab')(window, keytab);
+    on('keydown.alt.')(window, keyalt);
+    on('keydown.esc')(window, keyesc);
+    on('keydown.left')(window, keyleft);
+    on('keydown.right')(window, keyright);
+    on('keydown.up')(window, keyup);
+    on('keydown.down')(window, keydown);
+    on('keydown.enter')(window, keyspace);
+    on('keydown.space')(window, keyspace);
+    root_menu = this;
+}
 function main(page, items, active, direction = 'y') {
     if (!isNode(page)) {
         var page = div();
@@ -19,18 +161,20 @@ function main(page, items, active, direction = 'y') {
     var main = this;
     if (direction !== 'x') page.ispop = true;
     function popMenu(item, target) {
-        if (page.active) {
+        if (page.actived) {
             clear();
-            remove(page.active);
+            remove(page.actived);
         }
+        page.setFocus(target);
         if (!item.children || !item.children.length) return;
         var clone = template.cloneNode();
         clone.$parentScopes = page.$parentScopes;
+        clone.$scope = page.$scope;
         clone.$src = src;
         clone.innerHTML = template.innerHTML;
         var menu = main(clone, item.children, active);
         mounted_menus.push(menu);
-        page.active = menu;
+        page.actived = menu;
         menu.root = page.root || page;
         popup(menu, target);
         if (page.ispop === true) {
@@ -60,6 +204,44 @@ function main(page, items, active, direction = 'y') {
         template.innerHTML = page.innerHTML;
         page.tempalte = template;
     }
+    var popTimer = 0;
+    var open = function () {
+        cancel();
+        var elem = this;
+        page.setFocus(elem);
+        if (page.ispop) popTimer = setTimeout(function () {
+            popMenu(elem.menu, elem);
+        }, 60);
+    };
+    var cancel = function () {
+        clearTimeout(popTimer);
+    }
+    var fire = function () {
+        cancel();
+        if (this.menu.line) return;
+        var pop = active(this.menu, this);
+        if (pop === false) return;
+        var root = page.root || page;
+        if (root.ispop === 1) root.ispop = false;
+        if (page.actived && page.actived.target === this) {
+            while (mounted_menus.length && mounted_menus[mounted_menus.length - 1] !== page.actived) remove(mounted_menus.pop());
+            if (!mounted_menus.length) {
+                popMenu(this.menu, this);
+            }
+            else {
+                remove(mounted_menus.pop());
+            }
+        }
+        else {
+            while (mounted_menus.length && mounted_menus[mounted_menus.length - 1] !== page) remove(mounted_menus.pop());
+            popMenu(this.menu, this);
+            if (!page.actived) {
+                (page.root || page).blur();
+            }
+        }
+    };
+
+
     if (!page.children.length || page.menutype === 1) {
         page.menutype = 1;
         var hasIcon = function () {
@@ -72,66 +254,40 @@ function main(page, items, active, direction = 'y') {
             return false;
         };
         var $scope = {
-            "menu-item": function (e, s) {
-                return button(
-                    menuItem(e, s)
+            "menu-item"(e, s) {
+                var a = button(
+                    menuItem(e, s, this.hasIcon)
                 );
+                if (!page.firstMenu) {
+                    page.firstMenu = a;
+                }
+                return a;
             },
             menus: items,
             hasIcon: hasIcon(),
-            open(menu, elem) {
-                var pop = active(menu, elem);
-                if (pop === false) return;
-                var root = page.root || page;
-                if (root.ispop === 1) root.ispop = false;
-                if (!mounted_menus.length) {
-                    popMenu.apply(this, arguments);
-                }
-                else {
-                    unfocus.call(page);
-                }
-            },
-            popTimer: 0,
-            popMenu() {
-                if (!page.ispop) return;
-                var args = arguments;
-                return setTimeout(function () {
-                    popMenu.apply(null, args);
-                }, 60);
-            },
+            open: fire,
+            cancel,
+            popMenu: open,
         };
         if (page.$src) {
             var src = page.$src;
-            var parentScopes = page.$parentScopes;
             var itemName = src.itemName;
             var className = `{'has-children':${itemName}.children&&${itemName}.children.length,'warn':${itemName}.type==='danger'||${itemName}.type==='warn'||${itemName}.type==='red'}`;
             var notHidden = `!${itemName}.hidden`;
+            var generator = getGenerator(page, 'menu-item');
+
             list(page, function (index) {
                 var item = items[index];
                 if (!item) return;
-                var a = menuItem(null, item, $scope.hasIcon);
-                var scope = {};
                 if (item instanceof Item) item = item.value;
-                if (src.itemName) scope[src.itemName] = item;
-                else scope.$item = item;
-                if (src.keyName) scope[src.keyName] = index;
-                else scope.$key = index;
-                if (src.indexName) scope[src.indexName] = index;
-                else scope.$index = index;
-                if (src.srcName) scope[src.srcName] = items;
+                var a = $scope["menu-item"](null, item);
                 if (src.itemName) a.setAttribute("e-if", notHidden);
-                on("mouseleave")(a, function () {
-                    clearTimeout($scope.popTimer);
-                });
-                on("mouseenter")(a, function () {
-                    $scope.popTimer = $scope.popMenu(item, this);
-                });
-                on("click")(a, function () {
-                    $scope.open(items[index], this);
-                });
                 a.setAttribute("e-class", className);
-                a = button(a);
-                render(a, scope, parentScopes);
+                a = generator(index, item, a);
+                a.menu = item;
+                on("mouseleave")(a, cancel);
+                on("mouseenter")(a, open);
+                on("click")(a, fire);
                 return a;
             });
             on("append")(page, function () {
@@ -143,31 +299,39 @@ function main(page, items, active, direction = 'y') {
             render(page, $scope);
             vbox(page);
         }
+        page.total = items.length;
         page.renders.unshift(function () {
             this.$scope.hasIcon = hasIcon();
         });
-    } else {
-        var generator = getGenerator(page);
+    }
+    else {
+        var generator = getGenerator(page, 'menu-item');
+
         list(page, function (index) {
             var elem = generator(index);
             if (!elem) return;
-            on("mouseenter")(elem, function () {
-                if (page.ispop) popMenu(this.src[index], this);
-            });
-            on("click")(elem, function () {
-                var pop = active(this.src[index], this);
-                if (pop === false) return;
-                var root = page.root || page;
-                if (root.ispop === 1) root.ispop = false;
-                if (!mounted_menus.length) {
-                    popMenu(this.src[index], this);
-                }
-                else {
-                    unfocus.call(page);
-                }
-            });
+            if (!page.firstMenu) {
+                page.firstMenu = elem;
+                page.total = this.src.length;
+            }
+            elem.menu = this.src[index];
+            on("mouseleave")(elem, cancel);
+            on("mouseenter")(elem, open);
+            on("click")(elem, fire);
             return elem;
         }, direction);
     }
+    page.open = function (a) {
+        open.call(a);
+    };
+    page.active = function (a) {
+        fire.call(a);
+    };
+    page.registerAsRoot = register;
+    page.setFocus = setFocus;
+    page.moveFocus = moveFocus;
+    page.openFocus = openFocus;
+    page.closeFocus = closeFocus;
+    page.direction = direction;
     return page;
 }

package/coms/zimoli/menuList.less

@@ -5,7 +5,6 @@
     background-color: #fff;
     box-shadow: 0 0 20px -6px rgba(0, 0, 0, .1);
     border: 1px solid #0003;
-    line-height: 28px;
     padding: 6px 0;
 
     >menu-item {
@@ -17,12 +16,22 @@
         color: inherit;
         box-shadow: none;
         text-align: inherit;
-        &.warn{
+        vertical-align: top;
+        line-height: 20px;
+        padding-top: 4px;
+        padding-bottom: 4px;
+
+        &.warn {
             color: #c28;
         }
 
+        &.focus {
+            color: #29c;
+        }
+
         &.has-children {
-            padding: 0 24px 0 16px;
+            padding-right: 24px;
+            padding-left: 16px;
 
             &:after {
                 content: ">";

package/coms/zimoli/on.js

@@ -2,7 +2,7 @@
 var is_addEventListener_enabled = "addEventListener" in window;
 var handlersMap = {};
 var changes_key = 'changes';
-var eventtypereg = /(?:\.once|\.prevent|\.stop|\.capture|\.self|\.passive|\.[a-z0-9]+)+$/i;
+var eventtypereg = /(?:\.once|\.prevent|\.stop|\.capture|\.self|\.passive|\.[a-z0-9]+)+\.?$/i;
 var keyCodeMap = {
     backspace: 8,
     tab: 9,
@@ -118,6 +118,9 @@ var parseEventTypes = function (eventtypes) {
                 case "ctrl":
                     keyneed.push(t);
                     break;
+                case "":
+                    if (!types.keyCode) types.keyCode = true;
+                    break;
                 default:
                     if (isFinite(t)) {
                         types.keyCode = +t;
@@ -133,12 +136,20 @@ var parseEventTypes = function (eventtypes) {
     return types;
 }
 function checkKeyNeed(eventtypes, e) {
+    var keyneed = eventtypes.keyNeed;
     if (eventtypes.keyNeed) {
-        for (var cx = 0, dx = eventtypes.keyNeed.length; cx < dx; cx++) {
-            var key = eventtypes.keyNeed[cx];
+        for (var cx = 0, dx = keyneed.length; cx < dx; cx++) {
+            var key = keyneed[cx];
             if (!e[key + "Key"]) return false;
         }
     }
+    if (eventtypes.keyCode === true) {
+        for (var cx = 0, dx = keyneed.length; cx < dx; cx++) {
+            var key = keyneed[cx];
+            if (e.keyCode === keyCodeMap[key]) return true;
+        }
+        return false;
+    }
     if (eventtypes.keyCode) {
         return e.keyCode === eventtypes.keyCode;
     }

package/coms/zimoli/render.js

@@ -529,14 +529,14 @@ var binders = {
 };
 var createEmiter = function (on) {
     return function (key, search) {
-        if (this.$src) {
-            var parsedSrc = this.$src;
+        var parsedSrc = this.$src;
+        var getter0 = createGetter(search, false), getter1;
+        if (parsedSrc) {
             var scopes = this.$parentScopes;
             search = search.slice();
             search[0] += `with(this.$parentScopes[${scopes.length}])`;
-            this.$parentScopes = scopes.concat(this.$scope);
+            getter1 = createGetter(search, false);
         }
-        var getter = createGetter(search, false);
         on(key)(this, function (e) {
             if (parsedSrc) {
                 var target = e.currentTarget || e.target;
@@ -556,12 +556,14 @@ var createEmiter = function (on) {
             var res;
             if (scope) {
                 var temp = this.$scope;
+                this.$parentScopes.push(temp);
                 this.$scope = scope;
-                res = getter.call(this, e);
+                res = getter1.call(this, e);
+                this.$parentScopes.pop();
                 this.$scope = temp;
             }
             else {
-                res = getter.call(this, e);
+                res = getter0.call(this, e);
             }
             if (res && isFunction(res.then)) res.then(digest, digest);
             digest();
@@ -581,7 +583,7 @@ function getFromScopes(key, scope, parentScopes) {
     }
     if (parentScopes) for (var cx = parentScopes.length - 1; cx >= 0; cx--) {
         var o = parentScopes[cx];
-        if (key in o) {
+        if (o && key in o) {
             return o[key];
         }
     }
@@ -614,13 +616,13 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
         return element;
     }
     var isFirstRender = !element.renderid;
-    element.renderid = 1;
-    var parentNode = element.parentNode;
-    if (parentNode) {
-        if (parentNode.renderid > 1 || parentNode.isMounted) element.renderid = 2;
-    }
 
     if (isFirstRender) {
+        element.renderid = 1;
+        var parentNode = element.parentNode;
+        if (parentNode) {
+            if (parentNode.renderid > 1 || parentNode.isMounted) element.renderid = 2;
+        }
         element.renders = element.renders ? [].concat(element.renders) : [];
         var { ons, copys, attrs, props, binds, context: withContext } = element.$struct;
         delete element.$struct;

package/coms/zimoli/tree.js

@@ -132,16 +132,18 @@ function tree() {
         }
         var tabs = new Array(com.tab + 1).join("<t></t>");
         if (isFunction(generator)) {
-            var elem = generator(index, com);
+            var elem = generator(index, com instanceof Item ? com.value : com);
             if (!elem) return;
-            span = document.createElement('div');
+            span = document.createElement('span');
             span.innerHTML = tabs;
-            span.appendChild(elem);
+            elem.insertBefore(span, elem.firstChild);
+            span = elem;
         } else {
-            span = div();
+            span = document.createElement("node");
             html(span, `${tabs}<c>${com.name}</c>${com.test ? "<i>_test</i>" : ""}<a class=count>${com.count}</a>`);
         }
         var _div = button(span);
+        _div.setAttribute("node", '');
         _div.index = index;
 
         if (!com.saved) {
@@ -222,7 +224,7 @@ function tree() {
         _div.refresh();
         onclick(_div, function () {
             var isClosed = com.isClosed();
-            if (!active(banner, com.value, com)) {
+            if (!active(banner, com.value, com, _div)) {
                 return;
             }
             if (isClosed === com.isClosed() && com.length) {

package/coms/zimoli/tree.less

@@ -3,13 +3,26 @@
     background: #222d32;
     color: #fff;
 
-    >div {
+    >[node] {
         display: block;
         text-align: left;
         height: auto;
         background-color: inherit;
         color: inherit;
         padding-right: 10px;
+        padding-top: 4px;
+        padding-bottom: 4px;
+        box-shadow: none;
+
+        &.line,
+        &[line] {
+            box-shadow: none;
+            line-height: 0;
+
+            >.track {
+                display: none;
+            }
+        }
     }
 }
 

package/package.json

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