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

web:Switch Node full support

Browse Source
This commit is contained in:
pengfei.zhou 2021-04-19 11:27:15 +08:00 committed by osborn
parent 8486f80b11
commit 9ac6597e8d
3 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6171,6 +6171,11 @@ var doric_web = (function (exports, axios, sandbox) {
} }
class DoricSwitchNode extends DoricViewNode { class DoricSwitchNode extends DoricViewNode {
constructor() {
super(...arguments);
this.offTintColor = "#e6e6e6";
this.onTintColor = "#52d769";
}
build() { build() {
const ret = document.createElement('div'); const ret = document.createElement('div');
ret.style.position = "relative"; ret.style.position = "relative";
@ -6190,6 +6195,7 @@ var doric_web = (function (exports, axios, sandbox) {
span.style.width = "30px"; span.style.width = "30px";
span.style.borderRadius = "15px"; span.style.borderRadius = "15px";
span.style.background = "#fff"; span.style.background = "#fff";
span.style.boxShadow = "0px 3px 3px #eee";
box.appendChild(span); box.appendChild(span);
ret.appendChild(input); ret.appendChild(input);
ret.appendChild(box); ret.appendChild(box);
@ -6199,7 +6205,7 @@ var doric_web = (function (exports, axios, sandbox) {
duration: 200, duration: 200,
fill: "forwards" fill: "forwards"
}); });
box.animate([{ backgroundColor: "forestgreen" }], { box.animate([{ backgroundColor: this.onTintColor }], {
duration: 200, duration: 200,
fill: "forwards" fill: "forwards"
}); });
@ -6210,7 +6216,7 @@ var doric_web = (function (exports, axios, sandbox) {
duration: 200, duration: 200,
fill: "forwards" fill: "forwards"
}); });
box.animate([{ backgroundColor: "#ccc" }], { box.animate([{ backgroundColor: this.offTintColor }], {
duration: 200, duration: 200,
fill: "forwards" fill: "forwards"
}); });
@ -6229,15 +6235,15 @@ var doric_web = (function (exports, axios, sandbox) {
if (!this.input || !this.span || !this.box) { if (!this.input || !this.span || !this.box) {
return; return;
} }
if (this.input.checked === false) { if (v) {
this.span.style.transform = "translateX(30px)"; this.span.style.transform = "translateX(30px)";
this.box.style.backgroundColor = "forestgreen"; this.box.style.backgroundColor = this.onTintColor;
this.input.checked = true; this.input.checked = v;
} }
else { else {
this.span.style.transform = "translateX(0px)"; this.span.style.transform = "translateX(0px)";
this.box.style.backgroundColor = "#ccc"; this.box.style.backgroundColor = this.offTintColor;
this.input.checked = false; this.input.checked = v;
} }
} }
blendProps(v, propName, prop) { blendProps(v, propName, prop) {
@ -6249,10 +6255,17 @@ var doric_web = (function (exports, axios, sandbox) {
this.onSwitchFuncId = prop; this.onSwitchFuncId = prop;
break; break;
case "offTintColor": case "offTintColor":
this.offTintColor = toRGBAString(prop);
this.setChecked(this.getState());
break; break;
case "onTintColor": case "onTintColor":
this.onTintColor = toRGBAString(prop);
this.setChecked(this.getState());
break; break;
case "thumbTintColor": case "thumbTintColor":
if (this.span) {
this.span.style.backgroundColor = toRGBAString(prop);
}
break; break;
default: default:
super.blendProps(v, propName, prop); super.blendProps(v, propName, prop);

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

File diff suppressed because one or more lines are too long

27
doric-web/src/shader/DoricSwitchNode.ts
View File

@ -1,4 +1,4 @@
import { DoricViewNode } from "./DoricViewNode"; import { DoricViewNode, toRGBAString } from "./DoricViewNode";
export class DoricSwitchNode extends DoricViewNode { export class DoricSwitchNode extends DoricViewNode {
input?: HTMLInputElement input?: HTMLInputElement
@ -6,6 +6,9 @@ export class DoricSwitchNode extends DoricViewNode {
span?: HTMLSpanElement span?: HTMLSpanElement
onSwitchFuncId?: string onSwitchFuncId?: string
private offTintColor = "#e6e6e6"
private onTintColor = "#52d769"
build() { build() {
const ret = document.createElement('div') const ret = document.createElement('div')
ret.style.position = "relative" ret.style.position = "relative"
@ -25,6 +28,7 @@ export class DoricSwitchNode extends DoricViewNode {
span.style.width = "30px" span.style.width = "30px"
span.style.borderRadius = "15px" span.style.borderRadius = "15px"
span.style.background = "#fff" span.style.background = "#fff"
span.style.boxShadow = "0px 3px 3px #eee"
box.appendChild(span) box.appendChild(span)
ret.appendChild(input) ret.appendChild(input)
ret.appendChild(box) ret.appendChild(box)
@ -35,7 +39,7 @@ export class DoricSwitchNode extends DoricViewNode {
duration: 200, duration: 200,
fill: "forwards" fill: "forwards"
}) })
box.animate([{ backgroundColor: "forestgreen" }], { box.animate([{ backgroundColor: this.onTintColor }], {
duration: 200, duration: 200,
fill: "forwards" fill: "forwards"
}) })
@ -45,7 +49,7 @@ export class DoricSwitchNode extends DoricViewNode {
duration: 200, duration: 200,
fill: "forwards" fill: "forwards"
}) })
box.animate([{ backgroundColor: "#ccc" }], { box.animate([{ backgroundColor: this.offTintColor }], {
duration: 200, duration: 200,
fill: "forwards" fill: "forwards"
}) })
@ -65,14 +69,14 @@ export class DoricSwitchNode extends DoricViewNode {
if (!this.input || !this.span || !this.box) { if (!this.input || !this.span || !this.box) {
return return
} }
if (this.input.checked === false) { if (v) {
this.span.style.transform = "translateX(30px)" this.span.style.transform = "translateX(30px)"
this.box.style.backgroundColor = "forestgreen" this.box.style.backgroundColor = this.onTintColor
this.input.checked = true this.input.checked = v
} else { } else {
this.span.style.transform = "translateX(0px)" this.span.style.transform = "translateX(0px)"
this.box.style.backgroundColor = "#ccc" this.box.style.backgroundColor = this.offTintColor
this.input.checked = false this.input.checked = v
} }
} }
@ -85,10 +89,17 @@ export class DoricSwitchNode extends DoricViewNode {
this.onSwitchFuncId = prop this.onSwitchFuncId = prop
break break
case "offTintColor": case "offTintColor":
this.offTintColor = toRGBAString(prop)
this.setChecked(this.getState())
break break
case "onTintColor": case "onTintColor":
this.onTintColor = toRGBAString(prop)
this.setChecked(this.getState())
break break
case "thumbTintColor": case "thumbTintColor":
if (this.span) {
this.span.style.backgroundColor = toRGBAString(prop)
}
break break
default: default:
super.blendProps(v, propName, prop) super.blendProps(v, propName, prop)