efront 3.11.0 → 3.11.1

package/coms/zimoli/bindAccesskey.js

@@ -0,0 +1,47 @@
+var keyMap = {};
+on("keydown")(window, function (event) {
+    var { which } = event;
+    switch (event.which) {
+        case 18:
+            event.preventDefault();
+            break;
+        default:
+            var key = String.fromCharCode(which);
+            var elems = keyMap[key];
+            if (elems) while (elems.length) {
+                var elem = elems[elems.length - 1];
+                if (isMounted(elem)) break;
+                else elems.pop();
+            }
+            if (elem) {
+                var parent = elem.parentNode;
+                if (event.altKey || parent === document.activeElement || parent.ispop) {
+                    event.preventDefault();
+                    elem.click();
+                }
+            }
+    }
+});
+var bindAccesskey = function (btn, k) {
+    if (!keyMap[k]) keyMap[k] = [];
+    removeFromList(keyMap[k], btn);
+    keyMap[k].push(btn);
+    once("remove")(btn, function () {
+        removeFromList(keyMap[k], btn);
+    });
+};
+var getKeyFromText = function (btn) {
+    var { innerText } = btn;
+    var match = /\(\s*\_?\w\s*\)|\[\s*\_?\w\s*\]|\{\s*\_?\w\s*\}/.exec(innerText);
+    if (match) {
+        var accesskey = match[0].replace(/^\W*(\w)\W*$/g, '$1');
+    } else {
+        var accesskey = btn.getAttribute("accesskey");
+    }
+    if (!accesskey) return;
+    return accesskey.toUpperCase();
+}
+function main(elem, key = getKeyFromText(elem)) {
+    bindAccesskey(elem, key);
+    return elem;
+}

package/coms/zimoli/button.js

@@ -2,28 +2,6 @@ var _label = createElement("span");
 var track = createElement(div);
 track.className = "track";
 _label.className = "label";
-var keyMap = {};
-on("keydown")(window, function (event) {
-    var { which } = event;
-    switch (event.which) {
-        case 18:
-            event.preventDefault();
-            break;
-        default:
-            if (event.altKey) {
-                var key = String.fromCharCode(which);
-                var element = keyMap[key];
-                if (element) {
-                    if (isMounted(element)) {
-                        event.preventDefault();
-                        element.click();
-                    } else {
-                        delete keyMap[key];
-                    }
-                }
-            }
-    }
-});
 
 var btn = document.createElement("button");
 btn.tabIndex = 0;
@@ -75,17 +53,6 @@ var touchstart = function () {
     var canceltouchend = ontouchend(this, cancel);
     active.call(this);
 };
