web:add Switch Shader

doric-web/dist/index.js

@@ -6170,6 +6170,101 @@ var doric_web = (function (exports, axios, sandbox) {
         }
     }
 
+    class DoricSwitchNode extends DoricViewNode {
+        build() {
+            const ret = document.createElement('div');
+            ret.style.position = "relative";
+            ret.style.width = "50px";
+            ret.style.height = "30px";
+            const input = document.createElement('input');
+            input.type = "checkbox";
+            input.style.display = "none";
+            const box = document.createElement('div');
+            box.style.width = "100%";
+            box.style.height = "100%";
+            box.style.backgroundColor = "#ccc";
+            box.style.borderRadius = "15px";
+            const span = document.createElement('span');
+            span.style.display = "inline-block";
+            span.style.height = "30px";
+            span.style.width = "30px";
+            span.style.borderRadius = "15px";
+            span.style.background = "#fff";
+            box.appendChild(span);
+            ret.appendChild(input);
+            ret.appendChild(box);
+            ret.onclick = () => {
+                if (input.checked === false) {
+                    span.animate([{ transform: "translateX(30px)" }], {
+                        duration: 200,
+                        fill: "forwards"
+                    });
+                    box.animate([{ backgroundColor: "forestgreen" }], {
+                        duration: 200,
+                        fill: "forwards"
+                    });
+                    input.checked = true;
+                }
+                else {
+                    span.animate([{ transform: "translateX(0px)" }], {
+                        duration: 200,
+                        fill: "forwards"
+                    });
+                    box.animate([{ backgroundColor: "#ccc" }], {
+                        duration: 200,
+                        fill: "forwards"
+                    });
+                    input.checked = false;
+                }
+                if (this.onSwitchFuncId) {
+                    this.callJSResponse(this.onSwitchFuncId, input.checked);
+                }
+            };
+            this.input = input;
+            this.span = span;
+            this.box = box;
+            return ret;
+        }
+        setChecked(v) {
+            if (!this.input || !this.span || !this.box) {
+                return;
+            }
+            if (this.input.checked === false) {
+                this.span.style.transform = "translateX(30px)";
+                this.box.style.backgroundColor = "forestgreen";
+                this.input.checked = true;
+            }
+            else {
+                this.span.style.transform = "translateX(0px)";
+                this.box.style.backgroundColor = "#ccc";
+                this.input.checked = false;
+            }
+        }
+        blendProps(v, propName, prop) {
+            switch (propName) {
+                case "state":
+                    this.setChecked(prop);
+                    break;
+                case "onSwitch":
+                    this.onSwitchFuncId = prop;
+                    break;
+                case "offTintColor":
+                    break;
+                case "onTintColor":
+                    break;
+                case "thumbTintColor":
+                    break;
+                default:
+                    super.blendProps(v, propName, prop);
+                    break;
+            }
+        }
+        getState() {
+            var _a;
+            return ((_a = this.input) === null || _a === void 0 ? void 0 : _a.checked) || false;
+        }
+    }
+
     const bundles = new Map;
     const plugins = new Map;
     const nodes = new Map;
