efront 3.11.4 → 3.12.3

package/coms/zimoli/selectList.js

@@ -1,12 +1,17 @@
 var singleClick = function () {
     var node = this.parentNode;
     if (node.activeNode === this) return;
-    if (node.activeNode) node.activeNode.removeAttribute("selected");
+    if (node.activeNode) {
+        if (node.activeNode.origin) node.activeNode.origin.selected = false;
+        node.activeNode.removeAttribute("selected");
+    }
     this.setAttribute("selected", "");
+
     node.activeNode = this;
     if (node.value === this.value) return;
     node.value = this.value;
     node.name = this.name;
+    if (this.origin) this.origin.selected = true;
     dispatch(node, "change");
 };
 var multipleClick = function () {
@@ -20,13 +25,33 @@ var multipleClick = function () {
         values.splice(index, 1);
         this.removeAttribute("selected");
     }
+    if (this.origin) this.origin.selected = true;
     dispatch(node, "change");
 };
 
-function main(children, multiple, addable) {
-    var page = div();
+
+function main() {
+    var children, multiple, addable, generator, page;
+    for (let a of arguments) {
+        if (a instanceof Array) children = a;
+        switch (typeof a) {
+            case "function":
+                generator = a;
+                break;
+            case "boolean":
+                if (multiple === void 0) multiple = a;
+                else addable = a;
+            case "object":
+                if (isNode(a)) {
+                    page = a;
+                    if (!generator) generator = getGenerator(page);
+                }
+                else if (a.length) children = a;
+
+        }
+    }
+    if (!page) page = div();
     page.value = multiple ? [] : "";
-    var firstValue = false;
     var clicker = multiple ? multipleClick : singleClick;
     var itemMap = Object.create(null);
     function createItem(option) {
@@ -36,6 +61,7 @@ function main(children, multiple, addable) {
         item.setAttribute("item", '');
         item.innerHTML = option.innerHTML || option.name;
         item.name = option.name || option.innerHTML;
+        item.origin = option;
         var icon = option.getAttribute ? option.getAttribute("icon") : option.icon;
         if (icon) {
             if (!hasIcon) {
@@ -50,10 +76,10 @@ function main(children, multiple, addable) {
             if (multiple) {
                 item.setAttribute("selected", "");
                 page.value.push(option.value);
-            } else if (!firstValue) {
+            }
+            else {
                 item.setAttribute("selected", "");
                 page.activeNode = item;
-                firstValue = true;
                 page.value = option.value
             }
         }
@@ -61,18 +87,28 @@ function main(children, multiple, addable) {
             item.setAttribute('disabled', '');
         } else {
             onclick(item, clicker);
+            on("mouseenter")(item, mouseenter);
         }
         return item;
 
     }
+    var mouseenter = function () {
+        if (!mouse) return;
+        focus = this.index;
+        setFocus();
+    };
+
+
     var hasIcon = false, iconed = '';
     var page = list(page, function (i) {
         if (i < 0 || i >= children.length) return;
-        return createItem(children[i]);
+        return createItem(generator ? generator(i) : children[i]);
     });
-    on("append")(page, function () {
+    once("append")(page, function () {
+        var index = 0;
+        for (var cx = 0, dx = children.length; cx < dx; cx++)if (children[cx].selected) index = cx;
         page.clean();
-        page.go(0);
+        page.go(index);
         if (adder) {
             remove(adder);
             appendChild(page, adder);
@@ -129,6 +165,60 @@ function main(children, multiple, addable) {
         adder.setAttribute("adder", '');
     }
     page.icon = iconed;
+    var focus = 0, focused, mouse = false;
+    var setFocus = function () {
+        var e = page.getIndexedElement(focus);
+        if (e === focused) return;
+        if (focused) removeClass(focused, 'focus');
+        focused = e;
+        if (e) addClass(e, 'focus');
+        mouse = false;
+    };
+    var setMouse = function () {
+        mouse = true;
+    }
+    onmousemove(page, setMouse);
+    onmousewheel(page, setMouse);
+    var moveFocus = function (delta) {
+        focus += delta;
+        if (focus < 0) focus = 0;
+        if (focus >= children.length) focus = children.length - 1;
+        page.scrollIfNotCover(focus);
+        setFocus();
+    };
+    bind('keydown.up')(page, function () {
+        moveFocus(-1);
+    });
+    bind('keydown.down')(page, function () {
+        moveFocus(1);
+    });
+    bind('keydown.tab')(page, function (event) {
+        if (document.activeElement === page.target) event.preventDefault();
+        moveFocus(event.shiftKey ? -1 : 1);
+    });
+    bind("keydown.home")(page, function (e) {
+        moveFocus(-focus);
+    });
+    bind("keydown.end")(page, function (e) {
+        moveFocus(children.length - 1 - focus);
+    });
+    bind("keydown.pagedown")(page, function (e) {
+        page.scrollBy(page.clientHeight);
+        focus = page.index() | 0;
+        moveFocus(0);
+    })
+    bind("keydown.pageup")(page, function (e) {
+        page.scrollBy(-page.clientHeight);
+        focus = page.index() | 0;
+        moveFocus(0);
+    })
+    var enter = function (e) {
+        e.preventDefault();
+        var e = page.getIndexedElement(focus);
+        if (e) e.click();
+    };
+    bind('keydown.enter')(page, enter);
+    bind('keydown.space')(page, enter);
     on('mousedown')(page, e => e.preventDefault());
     return page;
 }

package/coms/zimoli/selectList.less

@@ -15,10 +15,10 @@
         padding: 0 16px;
 
         &[selected] {
-            color: #26f;
+            color: #29e;
         }
 
-        &:hover {
+        &.focus {
             background-color: #2ca2f9;
             color: #fff;
         }

package/coms/zimoli/selectList_test.html

@@ -2,9 +2,13 @@
     <option>选项一</option>
     <option>选项二</option>
     <option>选项三</option>
+    <option selected>简单选项</option>
 </select>
 <select>
-    <option>选项一</option>
-    <option>选项二</option>
-    <option>选项三</option>
+    <option -repeat="(o,i) in options600" -text="'选项'+o">选项</option>
+    <option selected>600个选项</option>
 </select>
+<select -src="(o,i) in options6000">
+    <option -text="'选项'+o">选项</option>
+    <option insert selected>60000个选项</option>
+</select>

package/coms/zimoli/selectList_test.js

@@ -1,8 +1,14 @@
 var page = div();
 page.innerHTML = selectList_test;
-render(page,{
-    select
-})
+render(page, {
+    select,
+    select2() {
+        var sel = document.createElement("select");
+        return sel;
+    },
+    options600: new Array(600).fill(0).map((_, a) => a),
+    options6000: new Array(60000).fill(0).map((_, a) => a)
+});
 function main() {
     return page;
 }

package/coms/zimoli/touchList_test.js

@@ -1,7 +1,7 @@
-var listY = list(function (data, index) {
+var listY = list(function (index) {
     var item = div();
     css(item, `width:100%;height:${Math.random() * 110 + 30}px;border:1px solid;`);
-    text(item, data);
+    text(item, index);
     return item;
 }, "Y");
 onappend(listY, function () {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "efront",
-    "version": "3.11.4",
+    "version": "3.12.3",
     "description": "一个开发工具，开放源代码，自带组件库和编译环境，可以用来开发web组件，web应用或nodejs模块，或做为已有代码的加密工具，也可以做为静态页面服务器或跨域中转服务器使用",
     "main": "public/efront.js",
     "directories": {