efront 4.4.13 → 4.5.0

package/coms/zimoli/render.js

@@ -71,7 +71,7 @@ var removeRenderElement = function () {
 function refresh(root) {
     var rest = [];
     var body = document.documentElement;
-    if (root && root.renders) {
+    if (root && root.$renders) {
         for (var k in renderElements) {
             var element = renderElements[k];
             if (
@@ -90,8 +90,8 @@ function refresh(root) {
     if (rest.length) rest.forEach(a => removeRenderElement.call(a));
 }
 function rebuild(element) {
-    if (!element.needchanges) {
-        element.renders.forEach(a => a.call(element));
+    if (!element.$needchanges) {
+        element.$renders.forEach(a => a.call(element));
         return;
     }
     var props = {};
@@ -99,7 +99,7 @@ function rebuild(element) {
         var data = element[key];
         props[key] = isObject(data) && !isFunction(data) && !isDate(data) && !isNode(data) ? extend(data instanceof Array ? [] : {}, data) : data;
     });
-    element.renders.forEach(a => a.call(element));
+    element.$renders.forEach(a => a.call(element));
     var changes = getChanges(element, props);
     if (changes) {
         var event = createEvent('changes');
@@ -118,7 +118,7 @@ var createGetter = function (target, search, isprop = true) {
 };
 var createComment = function (renders, type, expression) {
     var comment = document.createComment(`${type} ${expression}`);
-    comment.renders = renders;
+    comment.$renders = renders;
     comment.$scope = this.$scope;
     comment.$struct = this.$struct;
     comment.$parentScopes = this.$parentScopes;
@@ -294,7 +294,7 @@ var createIf = function (search, id = 0) {
     elements.comment = search;
     if (this.$struct.repeat) id = -3;
 
-    elements.renders = [function () {
+    elements.$renders = [function () {
         var shouldMount = -1;
         for (var cx = 0, dx = elements.length; cx < dx; cx += 2) {
             var getter = elements[cx + 1];
@@ -322,7 +322,7 @@ var createIf = function (search, id = 0) {
         }
 
     }];
-    return elements[0] = createComment.call(element, elements.renders, 'if', elements.comment);
+    return elements[0] = createComment.call(element, elements.$renders, 'if', elements.comment);
 };
 var parseIfWithRepeat = function (ifExpression, repeatExpression) {
     var repeater = parseRepeat(repeatExpression);
@@ -443,7 +443,7 @@ var createBinder = function (binder) {
     return function (search) {
         var getter = createGetter(this, `(${search})`);
         var oldValue;
-        this.renders.push(function () {
+        this.$renders.push(function () {
             var value = getter(this);
             if (shallowEqual(value, oldValue)) return;
             var oldv = oldValue;
@@ -465,19 +465,11 @@ var createBinder = function (binder) {
 var src2 = function (search) {
     var getter = createGetter(this, search);
     var savedValue;
-    this.renders.push(function () {
+    this.$renders.push(function () {
         var origin = getter(this);
-        var temp = origin;
-        if (origin instanceof Array) {
-            temp = extend([], origin);
-        } else if (isObject(origin)) {
-            temp = extend({}, origin);
-        } else if (!isHandled(origin)) {
-            temp = "";
-        }
+        var temp = shallowClone(origin, 1);
         if (isHandled(savedValue)) {
-            var changes = getChanges(temp, savedValue);
-            if (!changes) return;
+            if (shallowEqual(temp, savedValue, 1)) return;
         }
         else {
             if (isSame(savedValue, temp)) return;
@@ -533,16 +525,16 @@ var directives = {
             this[key] = value;
         };
         if (/^input$/i.test(target.tagName) && /^checkbox$/i.test(target.type) || /^checkbox$/i.test(target.tagName)) {
-            this.renders.push(setter || setter2.bind(target, 'checked'));
+            this.$renders.push(setter || setter2.bind(target, 'checked'));
             var change = getstr || "this.checked";
         } else if (("value" in target || target.getValue instanceof Function) && target.setValue instanceof Function) {
-            this.renders.push(setter);
+            this.$renders.push(setter);
             var change = getstr || "this.value";
         } else if (/^(select|input|textarea)$/i.test(target.tagName) || "value" in target) {
-            this.renders.push(setter || setter2.bind(target, 'value'));
+            this.$renders.push(setter || setter2.bind(target, 'value'));
             var change = getstr || "this.value";
         } else {
-            this.renders.push(setter || function () {
+            this.$renders.push(setter || function () {
                 var value = getter(this);
                 if (value === undefined) value = "";
                 if (deepEqual(oldValue, value)) return;
@@ -569,7 +561,7 @@ var directives = {
         var getter = createGetter(this, `(${search})`);
         var generatedClassNames = {};
         var oldValue;
-        this.renders.push(function () {
+        this.$renders.push(function () {
             var className = getter(this);
             if (deepEqual(oldValue, className)) return;
             oldValue = className;
@@ -608,7 +600,7 @@ var binders = {
         attr = attr.replace(/\-(\w)/g, (_, w) => w.toUpperCase());
         var getter = createGetter(this, search);
         var oldValue;
-        this.renders.push(function () {
+        this.$renders.push(function () {
             var value = getter(this);
             if (deepEqual(value, oldValue)) return;
             oldValue = value;
@@ -620,7 +612,7 @@ var binders = {
     ""(attr, search) {
         var getter = createGetter(this, search);
         var oldValue;
-        this.renders.push(function () {
+        this.$renders.push(function () {
             var value = getter(this);
             if (deepEqual(value, oldValue)) return;
             oldValue = value;
@@ -720,8 +712,8 @@ function getFromScopes(key, scope, parentScopes) {
 }
 
 function renderRest(element, struct, replacer = element) {
-    var renders = element.renders;
-    element.renders = [];
+    var renders = element.$renders;
+    element.$renders = [];
     var { binds, attrs, props } = struct;
     for (var k in binds) {
         if (k === 'src') continue;
@@ -741,7 +733,7 @@ function renderRest(element, struct, replacer = element) {
         } catch (e) { }
     }
     if (binds.src) directives.src.call(element, binds.src);
-    if (renders && renders.length) element.renders.push.apply(element.renders, renders);
+    if (renders && renders.length) element.$renders.push.apply(element.$renders, renders);
 }
 
 function renderElement(element, scope = element.$scope, parentScopes = element.$parentScopes, once) {
@@ -786,7 +778,7 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
         if (parentNode) {
             if (parentNode.$renderid > 1 || isMounted(parentNode)) element.$renderid = 2;
         }
-        element.renders = element.renders ? [].concat(element.renders) : [];
+        element.$renders = element.$renders || element.renders ? [].concat(element.$renders || [], element.renders || []) : [];
         var { copys, binds, once } = element.$struct;
         if (once) element.$renderid = 9;
         if (binds.src) {
@@ -823,8 +815,8 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
     if (!isFirstRender) return element;
     renderRest(element, element.$struct, replacer);
     if (isNode(replacer) && replacer !== element) {
-        if (!replacer.renders) replacer.renders = [];
-        replacer.renders.push.apply(replacer.renders, element.renders);
+        if (!replacer.$renders) replacer.$renders = [];
+        replacer.$renders.push.apply(replacer.$renders, element.$renders);
         if (replacer.$struct && replacer.$struct !== element.$struct) {
             element.$struct.ons.forEach(([on, key, value]) => on.call(element, replacer, key, value));
         }
@@ -833,7 +825,7 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
     else {
         element.$struct.ons.forEach(([on, key, value]) => on.call(element, element, key, value));
     }
-    if (element.renders.length) {
+    if (element.$renders.length) {
         if (element.$renderid !== 9) {
             onmounted(element, addRenderElement);
             onremove(element, removeRenderElement);

package/coms/zimoli/scrollbar.js

@@ -65,6 +65,13 @@ var scrollbary = function () {
             css(thumb, { top: targetY });
             dispatch(target, "change");
         }
+        var tt = target.target;
+        if (tt) {
+            var { Height, height } = getTargetHeight(tt);
+            var top = targetY * (Height - height) / (target.clientHeight - thumb.offsetHeight);
+            setTargetTop(tt, top);
+        }
+
     };
 
     var mouseup = function () {
@@ -141,29 +148,30 @@ var scrollbary = function () {
         return { Height, height };
     };
 
-    function bindTarget(_container, followResize = _container) {
-        var _scrollbar = this;
-        _container.with = _scrollbar;
-        _scrollbar.target = _container;
-        onmounted(_container, _scrollbar.reshape);
-        on("scroll")(_container, function () {
-            var top = getTargetTop(_container);
+    function scrollbar(elem) {
+        var onscroll = function () {
+            var top = getTargetTop(this);
             _scrollbar.scrollTo(top);
             _scrollbar.autoshow();
-        });
-        on("change")(_scrollbar, function () {
+        };
+        var onchange = function () {
             var top = _scrollbar.$Top();
-            setTargetTop(_container, top);
-        });
-        if (followResize) on("resize")(followResize, _scrollbar.reshape);
-    }
-    function scrollbar(elem) {
+            setTargetTop(this, top);
+        };
+        function bindTarget(_container, followResize = _container) {
+            _container.with = _scrollbar;
+            _scrollbar.target = _container;
+            onmounted(_container, _scrollbar.reshape);
+            on("scroll")(_container, onscroll);
+            on("change")(_scrollbar, onchange);
+            if (followResize) resizingList.set(followResize, _scrollbar.reshape);
+        }
         var _scrollbar = elem || document.createElement("scrollbar");
-        _scrollbar.reshape = function () {
+        _scrollbar.reshape = lazy(function () {
             var _container = _scrollbar.target;
             var { Height, height } = getTargetHeight(_container);
             reshape.call(_scrollbar, Height, height);
-        };
+        });
         _scrollbar.scrollTo = scrollTo;
         var _handler = document.createElement("scrollbar-thumb");
         _handler.className = "thumb";
@@ -192,16 +200,41 @@ var scrollbary = function () {
 }
 var scrollbar_y = scrollbary();
 var scrollbar_x = arriswise(scrollbary, arguments)();
-function main(direction) {
+var isBody = function (elem) {
+    return hasClass(elem, 'body') || elem.hasAttribute('body');
+}
+function main(elem) {
+    var direction, bar, target;
+    if (typeof elem === 'string') {
+        direction = elem;
+        elem = null;
+    }
+    else if (isElement(elem)) {
+        direction = elem.tagName;
+        var $struct = elem.$struct;
+        if ($struct) {
+            if ($struct.props?.target);
+            else if (isBody(elem.previousElementSibling)) {
+                target = elem.previousElementSibling;
+            }
+            else if (isBody(elem.nextElementSibling)) {
+                target = elem.nextElementSibling;
+            }
+        }
+        else if (!/^(\w*\-?)?scroll/i.test(direction)) target = elem, elem = null;
+    }
+    else {
+        elem = null;
+    }
     var bar, target;
     if (isElement(direction)) {
         target = direction;
         direction = target.tagName;
     }
     if (/^[xh]/i.test(direction)) {
-        bar = scrollbar_x();
+        bar = scrollbar_x(elem);
     } else {
-        bar = scrollbar_y();
+        bar = scrollbar_y(elem);
     }
     if (target) bar.bindTarget(target);
     return bar;

package/coms/zimoli/scrollbar.less

@@ -1,12 +1,24 @@
 & {
     position: absolute;
     width: 6px;
-    background-color: rgba(0, 0, 0, .1);
     border-radius: 7px;
     height: 100px;
     border-left: 3px solid transparent;
 
-    &:hover {
+    &[x],
+    &.x {
+        left: 0;
+        bottom: 0;
+    }
+
+    &[y],
+    &.y {
+        top: 0;
+        right: 0;
+    }
+
+    &:hover,
+    &:active {
         >.thumb {
             opacity: 1 !important;
             overflow: visible;

package/coms/zimoli/scrollbar_test.less

@@ -1,4 +1,5 @@
 & {
+    background-color: rgba(0, 0, 0, .1);
     >div {
         @mask-color: #ccc;
         width: 200px;

package/coms/zimoli/select.js

@@ -219,10 +219,10 @@ function select(target, list, removeOnSelect, direction) {
         }
         else _remove();
     };
-    if (!target.renders) {
-        target.renders = [];
+    if (!target.$renders) {
+        target.$renders = [];
     }
-    target.renders.push(setIcon);
+    target.$renders.push(setIcon);
     onclick(target, mousedown);
     return target;
 }

package/coms/zimoli/table.js

@@ -506,7 +506,7 @@ function table(elem) {
             },
             thead(t) {
                 var tr = document.createElement('thead');
-                tr.renders = [function () {
+                tr.$renders = [function () {
                     resizeT(this.firstChild)
                 }];
                 css(tr, { display: 'block' });

package/coms/zimoli/toBase64.js

@@ -1,14 +1,24 @@
 var encoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'.split('');
-function toBase64(input) {
+function toBase64(input, url) {
+    var encoding1 = encoding;
+    if (url) {
+        encoding1[62] = "-";
+        encoding1[63] = "_";
+    }
     for (var cx = 0, block, output = [], dx = input.length; cx < dx;) {
         block = input[cx++] << 16 | input[cx++] << 8 | input[cx++];
         output.push(
-            encoding[block >> 18],
-            encoding[block >> 12 & 0b111111],
-            encoding[block >> 6 & 0b111111],
-            encoding[block & 0b111111]
+            encoding1[block >> 18],
+            encoding1[block >> 12 & 0b111111],
+            encoding1[block >> 6 & 0b111111],
+            encoding1[block & 0b111111]
         );
     }
-    for (cx = output.length + dx - cx, dx = output.length; cx < dx; cx++) output[cx] = '=';
+    if (url) {
+        encoding1[62] = "+";
+        encoding1[63] = "/";
+        while (cx-- > dx) output.pop();
+    }
+    else for (cx = output.length + dx - cx, dx = output.length; cx < dx; cx++) output[cx] = '=';
     return output.join("");
 }

package/coms/zimoli/view.js

@@ -120,22 +120,29 @@ var resize2 = function () {
             marginTop: fromOffset(-height)
         })
     }
+    if (body.scrollHeight + body.offsetTop > this.clientHeight) {
+        css(body, { height: fromOffset(this.clientHeight) });
+    }
+    else {
+        css(body, { height: '' });
+    }
 };
 function view(element) {
-    var window = isNode(element) ? element : document.createElement("form");
+    var w = isNode(element) ? element : document.createElement("form");
     init();
-    extend(window, prototype);
-    if (window !== element) {
-        extend(window, element);
-        once("append")(window, function () {
-            if (window.draggable !== true && window.draggable !== false) {
-                window.draggable = /^(fixed|absolute)$/i.test(getComputedStyle(window).position);
+    extend(w, prototype);
+    if (w !== element) {
+        extend(w, element);
+        once("append")(w, function () {
+            if (w.draggable !== true && w.draggable !== false) {
+                w.draggable = /^(fixed|absolute)$/i.test(getComputedStyle(w).position);
             }
-            if (window.draggable) window.setAttribute('draggable', 'draggable');
+            if (w.draggable) w.setAttribute('draggable', 'draggable');
         })
-        if (window.resizable) resize.on(window);
+        if (w.resizable) resize.on(w);
     }
-    on('resize')(window, resize2);
-    onmounted(window, resize2);
-    return window;
+    resizingList.set(w, resize2);
+    w.reshape = lazy(resize2);
+    onmounted(w, w.reshape);
+    return w;
 }

package/coms/zimoli/view.less

@@ -40,6 +40,10 @@ body>& {
     border-top: 6px solid #fff2;
     border-bottom: 6px solid #fff2;
 
+    +.scrollbar {
+        z-index: 3;
+    }
+
     &:not(:nth-last-child(1)) {
         padding-bottom: 42px;
     }
@@ -116,9 +120,6 @@ body>& {
     margin-top: -42px;
 }
 
-.button {
-    vertical-align: middle;
-}
 
 >.foot,
 >[foot] {
@@ -126,6 +127,7 @@ body>& {
         min-width: 60px;
         padding: 0 20px;
         margin-left: 10px;
+        vertical-align: top;
         margin-bottom: 6px;
     }
 

package/docs/loader.js

@@ -114,7 +114,7 @@ var build = function () {
                 return;
             }
             if (isNode(comm)) {
-                if (!comm.isMounted) appendChild(mainArea, comm);
+                if (!comm.$mounted) appendChild(mainArea, comm);
             }
             else mainArea.innerHTML = `<div>[Data Object]{\r\n${isObject(comm) ? Object.keys(comm).join("\r\n\t") : comm}</div>`
             appendChild(mainArea, logpad);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "efront",
-    "version": "4.4.13",
+    "version": "4.5.0",
     "description": "简化前端开发，优化web性能",
     "main": "public/efront.js",
     "directories": {