efront 3.7.7 → 3.8.4

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/data.js

@@ -155,6 +155,7 @@ function getUrlParamsForApi(api, url) {
             cap.push(a.slice(1));
             return r;
         });
+    if (api.base) base = api.base + base;
     var params = {};
     url = url.replace(/[\?#]*$/g, function (match) {
         match.split(/[&#\?]+/).forEach(function (s) {
@@ -844,7 +845,10 @@ var data = {
             this.responseLoading(instance);
             var params = privates.pack(sid, params1);
             if (!privates.validApi(api, params)) throw aborted;
-            var { method, uri, params, selector } = privates.prepare(api.method, api.url, params);
+            let url = api.url;
+            var base = api.base;
+            if (base) url = base + api.path;
+            var { method, uri, params, selector } = privates.prepare(api.method, url, params);
             var promise = new Promise(function (ok, oh) {
                 var headers = api.headers;
                 if (headers) {

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;

package/coms/zimoli/selectList.js

@@ -24,8 +24,8 @@ var multipleClick = function () {
 };
 
 function main(children, multiple, addable) {
-    var list = div();
-    list.value = multiple ? [] : "";
+    var page = div();
+    page.value = multiple ? [] : "";
     var firstValue = false;
     var clicker = multiple ? multipleClick : singleClick;
     var itemMap = Object.create(null);
@@ -33,7 +33,6 @@ function main(children, multiple, addable) {
         var key = option.key || option.value;
         if (key in itemMap) return itemMap[key];
         var item = itemMap[option.value] = document.createElement('div');
-
         item.setAttribute("item", '');
         item.innerHTML = option.innerHTML || option.name;
         item.name = option.name || option.innerHTML;
@@ -47,12 +46,12 @@ function main(children, multiple, addable) {
             iconed = icon;
             if (multiple) {
                 item.setAttribute("selected", "");
-                list.value.push(option.value);
+                page.value.push(option.value);
             } else if (!firstValue) {
                 item.setAttribute("selected", "");
-                list.activeNode = item;
+                page.activeNode = item;
                 firstValue = true;
-                list.value = option.value
+                page.value = option.value
             }
         }
         if (option.disabled) {
@@ -64,10 +63,22 @@ function main(children, multiple, addable) {
 
     }
     var hasIcon = false, iconed = '';
-    appendChild(list, [].map.call(children, createItem));
+    var page = list(page, function (i) {
+        if (i < 0 || i >= children.length) return;
+        return createItem(children[i]);
+    });
+    on("append")(page, function () {
+        page.clean();
+        page.go(0);
+        if (adder) {
+            remove(adder);
+            appendChild(page, adder);
+        }
+    })
     if (addable) {
         var adder = document.createElement("div");;
         adder.innerHTML = "<a>添加</a><a>管理</a>";
+        adder.setAttribute('insert', '');
         button(adder.firstChild);
         button(adder.children[1]);
         on("click")(adder, async function (event) {
@@ -81,43 +92,43 @@ function main(children, multiple, addable) {
                             return false;
                         }
                     });
-                    list.with = a;
+                    page.with = a;
                     on('remove')(a, function () {
-                        list.with = null;
+                        page.with = null;
                     });
                     a = await a;
                     if (a in itemMap) return false;
-                    cast(list.target, "add-option", a);
+                    cast(page.target, "add-option", a);
                     children.push({ name: a, key: a });
-                    list.insertBefore(createItem({
+                    page.insertBefore(createItem({
                         name: a,
                         value: a,
                     }), adder);
                     break;
                 case this.children[1]:
-                    var options = [].slice.call(list.children, 0, list.children.length - 1);
+                    var options = [].slice.call(children, 0, children.length);
                     var edit = selectListEdit(options.slice(0));
-
-                    list.with = edit;
+                    page.with = edit;
                     on("remove")(edit, function () {
-                        list.with = null;
-                        remove([].slice.call(list.children, 0, list.children.length - 1));
+                        page.with = null;
                         children.splice(0, children.length);
                         children.push.apply(children, edit.$scope.options.map(o => ({ key: o.key || o.value, name: o.name || o.innerHTML })))
-                        appendChild.before(adder, edit.$scope.options.map(createItem));
-                        cast(list.target, 'set-options', edit.$scope.options);
+                        cast(page.target, 'set-options', edit.$scope.options);
+                        page.clean();
+                        remove(adder);
+                        page.go(0);
+                        appendChild(page, adder);
                     });
                     popup(edit, [.5, .5]);
                     break;
             }
-        })
+        });
         adder.setAttribute("adder", '');
-        list.appendChild(adder)
     }
     if (hasIcon) {
-        list.setAttribute('iconed', '');
+        page.setAttribute('iconed', '');
     }
-    list.icon = iconed;
-    on('mousedown')(list, e => e.preventDefault());
-    return list;
+    page.icon = iconed;
+    on('mousedown')(page, e => e.preventDefault());
+    return page;
 }

package/coms/zimoli/selectList.less

@@ -5,6 +5,10 @@
     box-shadow: 0 0 20px -6px rgba(0, 0, 0, .1);
     box-sizing: border-box;
     border: 1px solid #0003;
+    overflow: hidden;
+    width: auto;
+    height: auto;
+    max-height: 360px;
 
     >[item] {
         cursor: default;

package/coms/zimoli/selectListEdit.js

@@ -20,7 +20,6 @@ function main(options) {
                 }
             }
             if (i >= 0) options.splice(i, 1);
-            console.log(i)
             this.research();
         },
         get search() {