@@ -6207,6 +6302,7 @@ var doric_web = (function (exports, axios, sandbox) {
     registerViewNode('List', DoricListNode);
     registerViewNode('Draggable', DoricDraggableNode);
     registerViewNode('Refreshable', DoricRefreshableNode);
+    registerViewNode('Switch', DoricSwitchNode);
 
     function getScriptId(contextId) {
         return `__doric_script_${contextId}`;

doric-web/src/DoricRegistry.ts

@@ -16,6 +16,7 @@ import { DoricListNode } from "./shader/DoricListNode"
 import { DoricDraggableNode } from "./shader/DoricDraggableNode"
 import { DoricRefreshableNode } from "./shader/DoricRefreshableNode"
 import { AnimatePlugin } from "./plugins/AnimatePlugin"
+import { DoricSwitchNode } from "./shader/DoricSwitchNode"
 
 const bundles: Map<string, string> = new Map
 
@@ -66,4 +67,5 @@ registerViewNode('Scroller', DoricScrollerNode)
 registerViewNode('ListItem', DoricListItemNode)
 registerViewNode('List', DoricListNode)
 registerViewNode('Draggable', DoricDraggableNode)
-registerViewNode('Refreshable', DoricRefreshableNode)
+registerViewNode('Refreshable', DoricRefreshableNode)
+registerViewNode('Switch', DoricSwitchNode)

doric-web/src/shader/DoricSwitchNode.ts

@@ -0,0 +1,102 @@
+import { DoricViewNode } from "./DoricViewNode";
+
+export class DoricSwitchNode extends DoricViewNode {
+    input?: HTMLInputElement
+    box?: HTMLDivElement
+    span?: HTMLSpanElement
+    onSwitchFuncId?: string
+
+    build() {
+        const ret = document.createElement('div')
+        ret.style.position = "relative"
+        ret.style.width = "50px"
+        ret.style.height = "30px"
+        const input = document.createElement('input')
+        input.type = "checkbox"
+        input.style.display = "none"
+        const box = document.createElement('div')
+        box.style.width = "100%"
+        box.style.height = "100%"
+        box.style.backgroundColor = "#ccc"
+        box.style.borderRadius = "15px"
+        const span = document.createElement('span')
+        span.style.display = "inline-block"
+        span.style.height = "30px"
+        span.style.width = "30px"
+        span.style.borderRadius = "15px"
+        span.style.background = "#fff"
+        box.appendChild(span)
+        ret.appendChild(input)
+        ret.appendChild(box)
+        ret.onclick = () => {
+            if (input.checked === false) {
+                span.animate(
+                    [{ transform: "translateX(30px)" }], {
+                    duration: 200,
+                    fill: "forwards"
+                })
+                box.animate([{ backgroundColor: "forestgreen" }], {
+                    duration: 200,
+                    fill: "forwards"
+                })
+                input.checked = true
+            } else {
+                span.animate([{ transform: "translateX(0px)" }], {
+                    duration: 200,
+                    fill: "forwards"
+                })
+                box.animate([{ backgroundColor: "#ccc" }], {
+                    duration: 200,
+                    fill: "forwards"
+                })
+                input.checked = false
+            }
+            if (this.onSwitchFuncId) {
+                this.callJSResponse(this.onSwitchFuncId, input.checked)
+            }
+        }
+        this.input = input
+        this.span = span
+        this.box = box
+        return ret
+    }
+
+    private setChecked(v: boolean) {
+        if (!this.input || !this.span || !this.box) {
+            return
+        }
+        if (this.input.checked === false) {
+            this.span.style.transform = "translateX(30px)"
+            this.box.style.backgroundColor = "forestgreen"
+            this.input.checked = true
+        } else {
+            this.span.style.transform = "translateX(0px)"
+            this.box.style.backgroundColor = "#ccc"
+            this.input.checked = false
+        }
+    }
+
+    blendProps(v: HTMLElement, propName: string, prop: any) {
+        switch (propName) {
+            case "state":
+                this.setChecked(prop)
+                break
+            case "onSwitch":
+                this.onSwitchFuncId = prop
+                break
+            case "offTintColor":
+                break
+            case "onTintColor":
+                break
+            case "thumbTintColor":
+                break
+            default:
+                super.blendProps(v, propName, prop)
+                break
+        }
+    }
+
+    getState() {
+        return this.input?.checked || false
+    }
+}

doric-web/test.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta content="telephone=yes" name="format-detection" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="white">
+    <meta name="x5-fullscreen" content="true">
+    <meta name="apple-touch-fullscreen" content="yes">
+    <title>H5开关效果</title>
+    <style>
+        * {margin: 0;padding: 0;}
+        body{background:#f1f1f1;}
+        .swich{width:200px;margin:100px auto;}
+        .swich .box{width:60px;height:30px;background:#ccc;border-radius:20px;transition: all .5s ease;}
+        .swich input{display:none;}
+        .swich .box span{display:inline-block;height:30px;width:30px;border-radius:15px;background:#fff;transform:translateX(0px);transition: all .5s ease;}
+        .swich-on .box{background:forestgreen;transition: all .5s ease;}
+        .swich-on .box span{transform:translateX(30px);transition: all .5s ease;}
+    </style>
+
+</head>
+
+<body>
+    <div class="swich">
+        <input type="checkbox" value="" name=""/>
+        <div class="box">
+            <span></span>
+        </div>
+    </div>
+</body>
+</html>
+<script>
+    (function(select){
+        var box = document.querySelector(select)
+        var checkbox = box.querySelector("input");
+        box.onclick = function(){
+            this.classList.toggle("swich-on");
+            if(checkbox.checked){
+                console.log("已经选中");
+                checkbox.checked = "true";
+            }else{
+                console.log("没有选中");
+                checkbox.checked = "false";
+            }
+        }
+    })(".swich");
+</script>