efront 4.0.54 → 4.0.56

package/coms/compile/richcss_test.js

@@ -1,15 +1,40 @@
 var test = function (data, expect) {
     assert(richcss(data), expect);
 };
+test(`&{--a:1}a{opacity:--a}`, `a{opacity:1;}`);
+test(`:root{--a:1}a{opacity:--a}`, `a{opacity:1;}`);
 test(`:scope{--a:1}a{opacity:--a}`, `a{opacity:1;}`);
 test(`:scope{--b:--a;--a:1;}a{opacity:--b}`, `a{opacity:1;}`);
 test(`@a(@p,@b){@p{opacity:@b}}@a(a,1);`, `a{opacity:1;}`);
 test(`@a(a,1);@a(@p,@b){@p{opacity:@b}}`, `a{opacity:1;}`);
-test(`a{ b{a:1}}`,`a b{a:1;}`);
-test(`a{ >b{a:1}}`,`a>b{a:1;}`);
-test(`a{ &>b{a:1}}`,`a>b{a:1;}`);
-test(`a{ &b{a:1}}`,`ab{a:1;}`);
-test(`a{ &.b{a:1}}`,`a.b{a:1;}`);
-test(`a{ &[b]{a:1}}`,`a[b]{a:1;}`);
-test(`a{ &[b]:nth-child(1){a:1}}`,`a[b]:nth-child(1){a:1;}`);
-test(`a,b{c{a:1}}`,`a c,b c{a:1;}`);
+test(`a{ b{a:1}}`, `a b{a:1;}`);
+test(`a{ >b{a:1}}`, `a>b{a:1;}`);
+test(`a{ &>b{a:1}}`, `a>b{a:1;}`);
+test(`a{ &b{a:1}}`, `ab{a:1;}`);
+test(`a{ &.b{a:1}}`, `a.b{a:1;}`);
+test(`a{ &[b]{a:1}}`, `a[b]{a:1;}`);
+test(`a{ &[b]:nth-child(1){a:1}}`, `a[b]:nth-child(1){a:1;}`);
+test(`a,b{c{a:1}}`, `a c,b c{a:1;}`);
+test(`@media(){div{a:1}}`, `@media(){div{a:1;}}`);
+test(`@keyframes a{%1{a:1}}`, `@keyframes a{%1{a:1;}}`);
+test(`@media screen and (max-width: 200px){@keyframes a{%1{a:1}}}`, `@media screen and (max-width: 200px){@keyframes a{%1{a:1;}}}`);
+test(`@a:1`, ``);
+test(`@a:1;a{a:@a}`, `a{a:1;}`);
+test(`@a:1;a{@{a}:@a}`, `a{1:1;}`);
+test(`@a:1;a{@a:2;@{a}:@a}`, `a{2:2;}`);
+test(`@a:1;@a{@a:2;@{a}:@a}`, `1{2:2;}`);
+test(`@b(@a:1){@a{a:b}}@b(2)`, `2{a:b;}`);
+test(`@a:1; a{a:@a/2}`, `a{a:0.5;}`);
+test(`.a(){b{a:2}} .a();`, `b{a:2;}`);
+test(`#a(){b{a:2}} #a();`, `b{a:2;}`);
+test(`#a{a:1}`, `#a{a:1;}`);
+test(`#a{}`, ``);
+test(`@a{}`, ``);
+test(`.a{}`, ``);
+test(`a{}`, ``);
+test(`@a: 1,2;each(@a,(){b{a:@value}})`, `b{a:1;}\r\nb{a:2;}`);
+test(`@a(){a:A;b:B} each(@a(),(@v,@k,@i){@{key}@{i}{@{v}:@i}})`, `a1{A:1;}\r\nb2{B:2;}`);
+test(`b{a:darken(#fff,10%)}`, `b{a:#f5f5f5;}`);
+test(`b{a:darken(hsl(90, 80%, 50%), 20%)}`, `b{a:#6cd205;}`);
+test(`b{a:darken(#6cd205, 20%)}`, `b{a:#58be00;}`);
+test(`b{a:darken(#7ff,10%)}`, `b{a:#6df5f5;}`);

package/coms/compile/scanner2.js

