efront 4.9.4 → 4.10.1

package/coms/zimoli/tree.js

@@ -1,8 +1,10 @@
 var getTreeFromArray = Tree.fromArray;
 function buildCrack(com, set) {
-    var count = com.length;
-    for (var cx = 0, dx = com.length; cx < dx; cx++) {
-        var c = com[cx];
+    var coms = com;
+    while (coms.joined) coms = coms[0];
+    var count = coms.length;
+    for (var cx = 0, dx = coms.length; cx < dx; cx++) {
+        var c = coms[cx];
         if (!c.isClosed() && c.length) {
             count += buildCrack(c, false);
         }
@@ -13,23 +15,24 @@ function buildCrack(com, set) {
     return count;
 }
 
-function getCrackTarget(com) {
+function getChildrenBottom(com) {
+    while (com.joined) com = com[0];
     for (var cx = com.length - 1; cx >= 0; cx--) {
         var c = com[cx];
         if (!c.isClosed() && c.length) {
-            var t = getCrackTarget(c);
+            var t = getChildrenBottom(c);
             if (t) {
                 return t;
             }
         }
-        if (c.target) return c.target;
+        if (c.$target) return c.$target;
     }
-    return com.target;
+    return com.$target;
 }
 
 var getArrayFromTree = Tree.toArray;
 var appendTo = Tree.appendTo;
-
+var getOffset = e => getScreenPosition(e, false);
 function tree() {
     var element, generator;
     [].forEach.call(arguments, function (arg) {
@@ -52,35 +55,37 @@ function tree() {
         banner.setData(this.src);
         this.src = root;
     });
-
-    var banner = list(element, function (index) {
-        var coms = dom;
-        if (index >= coms.length) return;
-        var com = coms[index];
+    var createChild = function (com, index) {
         var span;
-        if (!com) return;
-        if (com.target) {
-            com.target.index = index;
-            com.target.refresh();
-            return com.target;
-        }
         var tabs = new Array(com.tab + 1).join("<t></t>");
         if (isFunction(generator)) {
             var elem = generator(index, com.constructor === Item ? com.value : com, com);
             if (!elem) return;
+            var c = com;
+            while (c.joined) {
+                c = c[0];
+                var e = generator(index, c.constructor === Item ? c.value : c, c);
+                appendChild(elem, e.childNodes);
+            }
             span = document.createElement('span');
             span.innerHTML = tabs;
             span.setAttribute("tabs", '');
             elem.insertBefore(span, elem.firstChild);
             span = elem;
         } else {
+            var name = c => `<c>${c.name}</c>${c.test ? "<i>_test</i>" : ""}`;
+            var c = com;
+            var names = [name(c)];
+            while (c.joined) {
+                c = c[0];
+                names.push(name(c));
+            }
             span = document.createElement("node");
-            html(span, `<span tabs>${tabs}</span><c>${com.name}</c>${com.test ? "<i>_test</i>" : ""}<a class=count>${com.count}</a>`);
+            html(span, `<span tabs>${tabs}</span>${names.join('/')}<a class=count>${com.count}</a>`);
             span.count = span.lastElementChild;
         }
         var _div = button(span);
         _div.setAttribute("node", '');
-        _div.index = index;
 
         if (!com.saved) {
             com.saved = {};
@@ -116,13 +121,13 @@ function tree() {
             }
             _div.style.zIndex = 1;
             _div.itemid = com.id;
-            if (_div.index === changed_index) {
+            if (_div.$index === changed_index) {
                 saved_top = _div;
                 setState(true);
             } else {
                 setState();
             }
-            if (_div.index === changed_offset) {
+            if (_div.$index === changed_offset) {
                 saved_offset = _div;
             }
             com.closed = com.isClosed();
@@ -132,33 +137,36 @@ function tree() {
         var setState = function (closed = com.isClosed()) {
             var saved = com.saved;
             if (com.length) {
-                if (saved.closed !== closed) {
+
+                if (saved.closed !== closed || _div !== com.$target) {
                     saved.closed = closed;
                     if (closed) {
-                        addClass(com.target, 'closed');
-                        removeClass(com.target, 'open empty');
+                        addClass(_div, 'closed');
+                        removeClass(_div, 'open empty');
                     } else {
-                        addClass(com.target, 'open');
-                        removeClass(com.target, 'closed empty');
+                        addClass(_div, 'open');
+                        removeClass(_div, 'closed empty');
                     }
                 }
                 if (saved.empty) {
-                    removeClass(com.target, 'empty');
+                    removeClass(_div, 'empty');
                     saved.empty = false;
                 }
             } else {
                 if (!saved.empty) {
                     saved.empty = true;
-                    addClass(com.target, 'empty');
+                    addClass(_div, 'empty');
                 }
                 if (saved.closed === true || saved.closed === false) {
-                    removeClass(com.target, 'closed open');
+                    removeClass(_div, 'closed open');
                     saved.closed = null;
                 }
             }
         };
-        com.target = _div;
-        _div.refresh();
+        var getChildrenTop = function (com) {
+            while (com.joined) com = com[0];
+            return com[0]?.$target;
+        }
         onclick(_div, function (event) {
             var isClosed = com.isClosed();
             if (!active(banner, com.value, com, banner.$src ? createItemTarget.call(banner, com.value) : _div)) {
@@ -167,24 +175,24 @@ function tree() {
             if (isClosed === com.isClosed() && com.length) {
                 com.setClosed(!isClosed);
             }
-            var index = this.index;
+            var index = this.$index;
             changed_index = index;
             buildCrack(com);
             changed_offset = com.crack + index;
             if (!com.length) {
-                dom.forEach(d => d.target && d.target.refresh());
+                dom.forEach(d => d.$target && d.$target.refresh());
                 return;
             }
             var z0 = function () {
                 var z = function (e) {
-                    if (e.target) e.target.style.zIndex = 0;
+                    if (e.$target) e.$target.style.zIndex = 0;
                     if (e instanceof Array) e.forEach(z);
                 };
                 com.forEach(z);
             };
             var z1 = function () {
                 var z = function (e) {
-                    if (e.target) e.target.style.zIndex = 1;
+                    if (e.$target) e.$target.style.zIndex = 1;
                     if (e instanceof Array) e.forEach(z);
                 };
                 com.forEach(z);
@@ -195,8 +203,8 @@ function tree() {
             if (com.isClosed() && com.length) {
                 z0();
                 setState(true);
-                var bottom = getCrackTarget(com);
-                var top = com[0].target;
+                var bottom = getChildrenBottom(com);
+                var top = getChildrenTop(com);
                 if (!top) return refresh();
                 var marginTop;
                 if (!bottom || !bottom.offsetTop) {
@@ -229,11 +237,25 @@ function tree() {
                 timeout(z1, res + 60);
             }
         });
-
+        return _div;
+    };
+    var banner = list(element, function (index) {
+        var coms = dom;
+        if (index >= coms.length) return;
+        var com = coms[index];
+        if (!com) return;
+        if (com.$target) {
+            com.$target.$index = index;
+            com.$target.refresh();
+            return com.$target;
+        }
+        var _div = createChild(com, index);
+        com.$target = _div;
+        _div.$index = index;
+        _div.refresh();
         return _div;
     });
 
-
     banner.setData = function (src) {
         root = new Tree(src);
         refresh();
@@ -242,14 +264,82 @@ function tree() {
         appendTo(parent, data);
         refresh();
     };
+    if (!('joined' in banner)) {
+        var joined = banner.hasAttribute("join") && !/^(false|0|null|nill?)/i.test(banner.getAttribute('join')) || banner.join;
+        banner.joined = joined != undefined ? joined : 7;
+    }
+    var stickys = [];
+    var setSticky = function () {
+        var p = stickys[stickys.length - 1];
+        var f = banner.getFirstVisibleElement(stickys.top + 1);
+        if (!f) return;
+        var limitHeight = f.offsetTop - banner.scrollTop;
+        var c = dom[f.$index];
+        var useLimit = false;
+        if (p) {
+            var d = dom[p.$index];
+            if (d.tab == c.tab) {
+                var { top, height } = getOffset(p);
+                if (top + height >= limitHeight) {
+                    var ic = c.parent.indexOf(c);
+                    useLimit = c.parent[ic - 1] === d;
+                    if (useLimit) c = d;
+                }
+            }
+            else {
+                useLimit = true;
+                limitHeight += getOffset(f).height;
+            }
+        }
+        var parents = [];
+        if (c.isClosed() || !c.length) c = c.parent;
+        while (c.parent) {
+            var p = c.parent;
+            if (!p?.joined) {
+                if (!c.$target) return;
+                parents.push(c);
+            }
+            c = p;
+        }
+        stickys.forEach(s => s.sticky = false);
+        parents = parents.map(p => {
+            p.sticky = true;
+            return p.$target;
+        });
+        parents.reverse();
+        stickys.forEach(s => {
+            if (!s.sticky) {
+                css(s, {
+                    position: "",
+                    top: '',
+                    zIndex: 1
+                })
+            }
+        })
+        stickys = parents;
+        var top = 0;
+        stickys.forEach(p => {
+            var h = getOffset(p).height;
+            var limit = useLimit && top + h > limitHeight;
+            css(p, {
+                position: 'sticky',
+                top: limit ? limitHeight - h : top, zIndex: 3 - limit
+            });
+            top += h;
+        });
+        stickys.top = top;
+    }
     var refresh = function () {
         var index = banner.index();
-        var needremoves = dom.map(d => d.target).filter(d => !!d);
-        dom = getArrayFromTree(root, true);
+        var needremoves = dom.map(d => d.$target).filter(d => !!d);
+        dom = getArrayFromTree(root, banner.joined);
         remove(needremoves, false);
         banner.go(index || 0);
         css(banner, { paddingBottom: '' });
+        setSticky();
     };
+    on("mounted")(banner, setSticky);
+    on('scroll')(banner, setSticky);
     banner.refresh = refresh;
 
     return banner;

package/coms/zimoli/tree.less

@@ -11,6 +11,8 @@
         color: inherit;
         padding-right: 10px;
         box-shadow: none;
+        width: 100%;
+        border-radius: 0;
 
         &.line,
         &[line] {
@@ -69,7 +71,6 @@ t {
         margin-left: -.2em;
         margin-right: .2em;
         margin-top: .2em;
-        
         border-top: .4em solid;
         border-bottom: .2em solid transparent;
     }

package/coms/zimoli/vbox.js

@@ -78,12 +78,12 @@ function ybox(generator) {
             }
             height = height * Math.pow(.92, t / 6);
             increaser.height = height
-            increaser.style.height = fromOffset(height);
+            increaser.style.marginBottom = fromOffset(height);
             return height;
         }
         if (increaser.height) {
             increaser.height = 0;
-            increaser.style.height = 0;
+            increaser.style.marginBottom = 0;
             return 1;
         }
         remove(increaser);
@@ -121,7 +121,7 @@ function ybox(generator) {
                 increaser_b.style.marginTop = 0;
                 increaser_b.style.marginBottom = 0;
                 increaser_b.height = 0;
-                increaser_b.style.height = 0;
+                increaser_b.style.marginBottom = 0;
                 appendChild(_box, increaser_b);
                 var deltaMargin = _box.scrollHeight - increaser_b.offsetTop - parseFloat(getComputedStyle(_box).paddingBottom);
                 if (deltaMargin > 0) {
@@ -133,8 +133,8 @@ function ybox(generator) {
         if (t_height > increase_height) t_height = increase_height;
         if (b_height < 0) b_height = 0;
         if (t_height < 0) t_height = 0;
-        if (!minusOnly || b_height < increaser_b.height) increaser_b.height = b_height, increaser_b.style.height = fromOffset(b_height);
-        if (!minusOnly || t_height < increaser_t.height) increaser_t.height = t_height, increaser_t.style.height = fromOffset(t_height);
+        if (!minusOnly || b_height < increaser_b.height) increaser_b.height = b_height, increaser_b.style.marginBottom = fromOffset(b_height);
+        if (!minusOnly || t_height < increaser_t.height) increaser_t.height = t_height, increaser_t.style.marginBottom = fromOffset(t_height);
         return t_height < increase_height && b_height < increase_height;
     };
     if (/Edge|Trident/i.test(navigator.userAgent)) {

package/coms/zimoli/vbox.less

@@ -38,5 +38,7 @@
 }
 
 >.x-insert {
-    display: inline-block;
+    display: block;
+    float: left;
+    height: 100%;
 }

package/coms/zimoli/zimoli.js

@@ -603,7 +603,7 @@ function addGlobal(element, name = null, isDestroy) {
         }
         if (isFunction(body.layer)) {
             body.layer(element, oldElement, history);
-        } else {
+        } else if (body !== element) {
             if (isDestroy || !oldElement) appendChild.insert(body, element);
             else appendChild.after(oldElement, element);
             remove(oldElement);

package/docs//347/273/204/344/273/266.xht

@@ -70,13 +70,13 @@
         height: 100%;
     }
 
-    [codearea]>code {
+    [codearea]>.codetext {
         overflow: auto;
         display: block;
+        white-space: pre;
         height: auto;
         min-height: 100%;
-        padding: 10px 20px 40px 20px;
-        white-space: nowrap;
+        border-width: 10px 20px 40px 20px;
         outline: none;
     }
 
@@ -380,7 +380,7 @@
         if (node) {
             var next = node.nextSibling;
             if (next) {
-                next = /^\u2002+/.exec(next.nodeValue);
+                next = /^[\u2002\u0020\u00a0]+/.exec(next.nodeValue);
                 if (next) return next[0].length;
             }
         }

package/package.json

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