efront 3.15.7 → 3.17.1

package/coms/zimoli/on.js

@@ -1,4 +1,5 @@
 "use strict";
+if (document.efronton) return document.efronton;
 var is_addEventListener_enabled = "addEventListener" in window;
 var handlersMap = {};
 var changes_key = 'changes';
@@ -6,8 +7,10 @@ var eventtypereg = /(?:\.once|\.prevent|\.stop|\.capture|\.self|\.passive|\.[a-z
 var keyCodeMap = {
     backspace: 8,
     tab: 9,
+    "⇄": 9,
     ceter: 12,// num5 when numlock is off.
     enter: 13,
+    "↵": 13,
     shift: 16,
     ctrl: 17,
     control: 17,
@@ -23,11 +26,17 @@ var keyCodeMap = {
     end: 35,
     home: 36,
     left: 37,
+    "←": 37,
     up: 38,
+    "↑": 38,
     right: 39,
+    "→": 39,
     down: 40,
+    "↓": 40,
     insert: 45,
+    "ins": 45,
     delete: 46,
+    del: 46,
     key0: 47,
     key1: 48,
     key2: 49,
@@ -54,10 +63,14 @@ var keyCodeMap = {
     num8: 104,
     num9: 105,
     times: 106,
+    "⨉": 106,
     numplus: 107,
     numminus: 109,
     dot: 110,
-    divid: 111,
+    numdot: 110,
+    divide: 111,
+    div: 111,
+    "/": 111,
     f1: 112,
     f2: 113,
     f3: 114,
@@ -74,17 +87,39 @@ var keyCodeMap = {
     numlock: 144,
     scrolllock: 145,
     semicolon: 186,
+    ";": 186,
+    ":": 186,
     equal: 187,
+    "=": 187,
     plus: 187,
+    "+": 187,
     comma: 188,
+    ",": 188,
+    "<": 188,
     minus: 189,
+    "-": 189,
+    "_": 189,
     period: 190,
+    ".": 110,
+    ">": 110,
     slash: 191,
+    "/": 191,
+    ">": 191,
     backquote: 192,
+    "`": 192,
+    "~": 192,
     bracketleft: 219,
+    "[": 219,
+    "{": 219,
     backslash: 220,
+    "\\": 220,
+    "|": 220,
     bracketright: 221,
+    "]": 221,
+    "}": 221,
     quote: 222,
+    "'": 222,
+    "\"": 222,
     bright: 255,
 };
 var parseEventTypes = function (eventtypes) {
@@ -156,180 +191,158 @@ function checkKeyNeed(eventtypes, e) {
     return true;
 }
 var pendingid = 0;
-function wrapHandler(h) {
+function pending(h, event) {
     if (h instanceof Function) {
-        return function () {
-            var res = h.apply(this, arguments);
-            if (res && isFunction(res.then)) {
-                var id = ++pendingid & 0x1fffffffffffff;
-                this.setAttribute('pending', id);
-                var removePending = () => {
-                    if (+this.getAttribute('pending') === id) this.removeAttribute('pending');
-                };
-                res.then(removePending, removePending);
-            }
-            return res;
+        var res = h.call(this, event);
+        if (res && isFunction(res.then) && this.setAttribute) {
+            var id = ++pendingid & 0x1fffffffffffff;
+            this.setAttribute('pending', id);
+            var removePending = () => {
+                if (+this.getAttribute('pending') === id) this.removeAttribute('pending');
+            };
+            res.then(removePending, removePending);
         }
+        return res;
     }
     return h;
 }
-if (is_addEventListener_enabled) {
-    var on = function (k) {
-        var on_event_path = "on" + k;
-        if (handlersMap[on_event_path]) return handlersMap[on_event_path];
-        var eventtypes = parseEventTypes(k);
-        k = k.replace(eventtypereg, '');
-        function addhandler(element, handler, firstmost) {
-            var target = this;
-            handler = wrapHandler(handler);
-            if (eventtypes.capture) firstmost = true;
-            if (target && element !== target) {
-                handler = handler.bind(element);
-                element = target;
+var remove = function (k, hk, [eventtypes, handler, context]) {
+    var element = this;
+    var hs = element[hk];
+    if (hs) {
+        for (var cx = hs.length - 1; cx >= 0; cx--) {
+            var [e, h, c] = hs[cx];
+            if (h === handler && e === eventtypes && c === context) {
+                hs.splice(cx, 1);
+                if (k === changes_key) element.needchanges--;
             }
-            if (k === changes_key) {
-                if (!element.needchanges) element.needchanges = 0;
-                element.needchanges++;
+        }
+        if (!hs.length && hs.h) {
+            element[hk] = null;
+            if (is_addEventListener_enabled) {
+                element.removeEventListener(k, hs.h, /1$/.test(hk));
+            } else {
+                if (element["on" + k] === hs.h) element["on" + k] = null;
             }
-            var h = function (e) {
-                if (eventtypes.self && e.target !== this) return;
-                if (!checkKeyNeed(eventtypes, e)) return;
-                if (eventtypes.stop) e.stopPropagation();
-                if (eventtypes.passive) e.preventDefault = function () { };
-                if (eventtypes.prevent) e.preventDefault();
-                if (handler instanceof Array) {
-                    handler.forEach(function (h) {
-                        h.call(this, e);
-                    }, this);
-                } else {
-                    handler.call(this, e);
-                }
-                if (eventtypes.once) remove();
-            };
-            var remove = function () {
-                if (k === changes_key) element.needchanges--;
-                element.removeEventListener(k, h, firstmost);
-            };
-            element.addEventListener(k, h, firstmost);
-            return remove;
         }
-        return handlersMap[on_event_path] = addhandler;
-    };
-} else {
-    var on = function on(k) {
-        var handler_path = k + "handlers";
-        var on_event_path = "on" + k;
+    }
+};
+var broadcast = function (k, hk, event) {
+    var element = this;
+    var handlers = element[hk];
+    if (handlers.length > 1) handlers = handlers.slice();
+    for (var [eventtypes, handler, context] of handlers) {
+        if (eventtypes.self && event.target !== element) continue;
+        if (!checkKeyNeed(eventtypes, event)) continue;
+        if (eventtypes.stop) event.stopPropagation();
+        if (eventtypes.passive) event.preventDefault = function () { };
+        if (eventtypes.prevent) event.preventDefault();
+        if (handler instanceof Array) {
+            for (var h of handler) {
+                h.call(context, event);
+            }
+        } else {
+            pending.call(context, handler, event);
+        }
+        if (eventtypes.once) remove.call(element, k, hk, eventtypes, handler);
+    }
+};
 
-        var eventtypes = parseEventTypes(k);
-        k = k.replace(eventtypereg, '');
+var checkroot = function (element, k) {
+    k = "on" + k;
+    if (!(k in element)) {
+        if (element === window && k in document) {
+            element = document;
+            if (!checkroot[k]) checkroot[k] = true, console.warn("使用 document 的", k, "替代 window 的");
+        }
+    }
+    return element;
+}
 
-        if (handlersMap[on_event_path]) return handlersMap[on_event_path];
-        function addhandler(element, handler, firstmost = false) {
-            var target = this;
-            handler = wrapHandler(handler);
-            if (eventtypes.capture) {
-                console.warn("当前运行环境不支持事件capture");
-                firstmost = true;
-            }
-            if (target && element !== target) {
-                handler = handler.bind(element);
-                element = target;
-            }
-            if (k === changes_key) {
-                if (!element.needchanges) element.needchanges = 0;
-                element.needchanges++;
-            }
-            // 仅在hack事件中使用firstmost参数
-            if (!(on_event_path in element)) {
-                if (element === window && on_event_path in document) {
-                    element = document;
-                    if (!addhandler.logged) addhandler.logged = true, console.warn("use", on_event_path, "on document instead of on window");
-                }
-            }
-            if (element[handler_path] instanceof Array) {
-                if (~element[handler_path].indexOf(handler)) return;
-                if (firstmost) element[handler_path].unshift(handler);
-                else element[handler_path].push(handler);
-            } else {
-                element[handler_path] = element[on_event_path] && element[on_event_path] !== handler ? [element[on_event_path], handler] : [handler];
-                element[on_event_path] = function (e) {
-                    if (!e) e = window.event || {};
-                    if (!e.target && e.srcElement) {
-                        e.target = e.srcElement;
-                    }
-                    if (eventtypes.self && e.target !== this) return;
-                    if (!checkKeyNeed(eventtypes, e)) return;
-                    if (e.stopedPropagation) return;
-                    if (!e.stopPropagation) {
-                        e.stopPropagation = function () {
-                            this.stopedPropagation = true;
-                        };
-                    }
-                    if (eventtypes.stop) {
-                        e.stopPropagation();
-                    }
-                    if (!e.preventDefault) {
-                        e.preventDefault = function () {
-                            e.returnValue = false;
-                        };
-                    }
-                    if (e.button) {
-                        if (e.buttons === undefined) e.buttons = e.button;
-                        if (e.which === undefined) e.which = e.button + 1;
-                    }
-                    if (e.keyCode) {
-                        if (e.which === undefined) e.which = e.keyCode;
-                    }
-                    if (eventtypes.passive) {
-                        e.preventDefault = function () { };
-                    }
-                    if (eventtypes.prevent) {
-                        e.preventDefault();
-                    }
+var append = function (k, hk, listener2, firstmost) {
+    var [eventtypes, handler, context] = listener2;
+    var element = this;
+    var handlers = element[hk];
+    for (var [h, e, c] of handlers) {
+        if (h === handler && eventtypes === e && c === context) return;
+    }
+    if (k === changes_key) {
+        if (!element.needchanges) element.needchanges = 0;
+        element.needchanges++;
+    }
+    if (firstmost) handlers.unshift(listener2);
+    else handlers.push(listener2);
+};
 
-                    broadcast(element[handler_path], e);
-                    if (eventtypes.once) {
-                        remove();
-                    }
-                };
-                var broadcast = function (handlers, e) {
-                    for (var cx = 0, dx = handlers.length; cx < dx; cx++) {
-                        var _handler = handlers[handlers.length + cx - dx];
-                        if (_handler instanceof Function) {
-                            _handler.call(element, e);
-                        } else if (_handler instanceof Array) {
-                            broadcast(_handler, e);
-                        }
-                    }
-                };
-            }
-            var remove = function () {
-                if (k === changes_key) element.needchanges--;
-                var handlers = element[handler_path];
-                for (var cx = handlers.length - 1; cx >= 0; cx--) {
-                    if (handlers[cx] === handler) {
-                        handlers.splice(cx, 1);
-                    }
+var on = document.efronton = function (k) {
+    var on_event_path = "on" + k;
+    if (handlersMap[on_event_path]) return handlersMap[on_event_path];
+    var eventtypes = parseEventTypes(k);
+    k = k.replace(eventtypereg, '');
+    var handler_path = k + "handlers";
+    var hk = handler_path + +!!eventtypes.capture;
+    if (is_addEventListener_enabled) var addhandler = function (context, handler, firstmost = false) {
+        var target = this || context;
+        target = checkroot(target, k);
+        if (target[hk] instanceof Array) {
+        } else {
+            var h = broadcast.bind(target, k, hk);
+            target[hk] = [];
+            target[hk].h = h;
+            target.addEventListener(k, h, eventtypes.capture);
+        }
+        var listener = [eventtypes, handler, context];
+        append.call(target, k, hk, listener, firstmost);
+        return remove.bind(target, k, hk, listener);
+    };
+
+    else var addhandler = function (context, handler, firstmost = false) {
+        var target = this || context;
+        if (eventtypes.capture) {
+            console.warn("当前运行环境不支持事件capture");
+            firstmost = true;
+        }
+        target = checkroot(target, k);
+        if (target[handler_path] instanceof Array) {
+        } else {
+            var h = function (e) {
+                if (!e) e = window.event || {};
+                if (!e.target && e.srcElement) {
+                    e.target = e.srcElement;
+                }
+                if (e.stopedPropagation) return;
+                if (!e.stopPropagation) {
+                    e.stopPropagation = function () {
+                        this.stopedPropagation = true;
+                    };
+                }
+                if (!e.preventDefault) {
+                    e.preventDefault = function () {
+                        e.returnValue = false;
+                        e.defaultPrevented = true;
+                    };
                 }
-                if (!handlers.length) {
-                    element[handler_path] = null;
-                    element[on_event_path] = null;
+                if (e.button) {
+                    if (e.buttons === undefined) e.buttons = e.button;
+                    if (e.which === undefined) e.which = e.button + 1;
                 }
+                if (e.keyCode) {
+                    if (e.which === undefined) e.which = e.keyCode;
+                }
+                broadcast.call(target, k, handler_path, e);
+                return e.returnValue;
             };
-            return remove;
+            target[handler_path] = target["on" + k] && target["on" + k] !== handler ? [[{}, target["on" + k]]] : [];
+            target[handler_path].h = h;
+            target["on" + k] = h;
         }
-        return handlersMap[on_event_path] = addhandler;
+        var listener = [eventtypes, handler, context];
+        append.call(target, k, handler_path, listener, firstmost);
+        return remove.bind(target, k, handler_path, listener);
     };
-    if (!("onmousedown" in window)) on("mousedown")(document, function () {
-        var cancelup = on("mouseup")(document, function () {
-            cancelmove();
-            cancelup();
-        }, true);
-        var cancelmove = on("mousemove")(document, function (event) {
-            if (!event.which) dispatch("mouseup", document)/* ,console.warn("dispatch mouseup nanually.")*/;
-        }, true);
-    });
-}
+    handlersMap[on_event_path] = addhandler;
+    return addhandler;
+};
 var invoke = function (event, type, pointerType) {
     var target = event.target;
     var touch = event.changedTouches ? event.changedTouches[0] : event;
@@ -342,7 +355,7 @@ var invoke = function (event, type, pointerType) {
 
 (function () {
     var pointeractive = null;
-    if ("onpointerdown" in window) return;
+    if ("onpointerdown" in window || document.efronton) return;
     var getPointerType = function (event) {
         return event.type.replace(/(start|move|end|cancel|down|up|leave|out|over|enter)$/i, '');
     };
@@ -373,8 +386,6 @@ var invoke = function (event, type, pointerType) {
 (function () {
     // fastclick
     if (window.fastclick) return;
-    if (document.efronton) return on = document.efronton;
-    document.efronton = on;
     var onclick = on("click");
     var onmousedown = on("mousedown");
     var onmousemove = on("mousemove");

package/coms/zimoli/once.js

@@ -1,15 +1,16 @@
+"use strict";
 var oncetree = {};
 function _once(key) {
     if (oncetree[key]) return oncetree[key];
-    return oncetree[key] = function (target, handler) {
-        var off = on(key)(target, function (event) {
+    return oncetree[key] = function (target, handler, firstmost) {
+        var off = on(key).call(this, target, function (event) {
             off();
             return handler.call(this, event);
-        });
+        }, firstmost);
         return off;
     };
 }
-function once(key, target, handler) {
-    if (isFunction(handler) && isNode(target)) return _once(key)(target, handler);
+function once(key, target, handler, firstmost) {
+    if (isFunction(handler) && isNode(target)) return _once(key).call(this, target, handler, firstmost);
     return _once(key);
 }

package/coms/zimoli/onmounted.js

@@ -9,5 +9,5 @@ function onmounted(target, handle) {
     if (isMounted(target)) {
         handle.call(target);
     }
-    onappend(target, handle);
+    on("mounted")(target, handle);
 }

package/coms/zimoli/render.js

@@ -228,7 +228,7 @@ var createIf = function (search, id = 0) {
                 appendChild.before(this, element);
                 if (element.renderid < 0) {
                     element.renderid = id;
-                    elements[cx] = render(element);
+                    elements[cx] = render(element, this.$scope, this.$parentScopes);
                 }
             }
             else {
@@ -599,7 +599,7 @@ function getFromScopes(key, scope, parentScopes) {
     }
 }
 
-function renderElement(element, scope = element.$scope, parentScopes = element.$parentScopes) {
+function renderElement(element, scope = element.$scope, parentScopes = element.$parentScopes, eager) {
     if (!isNode(element) && element.length) {
         return [].concat.apply([], element).map(function (element) {
             return renderElement(element, scope, parentScopes);
@@ -699,10 +699,10 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
     }
     ons.forEach(([on, key, value]) => on.call(element, key, [withContext, value]));
     if (element.renders.length) {
-        rebuild(element);
-        onappend(element, addRenderElement);
+        onmounted(element, addRenderElement);
         onremove(element, removeRenderElement);
         if (isMounted(element) || element.renderid > 1) addRenderElement.call(element);
+        else if (eagermount) rebuild(element);
     }
     if (elementid) scope[elementid] = element;
     for (var id of ids) {
@@ -797,13 +797,26 @@ function renderStructure(element, scope, parentScopes = []) {
     if (!element.$struct) element.$struct = { ons, copys, binds, attrs: attr1, props, context: withContext, ids };
     if (element.renderid <= -1) createStructure.call(element, types.if, types.repeat, withContext);
 }
-function render(element, scope, parentScopes) {
+var eagermount = false, renderlock = false;
+function render(element, scope, parentScopes, lazy = true) {
     var if_top_length = if_top.length;
+    var haslock = false;
+    if (!renderlock) {
+        haslock = true;
+        renderlock = true;
+        if (isBoolean(scope) && arguments.length === 2) lazy = +scope, scope = undefined;
+        else if (isBoolean(parentScopes) && arguments.length === 3) lazy = +parentScopes, parentScopes = undefined;
+        else lazy = +lazy;
+        eagermount = !lazy;
+    }
     var e = renderElement(element, scope, parentScopes);
+    if (haslock) {
+        renderlock = false;
+        eagermount = false;
+    }
     if (if_top_length < if_top.length) if_top.splice(if_top_length, if_top.length - if_top_length);
     return e;
 }
-
 var digest = lazy(refresh, -{});
 render.digest = render.apply = render.refresh = digest;
 render.parseRepeat = parseRepeat;

package/coms/zimoli/renderDefaults.js

@@ -8,6 +8,7 @@ extend(renderDefaults, {
     go: zimoli.go,
     care,
     cast,
+    container,
     input,
     padding,
     block,

package/coms/zimoli/resize.js

@@ -142,6 +142,7 @@ function resize(elem, initialEvent) {
 }
 moveupon(window, handle);
 
+
 resize.on = function (elem, dragHandle) {
     if (elem) {
         elem.dragHandle = dragHandle;
@@ -150,6 +151,23 @@ resize.on = function (elem, dragHandle) {
         var off = onmousemove(window, getResizer);
         onremove(elem, off);
     });
+    var computed = getComputedStyle(elem);
+    var resizeh = function () {
+        var elem = this;
+        if (elem.scrollWidth > elem.clientWidth) {
+            css(elem, { width: elem.offsetWidth });
+            dispatch(elem, 'resize');
+        }
+        if (elem.scrollHeight > elem.clientHeight) {
+            css(elem, { height: elem.offsetHeight });
+            dispatch(elem, 'resize');
+        }
+        if (unbind && parseInt(computed.height) && parseInt(computed.width)) {
+            unbind();
+            unbind = null;
+        };
+    }
+    if (!parseInt(computed.height) || !parseInt(computed.width)) var unbind = bind('render')(elem, resizeh);
     if (!~resizingElements.indexOf(elem)) {
         resizingElements.push(elem);
         once('remove')(elem, function () {

package/coms/zimoli/scrollbar.js

@@ -2,7 +2,7 @@ var scrollbary = function () {
     var reshape = function (scrollHeight, offsetHeight) {
         var target = this.target;
         if (target) {
-            this.style.height = target.offsetHeight + "px";
+            css(this, { height: target.offsetHeight });
         }
         var scrollbarHeight = this.offsetHeight;
         var ratio = offsetHeight / scrollHeight;
@@ -10,11 +10,14 @@ var scrollbary = function () {
         if (thumbHeight < 14) thumbHeight = 14;
         if (thumbHeight < 0) thumbHeight = 0;
         this.restHeight = scrollHeight - offsetHeight;
-        this.thumb.style.height = thumbHeight + "px";
+        css(this.thumb, {
+            height: thumbHeight
+        });
         if (thumbHeight >= this.clientHeight) {
             this.style.opacity = 0;
         } else {
             this.style.opacity = 1;
+            this.autoshow();
         }
     };
     var getTop = function () {
@@ -59,7 +62,7 @@ var scrollbary = function () {
         deltaY = targetY - thumbTop;
         moving.y += deltaY;
         if (targetY !== thumbTop) {
-            thumb.style.top = targetY + "px";
+            css(thumb, { top: targetY });
             dispatch(target, "change");
         }
     };
@@ -138,7 +141,7 @@ var scrollbary = function () {
         return { Height, height };
     };
 
-    function bindTarget(_container) {
+    function bindTarget(_container, followResize = _container) {
         var _scrollbar = this;
         _container.with = _scrollbar;
         onappend(_container, _scrollbar.reshape);
@@ -146,24 +149,33 @@ var scrollbary = function () {
         on("scroll")(_container, function () {
             var top = getTargetTop(_container);
             _scrollbar.scrollTo(top);
+            _scrollbar.autoshow();
         });
         on("change")(_scrollbar, function () {
             var top = _scrollbar.Top();
             setTargetTop(_container, top);
         });
-        _scrollbar.reshape();
+        if (followResize) on("resize")(followResize, _scrollbar.reshape);
     }
-    function scrollbar() {
-        var _scrollbar = div();
+    function scrollbar(elem) {
+        var _scrollbar = elem || document.createElement("scrollbar");
         _scrollbar.reshape = function () {
             var _container = _scrollbar.target;
             var { Height, height } = getTargetHeight(_container);
             reshape.call(_scrollbar, Height, height);
         };
         _scrollbar.scrollTo = scrollTo;
-        var _handler = div();
+        var _handler = document.createElement("scrollbar-thumb");
         _handler.className = "thumb";
         _scrollbar.Top = getTop;
+        _scrollbar.autohide = lazy(function () {
+            this.thumb.style.opacity = 0;
+        }, 600);
+        _scrollbar.autoshow = function () {
+            this.autohide();
+            this.thumb.style.opacity = 1;
+        };
+
         moveupon(_handler, {
             start: mousedown,
             move: mousemove,

package/coms/zimoli/scrollbar.less

@@ -1,10 +1,31 @@
 & {
     position: absolute;
-    width: 14px;
+    width: 6px;
     background-color: rgba(0, 0, 0, .1);
     border-radius: 7px;
     height: 100px;
+    border-left: 3px solid transparent;
+
+    &:hover {
+        >.thumb {
+            opacity: 1 !important;
+            overflow: visible;
+        }
+    }
+
     >.thumb {
+        &:after {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: -4px;
+            right: -4px;
+            width: auto;
+            display: block;
+            content: "";
+        }
+
+        transition: opacity .2s;
         position: absolute;
         border-radius: 7px;
         height: 100%;