efront 3.25.8 → 3.25.12

package/coms/zimoli/menuList.js

@@ -9,50 +9,20 @@ var release = function () {
 var clear = function () {
     clearTimeout(releaseTimer);
 };
-var unfocus = function () {
+var unfocus = lazy(function () {
+    if (mounted_menus.indexOf(document.activeElement) >= 0) return;
     remove(mounted_menus);
-    this.ispop = false;
-    this.setFocus(null);
-};
-var setFocus = function (focused) {
-    if (focused && focused.hasAttribute("disabled")) return;
-    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 (newIndex < 0) newIndex = total + newIndex;
-        if (newIndex > total - 1) newIndex = newIndex - total;
+    if (root_menu) root_menu.setFocus(null);
+    var root = this.root || this;
+    if (root.ispop === 1) root.ispop = false;
+    root.actived = null;
+    root.setFocus(null);
+});
+var unblur = function () {
+    if (document.activeElement !== this) {
+        this.tabIndex = 0;
+        this.focus();
     }
-    do {
-        var e = page.getIndexedElement(newIndex);
-        if (newIndex < 0) newIndex = total + newIndex;
-        newIndex += delta;
-    } while (e && (e.hasAttribute("disabled") || e.hasAttribute("line")));
-    if (!e) page.setFocus(null);
-    else if (page.ispop !== true) page.setFocus(e), page.open(e);
-    else page.setFocus(e);
 };
 var openFocus = function () {
     var menu = mounted_menus[mounted_menus.length - 1] || root_menu;
@@ -76,19 +46,24 @@ var keyAction = function (deltax, deltay) {
             if (fmenu && fmenu.children && fmenu.children.length) {
                 openFocus();
             }
-            else if (parent && parent.direction !== 'y') {
-                parent.moveFocus(deltax);
+            else if (parent) {
+                var index = mounted_menus.lastIndexOf(parent);
+                while (parent && parent.direction === 'y') {
+                    parent = mounted_menus[--index];
+                }
+                if (!parent && root_menu.direction !== 'y') parent = root_menu;
+                if (parent) parent.moveFocus(deltax, parent.ispop);
             }
         }
         else if (deltax === -1) {
             // left
             if (parent) {
                 if (parent.direction === 'y') remove(mounted_menus.pop());
-                else parent.moveFocus(deltax);
+                else parent.moveFocus(deltax, parent.ispop);
             }
         }
         else {
-            menu.moveFocus(deltay);
+            menu.moveFocus(deltay, menu.ispop);
         }
     }
     else {
@@ -96,19 +71,24 @@ var keyAction = function (deltax, deltay) {
             // down
             if (menu.focused) var fmenu = menu.focused.menu;
             if (fmenu && fmenu.children && fmenu.children.length) openFocus();
-            else if (parent && parent.direction === 'y') {
-                parent.moveFocus(deltay);
+            else if (parent) {
+                var index = mounted_menus.lastIndexOf(parent);
+                while (parent && parent.direction !== 'y') {
+                    parent = mounted_menus[--index];
+                }
+                if (!parent && root_menu.direction === 'y') parent = root_menu;
+                if (parent) parent.moveFocus(deltay, parent.ispop);
             }
         }
         else if (deltay === -1) {
             // up
             if (parent) {
                 if (parent.direction !== 'y') remove(mounted_menus.pop());
-                else parent.moveFocus(deltay);
+                else parent.moveFocus(deltay, parent.ispop);
             }
         }
         else {
-            menu.moveFocus(deltax);
+            menu.moveFocus(deltax, menu.ispop);
         }
     }
 };
@@ -117,7 +97,7 @@ function keyalt() {
     else if (root_menu === this && root_menu !== document.activeElement) {
         root_menu.tabIndex = 0;
         root_menu.focus();
-        root_menu.setFocus(root_menu.firstMenu);
+        root_menu.setFocus(root_menu.getIndexedElement(0));
     }
 }
 function keytab(event) {
@@ -144,26 +124,49 @@ function keyleft() {
 function keyright() {
     keyAction(1, 0);
 }
-function keyspace() {
+function getFocusedMenu() {
     var menu = mounted_menus[mounted_menus.length - 1];
     if (!menu || !menu.focused) menu = mounted_menus[mounted_menus.length - 2] || root_menu;
-    if (menu.focused) {
+    if (mounted_menus.indexOf(document.activeElement) >= 0 || document.activeElement === root_menu) return menu;
+}
+function keyspace() {
+    var menu = getFocusedMenu();
+    if (menu && menu.focused) {
         menu.focused.click();
     }
 }
+function keyhome() {
+    var menu = getFocusedMenu();
+    if (menu) menu.moveFocus("home", true);
+}
+function keyend() {
+    var menu = getFocusedMenu();
+    if (menu) menu.moveFocus("end", true);
+}
+function keypagedown() {
+    var menu = getFocusedMenu();
+    if (menu) menu.moveFocus("pagedown", true);
+}
+function keypageup() {
+    var menu = getFocusedMenu();
+    if (menu) menu.moveFocus("pageup", true);
+}
 function register() {
     var menu = this;
     // if (!root_menu) root_menu = this;
-    bind('keydown.alt.')(menu, keyalt);
-    bind('keydown.esc')(menu, keyesc);
-    on('keydown.tab')(menu, keytab);
-    on('keydown.left')(menu, keyleft);
-    on('keydown.right')(menu, keyright);
-    on('keydown.up')(menu, keyup);
-    on('keydown.down')(menu, keydown);
-    on('keydown.enter')(menu, keyspace);
-    on('keydown.space')(menu, keyspace);
-    on("contextmenu")(menu, e => e.preventDefault());
+    bind('keydown.only.alt.')(menu, keyalt);
+    bind('keydown.esc.only')(menu, keyesc);
+    on('keydown.pageup.only')(menu, keypageup);
+    on('keydown.pagedown.only')(menu, keypagedown);
+    on('keydown.home.only')(menu, keyhome);
+    on('keydown.end.only')(menu, keyend);
+    on('keydown.tab.only')(menu, keytab);
+    on('keydown.left.only')(menu, keyleft);
+    on('keydown.right.only')(menu, keyright);
+    on('keydown.up.only')(menu, keyup);
+    on('keydown.down.only')(menu, keydown);
+    on('keydown.enter.only')(menu, keyspace);
+    on('keydown.space.only')(menu, keyspace);
 }
 function main() {
     var page, items, active = _active, direction = 'y';
@@ -179,70 +182,64 @@ function main() {
     var main = this;
     if (direction == 'y') page.ispop = true;
     var istoolbar = direction === 't';
-    function popMenu(item, target, emptyFocus) {
+    function popMenu(item, target) {
         if (page.actived) {
             clear();
             remove(page.actived);
         }
-        if (emptyFocus !== false) page.setFocus(target);
         if (!item.length) return;
-        page.setFocus(target);
-        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);
+        var menu = item.menu;
+        if (!menu) {
+            var clone = template.cloneNode();
+            clone.$parentScopes = page.$parentScopes;
+            clone.$scope = page.$scope;
+            clone.$src = src;
+            clone.innerHTML = template.innerHTML;
+            menu = item.menu = main(clone, item.children, active);
+        }
         mounted_menus.push(menu);
         page.actived = menu;
         menu.root = page.root || page;
-        menu.go(0);
+        if (menu.go) menu.go(0);
         popup(menu, target);
         if (page.ispop === true) {
         } else {
             page.ispop = 1;
-            page.tabIndex = 0;
-            page.focus();
         }
-        on("mousedown")(menu, e => e.preventDefault());
-        once("remove")(menu, function () {
+        on("remove")(menu, function () {
             removeFromList(mounted_menus, this);
+            menu.setFocus(null);
+            css(menu, "width:;height:;max-height:;max-width:;");
         });
+        return menu;
     }
     on("blur")(page, unfocus);
-    var template = page.tempalte || document.createElement(page.tagName);
-    if (!page.tempalte) {
+    var template = page.$template || document.createElement(page.tagName);
+    if (!page.$template) {
         template.className = '';
         template.removeAttribute('mode');
         template.innerHTML = page.innerHTML;
-        page.tempalte = template;
+        page.$template = template;
     }
-    var popTimer = 0, byMousedown;
-    var open = function (time) {
-        cancel();
-        var elem = this;
-        time = +time;
-        if (byMousedown && !time) return;
-        if (time) byMousedown = false;
-        if (page.ispop || time) popTimer = setTimeout(function () {
-            if (time) byMousedown = elem;
-            page.setFocus(elem);
-            popMenu(elem.menu, elem);
-        }, time || 60);
+    var enterMenu = lazy(function (menu) {
+        if (page.ispop) {
+            page.setFocus(menu);
+            popMenu(menu.menu, menu);
+        }
+    }, 60);
+    on('pointerdown')(page, unblur);
+    var autoremove = function () {
+        document.activeElement.blur();
     };
-    var cancel = function () {
-        clear();
-        clearTimeout(popTimer);
-    }
-    var fire = async function () {
-        cancel();
+    var activeMenu = function () {
         if (this.menu.line) return;
-        if (byMousedown) return;
         if (this.hasAttribute("disabled") || this.hasAttribute('line')) return;
         var pop = active(this.menu.value, this);
         if (pop === false) return;
         var root = page.root || page;
-        if (root.direction === 't' || root.selected) {
+        var istool = root.direction === 't' || root.selected
+        if (root.ispop === 1) root.ispop = false;
+        if (istool) {
             var menu = this.menu;
             if (root.selected) root.selected.setActive(false);
             if (root !== page) {
@@ -256,138 +253,141 @@ function main() {
             }
             menu.setActive(true);
             root.selected = target.menu;
+            autoremove();
+            return;
         }
-        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) {
-                if (byMousedown === false) return;
+            if (mounted_menus.indexOf(page.actived) >= 0) while (mounted_menus.length && mounted_menus[mounted_menus.length - 1] !== page.actived) remove(mounted_menus.pop());
+            if (!mounted_menus.length || page === mounted_menus[mounted_menus.length - 1]) {
                 popMenu(this.menu, this, false);
             }
             else {
                 remove(mounted_menus.pop());
+                page.actived = null;
             }
         }
         else {
             while (mounted_menus.length && mounted_menus[mounted_menus.length - 1] !== page) remove(mounted_menus.pop());
-            if (byMousedown === false) return;
+            page.actived = null;
             popMenu(this.menu, this, false);
             if (!page.actived) {
-                (page.root || page).blur();
+                autoremove();
             }
         }
     };
-    var open1 = function (event) {
-        if (event.which === 3) event.preventDefault();
-        if (istoolbar) open.call(this, event.which === 3 ? 20 : 300);
+    var pressMenu = function (event) {
+        if (event.which === 3) {
+            popMenu(this.menu, this);
+        }
+        else {
+            switchMenu.done = false;
+            switchMenu.call(this);
+        }
     };
-    if (!page.children.length || page.menutype === 1) {
-        page.menutype = 1;
-        var hasIcon = function () {
-            var menus = items;
-            for (var menu of menus) {
-                if (menu.icon) {
-                    return true;
-                }
+    var clickMenu = function (event) {
+        switchMenu.cancel();
+        if (!switchMenu.done) page.setFocus(this), activeMenu.call(this);
+    };
+
+
+    var switchMenu = lazy(function (event) {
+        if (onclick.preventClick) return;
+        popMenu(this.menu, this);
+        switchMenu.done = true;
+    }, 300);
+    var hasIcon = function () {
+        var menus = items;
+        for (var menu of menus) {
+            if (menu.icon) {
+                return true;
             }
-            return false;
-        };
-        var $scope = {
-            "menu-item"(e, s) {
-                if (e && s === e.$scope) s = itemName ? s[itemName] : s.menu;
-                var a = button(
-                    menuItem(e, s, this.hasIcon)
-                );
-                if (!page.firstMenu) {
-                    page.firstMenu = a;
-                    page.total = items.length;
-                }
-                a.menu = s;
-                return a;
-            },
-            hasIcon: hasIcon(),
-            open: fire,
-            cancel,
-            popMenu: open,
-            popMenu1: open1
-        };
-        if (page.$src) {
-            var src = page.$src;
-            var itemName = src.itemName;
-            var className = `{'has-children':${itemName}.children&&${itemName}.children.length,
+        }
+        return false;
+    };
+    var $scope = {
+        "menu-item"(e, s) {
+            if (e && s === e.$scope) s = itemName ? s[itemName] : s.menu;
+            var a = button(
+                menuItem(e, s, this.hasIcon)
+            );
+            a.menu = s;
+            return a;
+        },
+        hasIcon: hasIcon(),
+        enterMenu,
+        clickMenu,
+        pressMenu,
+    };
+    if (!page.$src) page.$src = render.parseRepeat("m in menus");
+    var src = page.$src;
+    var itemName = src.itemName;
+    var className = `{'has-children':${itemName}.children&&${itemName}.children.length,
             'warn':${itemName}.warn,
             actived:${itemName}.isActived()
         }`;
-            var notHidden = `!${itemName}.hidden`;
-            var generator = getGenerator(page, 'menu-item');
-            page.$generatorScopes.push($scope);
-            list(page, function (index) {
-                var item = items[index];
-                if (!item) return;
-                if (item.constructor !== Item) item = new Item(item);
-                var a = $scope["menu-item"](null, item);
-                if (src.itemName) a.setAttribute("e-if", notHidden);
-                a.setAttribute("e-class", className);
-                a.setAttribute("on-mouseleave", "cancel.call(this)");
-                a.setAttribute("on-mouseenter", "popMenu.call(this)");
-                a.setAttribute("on-click", "open.call(this)");
-                a.setAttribute("_menu", src.itemName);
-                if (istoolbar) {
-                    a.setAttribute("on-pointerdown", "popMenu1.call(this,event)");
-                    if (item.constructor === Item && item.length && !item.extended) {
-                        item.extends(item[0]);
-                    }
-                }
-                a = generator(index, item, a);
-                return a;
-            }, direction);
-        }
-        else {
-            page.innerHTML = menuList;
-            $scope.menus = items.map(i => i.constructor === Item ? i : new Item(i));
-            render(page, $scope);
-            vbox(page);
-        }
-        page.total = items.length;
-        page.renders.unshift(function () {
-            this.$scope.hasIcon = hasIcon();
-        });
-    }
-    else {
-        var generator = getGenerator(page, 'menu-item');
-        list(page, function (index) {
-            var elem = generator(index);
-            if (!elem) return;
-            if (!page.firstMenu) {
-                page.firstMenu = elem;
-                page.total = this.src.length;
+    var notHidden = `!${itemName}.hidden`;
+    var ItemTemplate = document.createElement('menu-item');
+    ItemTemplate.setAttribute("on-click", "clickMenu.call(this,event)");
+    if (istoolbar) ItemTemplate.setAttribute("on-pointerdown", "pressMenu.call(this,event)");
+    else ItemTemplate.setAttribute("on-mouseenter", `enterMenu(this)`);
+    ItemTemplate.setAttribute("e-class", className);
+    if (src.itemName) ItemTemplate.setAttribute("e-if", notHidden);
+    ItemTemplate.setAttribute("_menu", src.itemName);
+    ItemTemplate.innerHTML = menuItem.template;
+    var generator = getGenerator(page, ItemTemplate);
+    page.$generatorScopes.push($scope);
+    list(page, function (index) {
+        var item = items[index];
+        if (!item) return;
+        if (item.constructor !== Item) item = new Item(item);
+        if (istoolbar) {
+            if (item.constructor === Item && item.length && !item.extended) {
+                item.extends(item[0]);
             }
-            var menu = elem.menu = this.src[index];
-            on("mouseleave")(elem, cancel);
-            on("mouseenter")(elem, open);
-            if (istoolbar) {
-                on("pointerdown")(elem, open1);
-                if (menu.constructor === Item && menu.length && !menu.extended) {
-                    menu.extends(menu[0]);
-                }
-            }
-            on("click")(elem, fire);
-            return elem;
-        }, direction);
-    }
+        }
+        return generator(index, item);
+    }, direction);
+    page.renders.unshift(function () {
+        this.$scope.hasIcon = hasIcon();
+    });
     page.open = function (a) {
-        open.call(a);
+        if (!a.menu || !a.menu.length) {
+            return;
+        }
+        var m = popMenu(a.menu, a);
+        m.moveFocus("home");
     };
     page.active = function (a) {
-        fire.call(a);
+        activeMenu.call(a);
     };
-    page.setFocus = setFocus;
-    page.moveFocus = moveFocus;
+    if (istoolbar) on("active")(page, function (event) {
+        if (event.item !== 'global') return;
+        if (page.selected) page.selected.setActive(false);
+        var selected = null;
+        for (var e of this.children) {
+            if (!e.menu) continue;
+            selected = e.menu.pathTo(event.value);
+            if (selected) break;
+        }
+        if (!selected) return;
+        var menu = selected.pop();
+        page.selected = menu;
+        if (selected[0]) selected[0].extends(menu.value);
+        menu.setActive(true);
+    });
+    on("focused")(page, function () {
+        var focused = page.focused;
+        if (page.ispop && page === root_menu) popMenu(focused.menu, focused, false);
+    });
     page.openFocus = openFocus;
     page.closeFocus = closeFocus;
     page.direction = direction;
-    register.call(page);
+    on("contextmenu")(page, e => e.preventDefault());
+    on("mouseleave")(page, function () {
+        enterMenu.cancel();
+    });
     page.registerAsRoot = function () {
+        register.call(this);
         root_menu = this;
     };
     return page;

package/coms/zimoli/menuList.less

@@ -6,6 +6,7 @@
     box-shadow: 0 0 20px -6px rgba(0, 0, 0, .1);
     border: 1px solid #0003;
     padding: 6px 0;
+    outline: none;
 
     >menu-item {
         display: block;