-var bindAccesskey = function (btn) {
-    var { innerText } = btn;
-    var match = /\(\s*\_?\w\s*\)|\[\s*\_?\w\s*\]|\{\s*\_?\w\s*\}/.exec(innerText);
-    if (match) {
-        var accesskey = match[0].replace(/^\W*(\w)\W*$/g, '$1');
-    } else {
-        var accesskey = btn.getAttribute("accesskey");
-    }
-    if (!accesskey) return;
-    keyMap[accesskey.toUpperCase()] = btn;
-};
 function button(texter, type) {
     var tracker = createElement(track);
     var _texter;

package/coms/zimoli/menu.js

@@ -159,11 +159,13 @@ function main(elem, mode) {
                     getGenerator(elem);
                     care(elem, function (src) {
                         menuList(elem, getTreeFromData(src), emit, direction);
+                        elem.registerAsRoot();
                     });
                 }
                 else {
                     var nodes = getArrayNodes(elem);
                     elem = menuList(elem, nodes, emit, direction);
+                    elem.registerAsRoot();
                 }
                 break;
             default:

package/coms/zimoli/menu.less

@@ -92,7 +92,7 @@ body:active & {
     display: block;
     overflow: hidden;
     text-overflow: hidden;
-    height: 40px;
+    line-height: 40px;
     position: relative;
     border-bottom: 1px solid #18333c;
     padding: 0;

package/coms/zimoli/menuList.html

@@ -1,4 +1,4 @@
-<menu-item ng-repeat="menu in menus" ng-if="!menu.hidden" ng-click="open(menu,this)"
-    ng-mouseleave="clearTimeout(popTimer)" ng-mouseenter="popTimer=popMenu(menu,this)"
+<menu-item ng-repeat="menu in menus" ng-if="!menu.hidden" ng-click="open.call(this)"
+    ng-mouseleave="cancel()" ng-mouseenter="popMenu.call(this)"
     ng-class="{'has-children':menu.children&&menu.children.length,'warn':menu.type==='danger'||menu.type==='warn'||menu.type==='red'}">
 </menu-item>

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 () {
@@ -12,6 +12,137 @@ var unfocus = function () {
     remove(mounted_menus);
     this.ispop = false;
 };
+var setFocus = function (focused = this.firstMenu) {
+    var page = this;
+    if (page.ispop || page === document.activeElement) {
+        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();
+}
+function keyesc() {
+    if (root_menu === document.activeElement && !mounted_menus.length) {
+        if (!root_menu.ispop) root_menu.blur(), root_menu.setFocus();
+        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] || root_menu;
+    menu.focused.click();
+}
+function register() {
+    // on('keydown.alt')(window, e => e.preventDefault());
+    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();
@@ -23,6 +154,7 @@ function main(page, items, active, direction = 'y') {
             clear();
             remove(page.active);
         }
+        page.setFocus(target);
         if (!item.children || !item.children.length) return;
         var clone = template.cloneNode();
         clone.$parentScopes = page.$parentScopes;
@@ -60,6 +192,39 @@ 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();
+        var pop = active(this.menu, this);
+        if (pop === false) return;
+        var root = page.root || page;
+        if (root.ispop === 1) root.ispop = false;
+        if (page.active && page.active.target === this) {
+            if (!mounted_menus.length) {
+                popMenu(this.menu, this);
+            }
+            else {
+                unfocus.call(page);
+            }
+        }
+        else {
+            while (mounted_menus.length && mounted_menus[mounted_menus.length - 1] !== page) remove(mounted_menus.pop());
+            popMenu(this.menu, this);
+        }
+    };
+
+
     if (!page.children.length || page.menutype === 1) {
         page.menutype = 1;
         var hasIcon = function () {
@@ -73,32 +238,19 @@ function main(page, items, active, direction = 'y') {
         };
         var $scope = {
             "menu-item": function (e, s) {
-                return button(
-                    menuItem(e, s)
+                var a = bindAccesskey(
+                    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;
@@ -106,10 +258,11 @@ function main(page, items, active, direction = 'y') {
             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`;
+
             list(page, function (index) {
                 var item = items[index];
                 if (!item) return;
-                var a = menuItem(null, item, $scope.hasIcon);
+                var a = $scope["menu-item"](null, item);
                 var scope = {};
                 if (item instanceof Item) item = item.value;
                 if (src.itemName) scope[src.itemName] = item;
@@ -120,17 +273,11 @@ function main(page, items, active, direction = 'y') {
                 else scope.$index = index;
                 if (src.srcName) scope[src.srcName] = items;
                 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.menu = item;
+                on("mouseleave")(a, cancel);
+                on("mouseenter")(a, open);
+                on("click")(a, fire);
                 a.setAttribute("e-class", className);
-                a = button(a);
                 render(a, scope, parentScopes);
                 return a;
             });
@@ -143,31 +290,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 {
+    }
+    else {
         var generator = getGenerator(page);
+
         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

@@ -17,10 +17,15 @@
         color: inherit;
         box-shadow: none;
         text-align: inherit;
-        &.warn{
+
+        &.warn {
             color: #c28;
         }
 
+        &.focus {
+            color: #29c;
+        }
+
         &.has-children {
             padding: 0 24px 0 16px;
 

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/package.json

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