efront 3.7.8 → 3.8.5

package/coms/zimoli/color.js

@@ -215,14 +215,24 @@ function hsl2rgb([h, s, l]) {
 	var b = h - 1 / 3;
 	return [r, g, b].map(t => t2rgb(t, p, q));
 }
+function percent(a) {
+	if (/%$/.test(a)) {
+		a = a.replace(/%$/, '') / 100;
+	}
+	return +a;
+}
 function parse(color) {
 	if (hslReg.test(color)) {
 		var [_, H, S, L, a] = hslReg.exec(color);
+		H = parseFloat(H);
+		S = percent(S);
+		L = percent(L);
+		a = percent(a);
 		[R, G, B] = hsl2rgb([H, S, L]);
 		return [R, G, B, a || 1];
 	} else if (rgbReg.test(color)) {
 		var [_, R, G, B, a] = rgbReg.exec(color);
-		return [R > 255 ? 255 : R, G > 255 ? 255 : G, B > 255 ? 255 : B, a || 1];
+		return [R > 255 ? 255 : +R, G > 255 ? 255 : +G, B > 255 ? 255 : +B, a ? +a : 1];
 	} else if (rgbHex.test(color)) {
 		var [_, R, G, B, A] = rgbHex.exec(color).map(a => parseInt(a + a, 16));
 		return [R, G, B, A >= 0 ? A / 0xff : 1];
@@ -234,6 +244,10 @@ function parse(color) {
 function stringify(color) {
 	var [R, G, B, a] = color;
 	if (a >= 0 && a < 1) {
+		R = R.toFixed();
+		G = G.toFixed();
+		B = B.toFixed();
+		a = +a.toFixed(3);
 		return `rgba(${R},${G},${B},${a})`;
 	} else {
 		return "#" + [R, G, B].map(hex256).join("");
@@ -291,12 +305,12 @@ function equal(c1, c2) {
 	var [r2, g2, b2, a2] = parse(c2);
 	return abs(r1 - r2) < 1 && abs(g1 - g2) < 1 && abs(b1 - b2) < 1 && abs(a1 - a2) < .01;
 }
-var hslReg = /^hsla?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:,\s*([\d\.]+))?\)$/i;
-var rgbReg = /^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:,\s*([\d\.]+))?\)$/i;
+var hslReg = /^hsla?\s*\(\s*([\d\.]+(?:deg)?)\s*[,\s]\s*([\d\.]+%?)\s*[,\s]\s*([\d\.]+%?)(?:[,\/\s]\s*([\d\.]+%?))?\)$/i;
+var rgbReg = /^rgba?\s*\(\s*([\d\.]+)\s*[,\s]\s*([\d\.]+)\s*[,\s]\s*([\d\.]+)(?:[,\s]\s*([\d\.]+))?\)$/i;
 var rgbHex = /^#([\da-f])([\da-f])([\da-f])([\da-f])?$/i;
 var rgbHex2 = /^#([\da-f]{2})([\da-f]{2})([\da-f]{2})([\da-f]{2})?$/i;
 var rotated_base_color = "#d16969";
-var colorReg = /rgba?\s*\([\,\.\d]+\)|#[\da-f]{3,8}/ig;
+var colorReg = /(?:rgb|hsl)a?\s*\([\,\.\d\s%]+\)|#[\da-f]{3,8}/ig;
 function isColor(text) {
 	return rgbReg.test(text) || rgbHex.test(text) || rgbHex2.test(text) || hslReg.test(text);
 }

package/coms/zimoli/colorlabel.js

@@ -1,6 +1,7 @@
 function main(elem = div()) {
-    care(elem, function (color) {
-        css(this, 'background', color);
+    care(elem, function (c) {
+        css(this, 'background-color', c);
+        css(this, 'color', color.pair(c));
     });
     return elem;
 }

package/coms/zimoli/colorlabel.less

@@ -1,7 +1,28 @@
 & {
-    width: 40px;
+    width: 180px;
     height: 20px;
-    background: #ccc;
     display: inline-block;
+    text-align: center;
+    font-size: 10px;
+    line-height: 20px;
+    position: relative;
+    .grid();
+    background-color: transparent;
 
-}
+    >option {
+        position: relative;
+    }
+
+    &:before {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        content: "";
+        display: block;
+        background-color: inherit;
+    }
+}
+
+@import "./bggrid-func.less";

package/coms/zimoli/colorpad.html

@@ -7,6 +7,10 @@
     <canvas></canvas>
     <pointer tabindex="-1"></pointer>
 </div>
+<div class="opa">
+    <canvas></canvas>
+    <pointer tabindex="-1"></pointer>
+</div>
 <div class="val">
     <input class="hex" />
     <input class="rgb" />

package/coms/zimoli/colorpad.js

@@ -13,12 +13,6 @@ var rgb2l = function (r, g, b) {
     var max = Math.max(r, g, b), min = Math.min(r, g, b);
     return (max + min) / 2;
 };
-// var rgb2s = function (r, g, b) {
-//     var l = rgb2l(r, g, b);
-//     var max = Math.max(r, g, b), min = Math.min(r, g, b);
-//     var m = Math.sqrt((r * r + g * g + b * b));
-//     return Math.sqrt((Math.pow(r - m, 2) + Math.pow(g - m, 2) + Math.pow(b - m, 2)) / 3);
-// };
 var rgb2v = color.rgb2v;
 var rgb2s = function (r, g, b) {
     var u = Math.sqrt((r * r + g * g + b * b) / 3);
@@ -34,8 +28,6 @@ var c4c = function (c, dark, light) {
 };
 
 var c2xy = function (c1, c2) {
-    var left = 0, right = 1, top = 0, bottom = 1;
-    var delta = 1 / 0xfffffff;
     var [r1, g1, b1] = color.parse(c1);
     var [r2, g2, b2] = color.parse(c2);
     var s = function (x, y) {
@@ -52,41 +44,13 @@ var c2xy = function (c1, c2) {
             }
         }
     }
-    // while (right - left > delta || bottom - top > delta) {
-    //     var dx = (right - left) / 3;
-    //     var dy = (bottom - top) / 3;
-    //     var lx = left + dx;
-    //     var rx = right - dx;
-    //     var ty = top + dy;
-    //     var by = bottom - dy;
-    //     var res = [
-    //         [lx, ty],
-    //         [rx, ty],
-    //         [lx, by],
-    //         [rx, by]
-    //     ];
-    //     do {
-    //         var [x, y] = res.pop();
-    //         var r = s(x, y);
-    //         if (r < t) {
-    //             t = r;
-    //             mx = x;
-    //             my = y;
-    //         }
-    //     }
-    //     while (res.length);
-    //     left = mx - dx;
-    //     right = mx + dx;
-    //     top = my - dy;
-    //     bottom = my + dy;
-    // }
     return [mx, my];
 };
 var getCanvas = function (e) {
     return e.getElementsByTagName('canvas')[0];
 };
 var sample = "#ff0000";
-var buildpad = function (pad, c = sample) {
+var buildpad = lazy(function (pad, c = sample) {
     var canvas = getCanvas(pad);
     canvas.width = 256;
     canvas.height = 256;
@@ -126,7 +90,24 @@ var buildpad = function (pad, c = sample) {
         }
     }
     context.putImageData(imagedata, 0, 0);
-};
+}, {});
+var buildopa = lazy(function (pad, c = sample) {
+    var canvas = getCanvas(pad);
+    canvas.width = 1;
+    canvas.height = 256;
+    var [r, g, b] = color.parse(c);
+    var context = canvas.getContext("2d");
+    var imagedata = context.getImageData(0, 0, 1, 256);
+    var data = imagedata.data;
+    for (var cx = 0, dx = data.length; cx < dx;) {
+        data[cx++] = r;
+        data[cx++] = g;
+        data[cx++] = b;
+        data[cx++] = 255 - (cx >> 2);
+    }
+    context.putImageData(imagedata, 0, 0);
+
+}, {});
 var buildhue = function (hue) {
     var canvas = getCanvas(hue);
     canvas.width = 10;
@@ -149,86 +130,106 @@ var getpointer = function (e) {
     return e.getElementsByTagName('pointer')[0];
 };
 var bindinput = function (input, callback) {
-    var key = 'oninput' in input ? 'oninput' : 'onkeyup';
-    input[key] = input.onchange = input.onpaste = input.oncut = callback;
+    on("keydown.enter")(input, callback);
+};
+var color2xyz = function (c) {
+    var [r, g, b, a] = color.parse(c);
+    var z = color.rgb2h(r, g, b) / 360;
+    var c1 = z2c(z);
+    var [x, y] = c2xy(c1, c);
+    return [x, y, z, a];
 };
-
 function main(e) {
     var elem = e || div();
     elem.innerHTML = colorpad;
-    var [bg, pad, hue, val] = elem.children;
+    var [bg, pad, hue, opa, val] = elem.children;
     buildpad(pad);
     buildhue(hue);
+    buildopa(opa);
     var [hex, rgb, hsl] = val.getElementsByTagName("input");
-
-    bindinput(hex, function (e) {
-        var { value } = this;
-        if (!/^#[\da-f]{6}$/i.test(value)) {
-            var match = /[\da-f]+/i.exec(value);
-            value = "#" + (match ? match[0] : '');
-            if (value.length > 7) value = value.slice(0, 7);
-            if (value !== this.value) this.value = value;
-        } else {
-            var angle = color.angle(sample, value) / (Math.PI + Math.PI)
-            if (angle >= 0) {
-                z = angle;
-            }
-            [x, y] = c2xy(z2c(z), value);
-            render();
+    var Hex = a => a > 15 ? a.toString(16) : "0" + a.toString(16);
+    hex.setValue = function (v) {
+        var [r, g, b, a] = color.parse(v);
+        var value = [r, g, b];
+        if (isFinite(a) && a !== 1) {
+            a = a * 255;
+            value[3] = a;
         }
-    });
-    bindinput(rgb, function (e) {
-        var { value } = this;
-        if (!/^rgb\(\d+,\s*\d+,\s*\d+\)$/i.test(value)) {
-            var match = /rgb\((.*)\)?/i.exec(value);
-            if (match) {
-                value = match[0];
-            }
-            if (value !== this.value) this.value = value;
-        } else {
-            z = color.angle(sample, value) / (Math.PI + Math.PI);
-            [x, y] = c2xy(z2c(z), value);
-            render();
-        }
-
-    });
-    bindinput(hsl, function (e) {
-    });
-    var x = 1, y = 0, z = 0, requester = 0;
+        this.value = "#" + value.map(a => +a.toFixed()).map(Hex).join("");
+    };
+    rgb.setValue = function (v) {
+        var [r, g, b, a] = color.parse(v);
+        r = r.toFixed();
+        g = g.toFixed();
+        b = b.toFixed();
+        a = +a.toFixed(3);
+        var o = +a;
+        this.value = `rgb${o !== 1 ? 'a' : ''}(${r}, ${g}, ${b}${o !== 1 ? ', ' + a : ''})`;
+    };
+    hsl.setValue = function (v) {
+        var [r, g, b, a] = color.parse(v);
+        var [h, s, l] = color.rgb2hsl([r, g, b]);
+        s *= 100;
+        l *= 100;
+        a *= 100;
+        s = +s.toFixed();
+        l = +l.toFixed();
+        a = +a.toFixed();
+        h = h.toFixed();
+        var o = a !== 100;
+        this.value = `hsl${o ? 'a' : ''}(${h}deg ${s}% ${l}%${o ? " / " + a + "%" : ""})`;
+    };
+    elem.setValue = function (v) {
+        var [_x, _y, z, a] = color2xyz(v);
+        hue.value = z;
+        opa.value = 1 - a;
+        css(huepointer, { top: +(z * 100).toFixed(6) + '%' })
+        css(opapointer, { top: +(100 - a * 100).toFixed(6) + '%' })
+        x = _x;
+        y = _y;
+        render();
+    };
+    var inputv = function () {
+        elem.setValue(this.value);
+    };
+    bindinput(hex, inputv);
+    bindinput(hsl, inputv);
+    bindinput(rgb, inputv);
+    var x = 1, y = 0, z = 0;
     var padpointer = getpointer(pad);
     var huepointer = getpointer(hue);
+    var opapointer = getpointer(opa);
     var render = function () {
-        z = trim(z);
+        z = trim(hue.value || 0);
         x = trim(x);
         y = trim(y);
+        var a = trim(1 - (opa.value || 0));
         var c = z2c(z);
-        var [r, g, b] = color.parse(c).map(a => xy2c(a, x, y));
-        var p = color.stringify([r, g, b]);
-        [r, g, b] = color.parse(p);
-        var [h = 0, s = 0, l] = color.rgb2hsl([r, g, b]);
-        cancelAnimationFrame(requester);
-        requester = requestAnimationFrame(function () {
-            buildpad(pad, c);
-        });
+        var c0 = color.parse(c).slice(0, 3).map(a => xy2c(a, x, y));
+        c0[3] = a;
+        var p = color.stringify(c0);
         var value = p;
-        var valuergb = `rgb(${r}, ${g}, ${b})`;
-        var valuehsl = `hsl(${h.toFixed(0)}, ${(s * 100).toFixed(0)}%, ${(l * 100).toFixed(0)}%)`;
         css(padpointer, {
             left: +(x * 100).toFixed(6) + "%",
             top: +(y * 100).toFixed(6) + "%",
-            background: value,
-            borderColor: c4rgb(r, g, b, pad.dark, pad.light),
+            background: p,
+            outlineColor: color.pair(p),
         });
         css(huepointer, {
-            top: +(z * 100).toFixed(6) + "%",
-            borderColor: c4c(c),
+            outlineColor: color.pair(c),
             background: c
         });
-        if (!color.equal(value, hex.value)) hex.value = value;
-        if (!color.equal(valuergb, rgb.value)) rgb.value = valuergb;
-        if (!color.equal(valuehsl, hsl.value)) hsl.value = valuehsl;
+        css(opapointer, {
+            outlineColor: color.pair(p),
+            background: p
+        });
+        buildopa(opa, p);
+
+        hex.setValue(value);
+        rgb.setValue(value);
+        hsl.setValue(value);
         bg.style.borderColor = value;
-        val.style.color = c4rgb(r, g, b);
+        val.style.color = color.pair(value);
         elem.value = value;
         dispatch(elem, 'change');
         // console.log(value, hex.value, valuergb, valuehsl);
@@ -237,12 +238,25 @@ function main(e) {
         if (a < 0) a = 0;
         if (a > 1) a = 1;
         return a || 0;
-    }
-    var sethue = function (event) {
+    };
+    var sethue = function (z) {
+        var c = z2c(z);
+        buildpad(pad, c);
+    };
+    var setpointer = function (event) {
         var { clientY } = event;
-        var { top, height } = getScreenPosition(hue);
-        z = (clientY - top) / height;
-        if (document.activeElement !== huepointer) huepointer.focus();
+        var { top, height } = getScreenPosition(this);
+        var z = (clientY - top) / height;
+        if (z > 1) z = 1;
+        if (z < 0) z = 0;
+        this.value = z;
+        if (this === hue) {
+            sethue(z);
+        }
+        var pointer = getpointer(this);
+        css(pointer, {
+            top: +(z * 100).toFixed(6) + "%",
+        });
         render();
     };
     var setpad = function (event) {
@@ -250,17 +264,20 @@ function main(e) {
         var { top, left, height, width } = getScreenPosition(pad);
         x = (clientX - left) / width;
         y = (clientY - top) / height;
-        if (document.activeElement !== padpointer) padpointer.focus();
         render();
     };
     moveupon(hue, {
-        start: sethue,
-        move: sethue
+        start: setpointer,
+        move: setpointer
     });
     moveupon(pad, {
         start: setpad,
         move: setpad
     });
+    moveupon(opa, {
+        start: setpointer,
+        move: setpointer
+    });
     render();
     onmousedown(elem, e => /^input$/i.test(e.target.tagName) || e.preventDefault());
     return elem;

package/coms/zimoli/colorpad.less

@@ -1,16 +1,18 @@
+@import "./bggrid-func.less";
+
 pointer {
-    display   : block;
-    height    : 6px;
-    border    : 1px solid #fff;
+    display: block;
+    height: 6px;
+    outline: 1px solid #fff;
     background: #ccc;
-    top       : 0;
-    left      : 0;
+    top: 0;
+    left: 0;
     box-sizing: border-box;
-    position  : absolute;
+    position: absolute;
 }
 
 >div {
-    display : inline-block;
+    display: inline-block;
     position: relative;
 
 
@@ -22,34 +24,38 @@ pointer {
         font-size: 0;
 
         >pointer {
-            width : 6px;
+            width: 6px;
             margin: -3px;
         }
 
         >canvas {
-            width     : 256px;
-            height    : 256px;
+            width: 256px;
+            height: 256px;
             background: #fff;
         }
     }
 
-    &.hue {
+    &.hue,
+    &.opa {
         font-size: 0;
 
         >pointer {
             margin: -3px -1px;
-            width : 12px;
+            width: 10px;
+            padding: 0 1px;
+            box-sizing: content-box;
         }
 
         >canvas {
-            background: #000;
-            width     : 10px;
-            height    : 256px;
+            background: #fff;
+            width: 10px;
+            height: 256px;
+            .grid();
         }
     }
 
     &.val {
-        margin : 0;
+        margin: 0;
         padding: 10px 0 0 0;
 
         >input {
@@ -59,55 +65,51 @@ pointer {
             }
 
             color: inherit;
-            text-transform  : lowercase;
+            text-transform : lowercase;
             background-color: transparent;
-            box-sizing      : border-box;
-            padding         : 0 3px;
-            position        : relative;
-            font-size       : 12px;
-            border          : none;
-            text-align      : left;
-            min-width       : 40px;
-            width           : 30%;
-
-            &+input {
-                margin-left: 6px;
-            }
+            box-sizing : border-box;
+            padding : 0 3px;
+            position : relative;
+            font-size : 12px;
+            border : none;
+            text-align : left;
+            min-width : 40px;
+            width : 30%;
         }
 
         >.hex {
-            width: 56px;
+            width: 76px;
         }
 
         >.rgb {
-            width: 114px;
+            width: 156px;
         }
 
         >.hsl {
-            width: 114px;
+            width: 186px;
         }
     }
 }
 
 & {
-    width        : 312px;
-    background   : #fff;
-    padding      : 17px 0 7px 0;
-    text-align   : center;
-    user-select  : none;
+    width: 462px;
+    min-width: 372px;
+    background: #fff;
+    padding: 17px 0 7px 0;
+    text-align: center;
+    user-select: none;
     border-radius: 3px;
-    position     : relative;
+    position: relative;
 }
 
 &>.bg {
-    display            : block;
-    left               : 2px;
-    top                : 2px;
-    right              : 2px;
-    bottom             : 2px;
-    border-radius      : 2px;
-    border-color       : inherit;
-    border             : 2px solid;
+    display: block;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border-color: inherit;
+    border: 2px solid;
     border-bottom-width: 26px;
-    position           : absolute;
+    position: absolute;
 }

package/coms/zimoli/colorpicker.js

@@ -2,7 +2,7 @@ function main(element = document.createElement("div")) {
     element.innerHTML = colorpicker;
     var saved_value;
     var selector = element.firstChild;
-    select(selector, colorpad(), false);
+    select(selector, colorpad(), false, 'y');
     render(element, {
         a: button,
         colorlabel,

package/coms/zimoli/createElement.js

@@ -58,7 +58,7 @@ var prototype = {
 
 function createElement(name) {
     var node = isNode(name) ? name.cloneNode() : isFunction(name) ? name() : document.createElement(name);
-    if (name.className) node.className = name.className;
+    if (name.className) addClass(node, name.className);
     appendChild(node, slice.call(arguments, 1));
     extend(node, prototype);
     return node;

package/coms/zimoli/popup.js

@@ -262,12 +262,12 @@ var _as_yextra = function (global, innerWidth, innerHeight, element, target, poi
             viewrect.right = viewrect.left + viewrect.width;
             viewrect.bottom = viewrect.top + viewrect.height;
         }
-        var maxHeight = Math.max(position.top, innerHeight - position.top - position.height);
+        var maxHeight = Math.max(position.top, innerHeight - position.top - position.height) | 0;
         var maxWidth = Math.max(position.left + position.width, innerWidth - position.left);
         var height = element.offsetHeight;
         //如果高度超出可视区，调整高度
         if (height > maxHeight) {
-            css(element, { height: fromOffset(maxHeight) });
+            css(element, { height: fromOffset(maxHeight), maxHeight: fromOffset(maxHeight) });
         }
 
         css(element, `min-width:auto;`);

package/coms/zimoli/select.js

@@ -16,7 +16,7 @@ var _remove = function () {
             }
             once('blur')(activeElement, function () {
                 if (!isMounted(this)) return removing_list.target.focus();
-                run();
+                _remove();
             });
         });
     }
@@ -137,8 +137,8 @@ function select(target, list, removeOnSelect, direction) {
     }
     var mousedown = function () {
         initList();
-        if (saved_list !== list) {
-            _remove();
+        if (saved_list !== list || !isMounted(list)) {
+            if (saved_list && saved_list !== list) _remove();
             if (document.activeElement !== target) target.focus();
             popup(list, target, direction);
             saved_list = list;