@@ -208,6 +208,7 @@ function scan(text, type = "js", lastIndex = 0) {
     program.Code = Code;
     program.lastIndex = lastIndex;
     var res = program.exec(text);
+    res.autospace = !program.keepspace;
     Object.defineProperty(res, "program", { value: program, enumerable: false })
     return res;
 }

package/coms/docs/codetext.xht

@@ -148,7 +148,7 @@
                     o.text = keys.map(k => /^\</.test(k) || !k ? k : `<express>${k}</express>`).join(".");
                     break;
                 case STRAP:
-                    if (/^(if|else|switch|case|do|while|for|break|continue|default|import|from|as|export|try|catch|finally|await|yield|return)$/.test(text))
+                    if (/^(if|else|switch|case|do|while|for|break|continue|default|import|from|as|export|try|catch|finally|throw|await|yield|return)$/.test(text))
                         o.text = `<flow>${o.text}</flow>`;
                     else o.text = `<strap>${o.text}</strap>`;
                     break;

package/coms/docs/markdown.js

@@ -20,24 +20,28 @@ var h = function (text) {
 var p = function (text) {
     if (text.length) return new Element("p", text);
 };
+var p2 = function (text) {
+    if (text.length) return new Element('div', text);
+}
 var li = function (c) {
     var li = new Element(li, c.replace(/^\*\s+|^[\d]+\.\s+/, ''));
     return li;
 }
 var list_elem = null, list_tag;
-var list = function (tag, text, li = 'li') {
+var list = function (tag, text, indent, li = 'li') {
     if (!list_elem || list_tag !== tag || list_elem !== content[content.length - 1]) {
         list_elem = new Element(tag);
+        list_elem.indent = indent;
         list_tag = tag;
         content.push(list_elem);
     }
     list_elem.appendChild(new Element(li, text.replace(/^\*\s+|^\d+\.\s+/, '')));
 };
-var ul = function (content) {
-    return list('ul', content);
+var ul = function (content, indent) {
+    return list('ul', content, indent);
 };
-var ol = function (content) {
-    return list('ol', content);
+var ol = function (content, indent) {
+    return list('ol', content, indent);
 };
 var tr = function (line) {
     if (/^[\|\-\s]+$/.test(line)) {
@@ -64,22 +68,31 @@ var tr = function (line) {
         return;
     }
     line = line.replace(/^\||\|$/g, '').split("|").map(t => `<td>${t}</td>`).join('');
-    return list('table', line, 'tr');
+    return list('table', line, NaN, 'tr');
 }
 function richtext(line) {
-    line = line.trim();
+    var tagIndent = /^\s+/.exec(line);
+    if (!tagIndent) tagIndent = 0;
+    else tagIndent = tagIndent[0].length;
+    line = line.slice(tagIndent);
     line = line.replace(/\[([\s\S]*?)\](?:\(([\s\S]*?)\))?|<(\w+)>[\s\S]*?<\/\3>/g, function (_, content, href) {
         if (/^\</.test(_)) return _;
         if (href) var href1 = ` href=${strings.recode(href)}`;
         return `<a${href1}>${content || href}</a>`;
     });
     var a;
-    if (/^#/.test(line)) a = h(line);
-    else if (/^\*\s+/.test(line)) ul(line);
-    else if (/^\d+\.\s+/.test(line)) ol(line);
+    if (/^#/.test(line)) content.push(h(line));
+    else if (/^\*\s+/.test(line)) ul(line, tagIndent);
+    else if (/^\d+\.\s+/.test(line)) ol(line, tagIndent);
     else if (/^\|/.test(line)) tr(line);
-    else a = p(line);
-    if (a) content.push(a);
+    else {
+        if (list_elem && list_elem === content[content.length - 1] && list_elem.indent <= tagIndent) {
+            list_elem.appendChild(p(line));
+        }
+        else {
+            content.push(p2(line));
+        }
+    }
 }
 /**
  * @type {Element}
@@ -87,7 +100,7 @@ function richtext(line) {
 var content;
 function markdown(text) {
     var c = content = [];
-    text.replace(/ *(`+|\*+)(\S[\s\S]*?)\1 */g, function (_, q, c, i) {
+    text.replace(/([ \t\v]*)(`+|\*+)(\S[\s\S]*?)\2([ \t\v]*)/g, function (_, s1, q, c, s2, i) {
         if (/^\*/.test(q)) {
             var m = q.length;
             if (m & 1) c = `<i>${c}</i>`;
@@ -96,11 +109,11 @@ function markdown(text) {
         }
         _ = codetext.encode(_.trim()).slice(1, -1);
         if (/[\*#\.]\s/.test(text.slice(i - 1, i + 1))) _ = " " + _;
-        if (q.length === 1) return `<m>${_}</m>`;
+        if (q.length === 1) return `${s1}<m>${_}</m>${s2}`;
         var t = /^\S+/.exec(c);
         if (t) t = t[0]; c = c.slice(t.length).replace(/^(\r\n|\r|\n)|\s+$/g, '');
         try {
-            return codetext(t, c);
+            return s1 + codetext(t, c) + s2;
         } catch (e) {
             console.error(e);
             return c;

package/coms/zimoli/AudioContext_test.less

@@ -1,6 +1,10 @@
 & {
     white-space: nowrap;
     overflow: auto;
+    background: #421;
+    border-top: 10px solid #000;
+    padding: 20px 40px 60px 40px;
+    // perspective: 3000px; 多嵌套一层，不起作用
 }
 
 &>div {
@@ -11,7 +15,11 @@
         z-index: 2;
         width: 60px;
         text-align: center;
-        color: green;
+        text-transform: uppercase;
+        font-family: 'Times New Roman', Times, serif;
+        font-style: italic;
+        font-weight: 900;
+        color: #999;
 
         &:before {
             content: "c";
@@ -26,6 +34,32 @@
 
     button {
         pointer-events: all;
+        transform-style: preserve-3d;
+
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        position: relative;
+
+        &.hover {
+            >.track {
+                box-shadow: none;
+                background: #fff1;
+            }
+
+            box-shadow: 0 0 12px -4px #0003;
+        }
+
+        &.active {
+            z-index: 0;
+
+            >.track {
+                background: #0003;
+                background: linear-gradient(0deg, #0003, #0000);
+            }
+
+            transform-origin: 30px -270px -10px;
+            transform:rotateX(-7deg);
+        }
+
     }
 
     &.odd {
@@ -34,10 +68,9 @@
             margin: 0 2px;
             width: 56px;
             background: #fff;
-            color: #333;
+            color: #aaa;
             height: 280px;
             padding: 80px 0 0 0;
-
             box-shadow: 0 0 20px -6px rgba(0, 0, 0, .3);
 
             span {
@@ -52,7 +85,7 @@
 
         button {
             width: 40px;
-            margin: 0 10px;
+            margin: 10px 10px;
             box-shadow: 0 0 20px -6px rgba(0, 0, 0, .3);
 
             &:nth-child(1) {
@@ -68,7 +101,7 @@
             color: #fff;
             height: 120px;
 
-            &:nth-child(7n+2) {
+            &:nth-child(2) {
                 margin-right: 70px;
             }
         }

package/coms/zimoli/HexEditor.less

@@ -8,9 +8,9 @@
     font-size: 16px;
     position: relative;
     min-height: 100px;
-    padding: 0 0 10px 16px;
+    padding: 0 6px 10px 16px;
     font-family: 宋体;
-    width: 422px;
+    width: 438px;
 
     >a {
         display: inline-block;
@@ -40,7 +40,7 @@
         word-spacing: 2px;
         font-size: inherit;
         line-height: 30px;
-        margin: 0 0 10px -16px;
+        margin: 0 -6px 10px -16px;
         padding: 0 16px 0 16px;
         position: sticky;
         top: 0;

package/coms/zimoli/autodragchildren.js

@@ -340,6 +340,17 @@ var hooka = function (matcher, move, event, targetChild, isMovingSource) {
             offdragend();
         };
         var offdragstart = on('dragstart')(targetChild, function () {
+            var c = drag.shadow;
+            var zIndex = c.style.zIndex - 1;
+            var copyZIndex = function (e) {
+                e.style.zIndex = zIndex;
+                var z = zIndex - 1;
+                if (e.with) for (var w of e.with) w.style.zIndex = z;
+            };
+            if (zIndex > 2) {
+                previousElements.forEach(copyZIndex);
+                followedElements.forEach(copyZIndex);
+            }
             setOpacity(targetBox, draggingSourceOpacity);
         });
         var offdragend = on("dragend")(targetChild, function () {
@@ -350,6 +361,8 @@ var hooka = function (matcher, move, event, targetChild, isMovingSource) {
             remove(followedElements);
             previousElements.map(recover);
             followedElements.map(recover);
+            previousElements.splice(0, previousElements.length);
+            followedElements.splice(0, followedElements.length);
         });
         var offdragmove = on("dragmove")(targetChild, dragmove);
     }

package/coms/zimoli/cloneVisible.js

@@ -1,4 +1,4 @@
-var cloneProperties = "fontWeight,fontSize,fontFamily,color,textShadow,opacity,writingMode,blockSize,wordSpacing,letterSpacing,whiteSpace,lineHeight".split(",");// text-node
+var cloneProperties = "fontWeight,fontSize,fontFamily,color,textShadow,opacity,writingMode,blockSize,wordSpacing,letterSpacing,whiteSpace".split(",");// text-node
 var cloneProperties2 = "position,backdropFilter,filter,float,clear,margin,color,verticalAlign,textAlign,textShadow,opacity,boxShadow,overflow,textOverflow,wordBreak,webkitLineClamp,webkitBoxOrient,writingMode,blockSize,wordSpacing,letterSpacing,textIndent,lineHeight,display,appearance,webkitAppearance,MozAppearance".split(",");// element
 var pushProperty = function (key, props) {
     props.split(",").forEach(k => {

package/coms/zimoli/drag.js

@@ -76,6 +76,7 @@ function drag(target, initialEvent, preventOverflow, isMovingSource) {
                 extraTargets = [];
                 if (target.style) css(target, { zIndex: z });
             }
+            drag.shadow = clone;
             var [clone_left, clone_top] = getOffset(clone);
             extraClones = extraTargets.map(toCloneTarget);
             extraClones.forEach(addZIndex);

package/coms/zimoli/gallery_test.less

@@ -1,5 +1,5 @@
 & {
-    height: 100%;
+    height: 300px;
 }
 
 &>gallery {

package/coms/zimoli/getGenerator.js

@@ -23,20 +23,22 @@ var getGenerator = function (container, tagName = 'item') {
     if (container.$generator) return container.$generator;
     var template = document.createElement(container.tagName);
     var templates = [];
+    var hasAfter = false;
     for (let a of container.childNodes) {
         if (a.nodeType === 1 && a.hasAttribute('insert')) {
             if (!templates.length) a.$isbefore = true;
-            else a.$isafter = true;
+            else { a.$isafter = true; hasAfter = true; }
         }
-        else {
+        else if (hasAfter);
+        else if (a.nodeType === 1 || templates.length) {
             templates.push(a);
         }
     }
+    while (templates.length > 1 && templates[templates.length - 1].nodeType !== 1) templates.pop();
     if (templates.length < container.childNodes.length && templates.length >= 1) {
-        var c = document.createComment('lattice');
+        var c = document.createComment('generator');
         c.index = null;
         container.insertBefore(c, templates[0]);
-        templates.splice(1, templates.length - 1);
         var paddingCount = [].indexOf.call(container.childNodes, c);
         container.paddingCount = paddingCount;
     }

package/coms/zimoli/lattice_test.less

@@ -4,6 +4,7 @@
 }
 
 >lattice {
+    max-height: 300px;
     height: 100%;
     @mask-color: rgba(0, 0, 0, .4);
     // background: linear-gradient(45deg, @mask-color, 25%, @mask-color, 25%, rgba(0, 0, 0, 0), 75%, rgba(0, 0, 0, 0), 75%, @mask-color), linear-gradient(135deg, @mask-color, 25%, @mask-color, 25%, rgba(0, 0, 0, 0), 75%, rgba(0, 0, 0, 0), 75%, @mask-color);

package/coms/zimoli/list.js

@@ -169,9 +169,9 @@ function ylist(container, generator, $Y) {
                 delete childrenMap[offset];
             }
             if (last_index > offset) {
-                if (item.nextElementSibling !== last_item) list.insertBefore(item, last_item);
+                if (item.nextElementSibling !== last_item) insertBeforeList(item, last_item);
             } else {
-                if (item.previousElementSibling !== item) list.insertBefore(item, getNextSibling(last_item));
+                if (item.previousElementSibling !== item) insertBeforeList(item, getNextSibling(last_item));
             }
             last_index = offset;
             item = getNodeTarget(item);
@@ -229,6 +229,17 @@ function ylist(container, generator, $Y) {
         } while (next.offsetTop === element.offsetTop);
         return next.offsetTop - element.offsetTop;
     };
+    var insertBeforeList = function (elem, flag) {
+        if(flag){
+            var w = elem.with;
+            if (w) {
+                if (w[w.length - 1].nextSibling === flag) return;
+            }
+            else if (elem.nextSibling === flag) return;
+        }
+        list.insertBefore(elem, flag);
+        if (elem.with) for (var w of elem.with) list.insertBefore(w, flag);
+    };
     var patchBottom = function (deltaY = 0) {
         var cache_height = list.offsetHeight;
         var childrenMap = getChildrenMap();
@@ -250,7 +261,7 @@ function ylist(container, generator, $Y) {
                 } else if (!restHeight) {
                     restHeight = cache_height;
                 }
-                list.insertBefore(item, getNextSibling(last_element));
+                insertBeforeList(item, getNextSibling(last_element));
             }
             item = getNodeTarget(item);
             if (!item.offsetHeight) {
@@ -315,7 +326,7 @@ function ylist(container, generator, $Y) {
             if (!item) {
                 item = createItem(offset);
                 if (!item) break;
-                list.insertBefore(item, first_element);
+                insertBeforeList(item, first_element);
                 item = getNodeTarget(item);
                 scrollTop += flag_element.offsetTop - offsetTop;
                 offsetTop = flag_element.offsetTop;
@@ -648,6 +659,7 @@ function list() {
     list.clean = function (src, old) {
         var children = (container || list).childNodes;
         children = Array.prototype.filter.call(children, c => {
+            if (c.index === null) return false;
             if (isFinite(c.index)) return true;
             if (c.nodeType === 1 && c.$comment && isFinite(c.$comment.index)) return true;
             return false;

package/coms/zimoli/maps_test.less

@@ -7,9 +7,14 @@
     background-position: 0 0, @background-size/2 @background-size/2;
     height: 200px;
 }
-
+menu{
+    left: 0;
+    width: 100%;
+    appearance: none;
+    display: block;
+}
 canvas {
     width: 100%;
-    height: 100%;
+    height: 300px;
     background-color: #035;
 }

package/coms/zimoli/mediaDevices.less

@@ -4,10 +4,9 @@
 
 & {
     max-height: 500px;
-    position  : fixed;
+    position  : relative;
     width     : 360px;
     height    : 100%;
-    padding   : 50px 0 0 0;
 }
 
 .device {

package/docs/main.xht

@@ -42,7 +42,7 @@
         content: "样";
     }
 
-    menu {
+    :root>menu {
         margin: 0;
         width: var(--leftwidth);
         margin-left: -var(--leftwidth);

package/docs/mark.xht

@@ -2,8 +2,52 @@
     :scope {
         line-height: 1.8;
         display: block;
-        padding: 0 20px;
         font-family: Times, "宋体", sans-serif;
+
+        @media screen and (max-width:830px) {
+            padding: 20px 40px;
+        }
+
+        @media screen and (min-width:1160px) {
+            margin: 20px auto;
+        }
+
+        @media screen and (min-width:830px) {
+            max-width: 890px;
+            border: 1px solid #000;
+            padding: 60px 80px;
+            box-shadow: 0 0 20px -6px #0006;
+        }
+    }
+
+    code {
+        width: 100%;
+    }
+
+    table {
+        margin-top: 12px;
+    }
+
+    thead {
+        font-weight: 900;
+        text-align: center;
+
+        td {
+            border-bottom: 1px solid #000;
+        }
+    }
+
+    ol,
+    ul {
+        padding-left: 20px;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+        border-bottom: 1px solid #000;
     }
 
     [type="xml"] stamp,
@@ -54,7 +98,6 @@
         border-collapse: collapse;
         border: 1.2px solid #0007;
     }
-
 </style>
 <script>
     var history = [];

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

@@ -225,7 +225,7 @@
             if (envs[templateName]) {
                 delete envs[templateName];
                 var template = await cross("get", './components:' + modName + ".html");
-                codetext = `var ${templateName}={toString(){return \`${template.responseText}\`}};\r\n` + codetext;
+                codetext = `var ${templateName}={toString(){return \`${template.responseText.replace(/>\s+</g, '><')}\`}};\r\n` + codetext;
             }
             initcode(codetext);
         }

package/package.json

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