tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

web:add Switch Shader

Browse Source
This commit is contained in:
pengfei.zhou 2021-04-16 19:37:10 +08:00 committed by osborn
parent d1cc17c7a0
commit 8486f80b11
7 changed files with 262 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
doric-demo/src/AnimatorDemo.ts
View File

@ -17,12 +17,15 @@ function thisLabel(str: string) {
class AnimatorDemo extends Panel {
build(rootView: Group): void {
const view = image({
imageUrl: "https://pic3.zhimg.com/v2-5847d0813bd0deba333fcbe52435e83e_b.jpg"
imageUrl: "https://pic3.zhimg.com/v2-5847d0813bd0deba333fcbe52435e83e_b.jpg",
layoutConfig: layoutConfig().just(),
width: 100,
height: 100
})
view.onClick = () => {
modal(context).toast('Clicked')
}
const view2 = box(3)
//const view = box(3)
let idx = 0
vlayout(
[
@ -65,7 +68,7 @@ class AnimatorDemo extends Panel {
animations: () => {
view.x = view.x || 0
view.x += 100
view2.x += 50
//view2.x += 50
},
duration: 1000,
})
@ -77,7 +80,7 @@ class AnimatorDemo extends Panel {
animations: () => {
view.y = view.y || 0
view.y += 100
view2.y += 50
//view2.y += 50
},
duration: 1000,
})
@ -222,7 +225,6 @@ class AnimatorDemo extends Panel {
],
{
layoutConfig: layoutConfig().most(),
gravity: gravity().center(),
space: 10,
}
).in(rootView)

4
doric-demo/src/NavigatorDemo.ts
View File

@ -18,6 +18,9 @@ class NaivgatorDemo extends Panel {
}),
...[
'AnimatorDemo',
'Gobang',
'SwitchDemo',
'SliderDemo',
'NavbarDemo',
"DraggableDemo",
"RefreshableDemo",
@ -30,7 +33,6 @@ class NaivgatorDemo extends Panel {
'NavigatorDemo',
'NetworkDemo',
'ScrollerDemo',
'SliderDemo',
'Snake',
'StorageDemo',
'PopoverDemo'].map(e =>

96
doric-web/dist/index.js vendored
View File

@ -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}`;

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
doric-web/src/DoricRegistry.ts
View File

@ -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)

102
doric-web/src/shader/DoricSwitchNode.ts Normal file
View File

@ -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
}
}

50
doric-web/test.html Normal file
View File

@ -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>